Use GitHub Actions workflow to deploy your static website in Azure Storage

Article
10/22/2023

Get started with GitHub Actions by using a workflow to deploy a static site to an Azure storage account. Once you have set up a GitHub Actions workflow, you will be able to automatically deploy your site to Azure from GitHub when you make changes to your site's code.

Note

If you are using Azure Static Web Apps, then you do not need to manually set up a GitHub Actions workflow. Azure Static Web Apps automatically creates a GitHub Actions workflow for you.

Prerequisites

An Azure subscription and GitHub account.

An Azure account with an active subscription. Create an account for free.
A GitHub repository with your static website code. If you do not have a GitHub account, sign up for free.
A working static website hosted in Azure Storage. Learn how to host a static website in Azure Storage. To follow this example, you should also deploy Azure CDN.

Note

It's common to use a content delivery network (CDN) to reduce latency to your users around the globe and to reduce the number of transactions to your storage account. Deploying static content to a cloud-based storage service can reduce the need for potentially expensive compute instance. For more information, see Static Content Hosting pattern.

Create a service principal with the az ad sp create-for-rbac command in the Azure CLI. Run this command with Azure Cloud Shell in the Azure portal or by selecting the Try it button.

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

The parameter --json-auth is available in Azure CLI versions >= 2.51.0. Versions prior to this use --sdk-auth with a deprecation warning.

In the example above, replace the placeholders with your subscription ID, resource group name, and app name. The output is a JSON object with the role assignment credentials that provide access to your App Service app similar to below. Copy this JSON object for later.

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

OpenID Connect is an authentication method that uses short-lived tokens. Setting up OpenID Connect with GitHub Actions is more complex process that offers hardened security.

If you do not have an existing application, register a new Microsoft Entra application and service principal that can access resources.
```
az ad app create --display-name myApp
```
This command will output JSON with an appId that is your client-id. The objectId is APPLICATION-OBJECT-ID and it will be used for creating federated credentials with Graph API calls. Save the value to use as the AZURE_CLIENT_ID GitHub secret later.
Create a service principal. Replace the $appID with the appId from your JSON output. This command generates JSON output with a different objectId will be used in the next step. The new objectId is the assignee-object-id.

This command generates JSON output with a different objectId and will be used in the next step. The new objectId is the assignee-object-id.

Copy the appOwnerTenantId to use as a GitHub secret for AZURE_TENANT_ID later.
```
 az ad sp create --id $appId
```
Create a new role assignment by subscription and object. By default, the role assignment will be tied to your default subscription. Replace $subscriptionId with your subscription ID, $resourceGroupName with your resource group name, and $assigneeObjectId with generated assignee-object-id (the newly created service principal object id).
```
az role assignment create --role contributor --subscription $subscriptionId --assignee-object-id  $assigneeObjectId --assignee-principal-type ServicePrincipal --scope /subscriptions/$subscriptionId/resourceGroups/$resourceGroupName
```
Run the following command to create a new federated identity credential for your Microsoft Entra application.
- Replace APPLICATION-OBJECT-ID with the objectId (generated while creating app) for your Microsoft Entra application.
- Set a value for CREDENTIAL-NAME to reference later.
- Set the subject. The value of this is defined by GitHub depending on your workflow:
  - Jobs in your GitHub Actions environment: repo:< Organization/Repository >:environment:< Name >
  - For Jobs not tied to an environment, include the ref path for branch/tag based on the ref path used for triggering the workflow: repo:< Organization/Repository >:ref:< ref path>. For example, repo:n-username/ node_express:ref:refs/heads/my-branch or repo:n-username/ node_express:ref:refs/tags/my-tag.
  - For workflows triggered by a pull request event: repo:< Organization/Repository >:pull_request.
