Deploying to Azure App Service

Introduction

This guide explains how to use GitHub Actions to build, test, and deploy an application to Azure App Service.

Azure App Service can run web apps in several languages, but this guide demonstrates deploying an existing Node.js project.

Prerequisites

Before creating your GitHub Actions workflow, you will first need to complete the following setup steps:

1. Create an Azure App Service plan.

   For example, you can use the Azure CLI to create a new App Service plan:

   Shell

   az appservice plan create \
       --resource-group MY_RESOURCE_GROUP \
       --name MY_APP_SERVICE_PLAN \
       --is-linux

   In the command above, replace MY_RESOURCE_GROUP with your pre-existing Azure Resource Group, and MY_APP_SERVICE_PLAN with a new name for the App Service plan.

   See the Azure documentation for more information on using the Azure CLI:

   • For authentication, see "Sign in with Azure CLI".
   • If you need to create a new resource group, see "az group."

2. Create a web app.

   For example, you can use the Azure CLI to create an Azure App Service web app with a node runtime:

   Shell

   az webapp create \
       --name MY_WEBAPP_NAME \
       --plan MY_APP_SERVICE_PLAN \
       --resource-group MY_RESOURCE_GROUP \
       --runtime "node|10.14"

   In the command above, replace the parameters with your own values, where MY_WEBAPP_NAME is a new name for the web app.

3. Configure an Azure publish profile and create an AZURE_WEBAPP_PUBLISH_PROFILE secret.

   Generate your Azure deployment credentials using a publish profile. For more information, see "Generate deployment credentials" in the Azure documentation.

   In your GitHub repository, create a secret named AZURE_WEBAPP_PUBLISH_PROFILE that contains the contents of the publish profile. For more information on creating secrets, see "Encrypted secrets."

4. For Linux apps, add an app setting called WEBSITE_WEBDEPLOY_USE_SCM and set it to true in your app. For more information, see "Configure apps in the portal" in the Azure documentation.

Creating the workflow

Once you've completed the prerequisites, you can proceed with creating the workflow.

The following example workflow demonstrates how to build, test, and deploy the Node.js project to Azure App Service when there is a push to the main branch.

Ensure that you set AZURE_WEBAPP_NAME in the workflow env key to the name of the web app you created. You can also change AZURE_WEBAPP_PACKAGE_PATH if the path to your project is not the repository root and NODE_VERSION if you want to use a node version other than 10.x.

If you configured a deployment environment, change the value of environment to be the name of your environment. If you did not configure an environment, delete the environment key.

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: MY_WEBAPP_NAME   # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '10.x'                # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    environment: production

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: npm install, build, and test
        run: |
          # Build and test the project, then
          # deploy to Azure Web App.
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: 'Deploy to Azure WebApp'
        uses: azure/webapps-deploy@0b651ed7546ecfc75024011f76944cb9b381ef1e
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

Additional resources

The following resources may also be useful:

• For the original starter workflow, see azure.yml in the GitHub Actions starter-workflows repository.
• The action used to deploy the web app is the official Azure Azure/webapps-deploy action.
• For more examples of GitHub Action workflows that deploy to Azure, see the actions-workflow-samples repository.
• The "Create a Node.js web app in Azure" quickstart in the Azure web app documentation demonstrates using VS Code with the Azure App Service extension.