Note
GitHub-hosted runners are not currently supported on GitHub Enterprise Server. You can see more information about planned future support on the GitHub public roadmap.
Introduction
This guide explains how to use GitHub Actions to build, test, and deploy a Node.js project to Azure App Service.
Note
If your GitHub Actions workflows need to access resources from a cloud provider that supports OpenID Connect (OIDC), you can configure your workflows to authenticate directly to the cloud provider. This will let you stop storing these credentials as long-lived secrets and provide other security benefits. For more information, see About security hardening with OpenID Connect and Configuring OpenID Connect in Azure.
Prerequisites
Before creating your GitHub Actions workflow, you will first need to complete the following setup steps:
-
Create an Azure App Service plan.
For example, you can use the Azure CLI to create a new App Service plan:
Bash az appservice plan create \ --resource-group MY_RESOURCE_GROUP \ --name MY_APP_SERVICE_PLAN \ --is-linux
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, andMY_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.
-
Create a web app.
For example, you can use the Azure CLI to create an Azure App Service web app with a Node.js runtime:
Bash az webapp create \ --name MY_WEBAPP_NAME \ --plan MY_APP_SERVICE_PLAN \ --resource-group MY_RESOURCE_GROUP \ --runtime "NODE|14-lts"
az webapp create \ --name MY_WEBAPP_NAME \ --plan MY_APP_SERVICE_PLAN \ --resource-group MY_RESOURCE_GROUP \ --runtime "NODE|14-lts"
In the command above, replace the parameters with your own values, where
MY_WEBAPP_NAME
is a new name for the web app. -
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 Using secrets in GitHub Actions. -
Optionally, configure a deployment environment. Environments are used to describe a general deployment target like
production
,staging
, ordevelopment
. When a GitHub Actions workflow deploys to an environment, the environment is displayed on the main page of the repository. You can use environments to require approval for a job to proceed, restrict which branches can trigger a workflow, gate deployments with custom deployment protection rules, or limit access to secrets. For more information about creating environments, see Managing environments for deployment.
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. If the path to your project is not the repository root, change AZURE_WEBAPP_PACKAGE_PATH
to your project path. If you use a version of Node.js other than 10.x
, change NODE_VERSION
to the version that you use.
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. # GitHub recommends pinning actions to a commit SHA. # To get a newer version, you will need to update the SHA. # You can also reference a tag or branch, but the action may change without warning. 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: '14.x' # set this to the node version to use jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} cache: 'npm' - name: npm install, build, and test run: | npm install npm run build --if-present npm run test --if-present - name: Upload artifact for deployment job uses: actions/upload-artifact@v3 with: name: node-app path: . deploy: runs-on: ubuntu-latest needs: build environment: name: 'production' url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} steps: - name: Download artifact from build job uses: actions/download-artifact@v3 with: name: node-app - name: 'Deploy to Azure WebApp' id: deploy-to-webapp uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c with: app-name: ${{ env.AZURE_WEBAPP_NAME }} publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
# 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.
# GitHub recommends pinning actions to a commit SHA.
# To get a newer version, you will need to update the SHA.
# You can also reference a tag or branch, but the action may change without warning.
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: '14.x' # set this to the node version to use
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
- name: Upload artifact for deployment job
uses: actions/upload-artifact@v3
with:
name: node-app
path: .
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: 'production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact@v3
with:
name: node-app
- name: 'Deploy to Azure WebApp'
id: deploy-to-webapp
uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c
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 workflow template, see
azure-webapps-node.yml
in the GitHub Actionsstarter-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 Visual Studio Code with the Azure App Service extension.