Deploy a Static HTML CSS Web Application using Microsoft Azure Cloud Shell

Getting started to deploy a simple static HTML CSS web application to Azure Web App service using Microsoft Azure Cloud Shell. We will use a web app present in the GitHub repository.

Prerequisites

• Active Azure Subscription

Command used to Create and Update Web Apps

We will use az webapp up command to perform our deployment. This command makes it easy to create and update web apps. When executed, it performs the following jobs.

1. Create a resource group
2. Create a app service plan
3. Create an web app
4. Zip deploy the files to web app

Download the Static Web App from GitHub using Azure Cloud Shell

Log in to your Azure account and open the Azure Cloud Shell. The Cloud Shell option is available on the header panel on the top right.

When the Azure Cloud Shell opens, click on Bash. If you are opening for the first time, a similar screen will be shown with two options. Select the Bash environment.

The Azure Cloud Shell requires a storage account to manage your files. The Azure Cloud shell will ask you to create a storage account in your selected subscription. Click on Create storage. It will take some time to provision the resource.

This is what your Azure cloud shell looks like when it is ready to take commands.

In the cloud shell, create a new directory and navigate to it using the below commands.

mkdir jdwebapp
cd jdwebapp

Clone your GitHub repository containing the static HTML CSS Web app code in your newly created directory using the git clone command. I am using my public repo for this purpose.

git clone https://github.com/jagdishkumawat30/html-css-hello-world

Create Azure Web App (App Service) using Cloud Shell

Navigate to the directory where your source code is present. The directory name will be the name of your Git repository.

cd html-css-hello-world

Run the az webapp up command with the following parameters to create a web app in your nearest location.

az webapp up --location <Location> --name <AppName> --html

Replace the <Location> and <AppName> with your values. App Name should be a globally unique name.

az webapp up --location eastus --name jdwebapp001 --html

When you run the above command for the first time, it will create a new resource group and provision an app service plan and app service into the resource group.

If you see a similar JSON response, then resource provisioning is done. You can verify your deployment by going to your app service URL (http://<AppName>.azurewebsites.net). In my case it is http://jdwebapp001.azurewebsites.net.

Update your app source code and redeploy it to Azure app service

Below are the few ways you can change your code –

1. Azure Cloud Shell editor
2. GitHub repo and do a git pull in Azure Cloud Shell.
3. IDE (VSCode or any other based on your preference) and push your changes to GitHub, pull your changes in Azure Cloud Shell.

For now, I will use the first approach. Launch the editor by running the below command.

code index.html

Save your changes using Ctrl+s and quit from the editor using Ctrl+q. Redeploy your web app with the same command you used the last time. Make sure it has the same AppName and Location you used earlier.

az webapp up --location eastus --name jdwebapp001 --html

Navigate to your web app to see your changes deployed.

Clean Resources

If this deployment was a try-out for your learning, you can clean up the resources if you no longer need them to avoid being charged. Run the below az group delete command to delete the resource group containing all the resources.

az group delete --name <resource_group> --no-wait

You would have noted the resource group name from the JSON response when you deployed your app. Replace the <resource_group> with the name from the JSON. Enter y when prompted to confirm.

az group delete --name Jagdish_rg_5329 --no-wait

Thank you All!!! Hope you find this useful.