Azure Static Deployment with App Service

Tip

Last Updated: September 10, 2024

Website Deployment via App Service

In this guide, we will deploy a static website using Azure App Service. Azure App Service is a fully managed platform for building, deploying, and scaling web apps. It provides a rich set of features, including continuous deployment from GitHub, Bitbucket, and Azure DevOps, custom domains, SSL certificates, and scaling.

Steps to Deploy a Static Website on Azure App Service

There are a few preliminary steps to get things underway. The official Learn guide offers a number of options for an IDE to use for this project. For this guide, we will use Visual Studio Code.

Step 1: Install VS Code And Required Extensions

I’ll keep this section pretty loose as it is not the intended purpose of this guide. However, I will provide a brief overview of the steps to install Visual Studio Code and the required extensions.

1. Install Visual Studio Code from here.
2. You’ll need to install the Azure App Service extension. If you have any goals of working with Azure in VS Code in a greater capacity, it may be worthwhile to install the Azure Tools extension pack which includes 8 different Azure extensions.

Step 2: Create a Web App Resource in Azure

1. Open the Azure Portal and click on the Create a resource button.

2. A bunch of stuff will pop up here – look in the left-hand menu for Web and then select Web App.

3. You’ll be met with a set of fields to fill out. You’ll need to create a new resource group, give your web app a name, and select a region. You can leave the rest of the settings as default. Here is an example key:value pairing of what it might look like using my own information. Note that the app that I’m publishing is a Docusauraus site, so my runtime stack is Node XX LTS.:

   Subscription: Azure subscription 1
   Resource Group: Home-Lab-Education
   Instance Details:
       - Name: BG-Lab-Docs
       - Publish: Code
       - Runtime Stack: Node 14 LTS
       - Operating System: Linux
       - Region: Canada East
   Pricing Plans
       - Linux Plan (East US): (New) BG-Lab  # note that this is a new plan that I created
       - Pricing Plan: Free F1 (Shared infrastructure)

Note

Note that I am using the free tier which allows for 60 CPU minutes per day. This should be fine for my purpose as I intend only to show that the site is avaialbe via Azure App Service. I may include some details or a Call To Action on the site that links out to my primary site hosted via my current provider, but perhaps I’ll eventually opt to pay the fee to increase resources allocated to the site. At the time of writing, the cost for a Basic plan is 12.41 USD / Month. The Basic plan includes 1.75 GB of RAM and 1.00 CPU.

4. You may find that the region you select is not available for the pricing plan you’ve selected. If this is the case, you’ll need to select a different region or a different pricing plan. I had to switch mine from US East to Canada East. No worries as it’s basically exactly where I’m located.

5. Click the Review + Create button and then the Create button. You’ll see a Deployment in progress message. With some patience, you’ll soon see a review of the deployment and a Go to resource button. Click it. 6.Note that the provisioning / deployment process can take a while and you’ll probably see some loading elements - hang tight for a few minutes in this case and the properties should populate. 7 On the top right of the properties list, you’ll see a default domain consisting of some ludicrously long string of characters followed by .azurewebsites.net. This is the URL that you can use to access your site. You can also add a custom domain if you have one. We’ll cover that in a later section.

6. You’ve chosen the free tier, so hang tight again after clicking the domain as it takes a while to load.

Step 3: Deploy Your Site using GitHub

Note

1. Navigate in your Portal using the left-hand menu to the “App Services” blade. If it’s not populated you may need to select “all services”.
2. Locate your app service and click on it.
3. Another left-hand menu will appear. Look for the “Deployment Center” and click on it.
4. You’ll see a field with the name “Source”. Click the dropdown and select “GitHub”.
5. Clicking “GitHub” will populate a new set of fields and some info about your runtime stack. You’ll need to authenticate with GitHub. Click the “Authorize” button and follow the prompts to log in.
6. Select your Organization (usually your username), your Repository, and the Branch you want to deploy from (usually main). These are all required fields.
7. For the Authentication settings, select Authentication type: ‘User assigned identity’, and select your subscription. If you don’t yet have an identity created the default will be set to ‘(Create new)’.
8. Click “Save”.
9. You’ll see a “Loading deployment logs” message. This can take a few minutes. Once it’s done, you’ll see a “Deployment successful” message.

Caution