Deploy Website to Azure

I wanted to explore the Azure cloud service of Microsoft and deploy a static React website I completed, on Microsoft Azure. Below are the step that you can follow on the updated Azure admin console panel to deploy an Hello World Html Site which is hosted on Github.

Here is the Hello World Html Site for site hosted on Github. You can visit Microsoft Azure Website and sign up to use the Azure free products for web-mobile – App service to host the website. Once create the URL will look something like this https://azurehelloportal.azurewebsites.net/

Azure free products for web-mobile

Visit the portal to create a new website. You can use get started and select the Web App – Quick start tutorial or directly on Web + Mobile to create Web App.

azure-portal

Fill up the name for the App choose the subscription if you purchased or signed up using any free monthly Azure credit. Microsoft does drop an email sometimes to promote use Azure, keep and eye on your Office365 email address. Select the Resource group. In short a resource group is a container for your resources, You can read about it in more details here. You can use and already created resource group or create a new one.

create site

Click on create. Your site will be created.

Visit the Resource Group tab in left menu to have a look at available resource groups.

 resource-group

IT’s time to visit our website where we will deploy our code which is hosted on Github using Git. The App Service section located on the left menu of the Dashboard screen.

dashboard-left-menu

Visit the Deployment Credentials section under the Deployment Menu to key in and set up the local git and FTP environment.

deployment-credentials

Next up Visit Deployment Option Menu to choose the deployment source to be git and select local git repository. Choose the performance test to test user load and duration.

deployment-option1

deployment-option2

deployment-option3

deployment-option4

Next visit the Properties Section below to copy the azure git url where we will be pushing out local git repository. We will need this later on. This will look something like this- https://niteshpatare@example.scm.azurewebsites.net:443/example.git

git-properties

Note down the git URL.

Visit the overview section where you can see all the git and ftp details as well.

site-overview

Back to the local machine. Open up your cmd prompt and run the following steps one after the another to deploy site to the azure. I consider you are not a newbie to git and have basic understanding of git commands.

git clone https://github.com/Azure-Samples/html-docs-hello-world.git
cd html-docs-hello-world
You can make any Changes as per your needs or else continue with fresh deployment.
git add –-all
git status
git commit -m "added files"

You will need the git URL from the azure portal that we copied earlier.
git remote add azure https://niteshpatare@example.scm.azurewebsites.net:443/example.git
git push azure master
Enter the credentials to complete the process.

Note:- Some time or another you are bound to run into the following error when everything goes well.

Error-You do not have permission to view this directory or page.

You have to set the starting Default document for your site. Visit Application Settings. Under Default Documents add the starting file name. E.G. start.html

final-application-settings

Below are different starting default documents.

default-documents

And we are good to go. Visit the deployed site. You can find the url in Overview section. It will be something like https://example.azurewebsites.net.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s