```
az ad app federated-credential create --id <APPLICATION-OBJECT-ID> --parameters credential.json
("credential.json" contains the following content)
{
    "name": "<CREDENTIAL-NAME>",
    "issuer": "https://token.actions.githubusercontent.com",
    "subject": "repo:octo-org/octo-repo:environment:Production",
    "description": "Testing",
    "audiences": [
        "api://AzureADTokenExchange"
    ]
}
```

Configure GitHub secrets

Service principal
OpenID Connect

In GitHub, go to your repository.
Go to Settings in the navigation menu.
Select Security > Secrets and variables > Actions.
Select New repository secret.
Paste the entire JSON output from the Azure CLI command into the secret's value field. Give the secret the name AZURE_CREDENTIALS.
Select Add secret.

You need to provide your application's Client ID, Tenant ID, and Subscription ID to the login action. These values can either be provided directly in the workflow or can be stored in GitHub secrets and referenced in your workflow. Saving the values as GitHub secrets is the more secure option.

In GitHub, go to your repository.
Select Security > Secrets and variables > Actions.
Select New repository secret.
Create secrets for AZURE_CLIENT_ID, AZURE_TENANT_ID, and AZURE_SUBSCRIPTION_ID. Use these values from your Microsoft Entra application for your GitHub secrets:

GitHub secret Microsoft Entra application

AZURE_CLIENT_ID Application (client) ID

AZURE_TENANT_ID Directory (tenant) ID

AZURE_SUBSCRIPTION_ID Subscription ID
Save each secret by selecting Add secret.

GitHub secret	Microsoft Entra application
AZURE_CLIENT_ID	Application (client) ID
AZURE_TENANT_ID	Directory (tenant) ID
AZURE_SUBSCRIPTION_ID	Subscription ID

Add your workflow

Service principal
OpenID Connect

Go to Actions for your GitHub repository.
Select Set up your workflow yourself.
Delete everything after the on: section of your workflow file. For example, your remaining workflow may look like this.
```
name: CI

on:
    push:
        branches: [ main ]
```

Rename your workflow Blob storage website CI and add the checkout and login actions. These actions will check out your site code and authenticate with Azure using the AZURE_CREDENTIALS GitHub secret you created earlier.

name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

Use the Azure CLI action to upload your code to blob storage and to purge your CDN endpoint. For az storage blob upload-batch, replace the placeholder with your storage account name. The script will upload to the $web container. For az cdn endpoint purge, replace the placeholders with your CDN profile name, CDN endpoint name, and resource group. To speed up your CDN purge, you can add the --no-wait option to az cdn endpoint purge. To enhance security, you can also add the --account-key option with your storage account key.
```
    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
```

Complete your workflow by adding an action to logout of Azure. Here is the completed workflow. The file will appear in the .github/workflows folder of your repository.

name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

Go to Actions for your GitHub repository.
Select Set up your workflow yourself.
Delete everything after the on: section of your workflow file. For example, your remaining workflow may look like this.
```
name: CI with OpenID Connect

on:
    push:
        branches: [ main ]
```

Add a permissions section.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

Add checkout and login actions. These actions will check out your site code and authenticate with Azure using the GitHub secrets you created earlier.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

Use the Azure CLI action to upload your code to blob storage and to purge your CDN endpoint. For az storage blob upload-batch, replace the placeholder with your storage account name. The script will upload to the $web container. For az cdn endpoint purge, replace the placeholders with your CDN profile name, CDN endpoint name, and resource group. To speed up your CDN purge, you can add the --no-wait option to az cdn endpoint purge. To enhance security, you can also add the --account-key option with your storage account key.
```
    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
```

Complete your workflow by adding an action to logout of Azure. Here is the completed workflow. The file will appear in the .github/workflows folder of your repository.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

Review your deployment

Go to Actions for your GitHub repository.
Open the first result to see detailed logs of your workflow's run.

Clean up resources

When your static website and GitHub repository are no longer needed, clean up the resources you deployed by deleting the resource group and your GitHub repository.

Next steps

Learn about Azure Static Web Apps

Share via