Using Azure App Service to deploy your static web

Where
4 min readMar 5, 2020

If I have a static web and want to deploy to cloud service. How to do it with a simple way?

First, I search Azure App Service which is a PaaS (Platform as a service) provided by Microsoft. However, when I create the App Service in Azure portal, I need to choose run time for my resource. Even though I only need to publish a static web.

I find that there are a service called “Static Apps” in Azure.

But I can’t find any button or place I could add this resource. (☉д⊙)

Through a hour searching, there is a way to create a static app service in Azure is to use Azure CLI.

The Azure CLI is available to install in Windows, maxOS and Linux environments. It can also be run in a Docker container and Azure Cloud Shell. You can follow this official document to install or update Azure CLI.

Create Resource in Azure

You should be careful that your Azure CLI version is up-to-date with 2.1.0. I have used older version of 2.0.x and it would cause some problem when I create a html web app via Azure CLI.

All requirement was be equipped, go to the roots of project which you want to deploy and use the command as blow to create a static web app service.

> az webapp up -n <AppServiceName> -g <ResourceGroupName> -l southeastasia --html

This command would help you to deploy your static web project to cloud. If you ignore resource group here, it would auto generate a resource group for you. Or you can also use cli to create one before launching the web app.

> az group create -n <ResourceGroupName> -l southeastasia

After job finished, you can go to check the resource from Azure portal. Here is your static web app service.

Re-Deploy Your Project

Next, When I edit my project and need to re-deploy to my web app service. Without using Azure CLI, you can utilize Visual Studio Code to re-deploy static website to existing web app service on Azure.

Before publishing project to cloud, you should install Azure App Service extension from VS code marketplace.

Azure icon would be shown on navigation bar at left after you install and login azure account. This tool can help you to manage App Service on Azure such as restart, stop, delete or edit application settings, what’s more, managing related slots of App Service.

And then, you only need to right click the resource you want to deploy and choose Deploy to Web App.

During deployment process, you can see the detail log message from output window.

After receiving message Deployment to “AppSerivceName” completed. which means you have published your project successfully. Check the website, here you are.

The sample code I used is from Microsoft. You can find the code from the official website.

--

--