GitHub Actions:Azure Functions

Article
1/17/2024

This wiki article follows on from Deploying a static website to Azure Storage using GitHub Actions and illustrates deploying an Azure Function using GitHub Actions. The previous article provides backgrounds on GitHub Actions including a description of Workflows, Runners and Actions.

For complete workflows, please see the Azure On The Cheap GitHub repository. The repository source for TechNet Articles and Azure On The Cheap posts in Microsoft Tech Community Azure Developer Community blogs.

This article was written from the Static Website with Azure Functions branch.

Scenario

The requirement was to automate the deployment of a static website to Azure Storage Blob containers and corresponding Azure Functions. The scenario illustrated is of a static website that uses an Azure Function for dynamic content. The sample project uses the Azure Function response to supply data to a Datatables.net grid displayed on the landing page.

The Azure On The Cheap project is highlighting Azure Front Door and its capability of globally distributing traffic to regions closest to the user. This means we have several regions hosting the static website and the dynamic function.

GitHub Actions

Upload static website

The static content contains html and images and is uploaded to a container that has been exposed as a static website. This step is described in the previous wiki article with one exception. With the introduction of the Azure Function, we now need to specify the location of the Azure Function closest to the user. This was solved by including the Azure Function endpoint in a static javascript file. To handle this, an additional step was added to the YAML.

The website was designed to include the javascript file site.js located in the root directory:

For each regional deployment the file is replaced with a regional specific file using the az storage blob upload CLI command. In the YAML file this is shown below:

- name: Replace site.js file for region
      uses: Azure/cli@v1.0.0
      with:
        azcliversion: latest
        inlineScript: |          
          az storage blob upload -f $GITHUB_WORKSPACE/web/.js/siteSEA.js -c \$web -n site.js --account-name ${{ secrets.STORAGE_ACCOUNT_NAME }}

The upload command above will copy the siteSEA.js to the $web container with the name site.js. This file contains the URL of the corresponding Azure Function. The account name is used to determine the storage account name and in this context, the region. For example, the secret STORAGE_ACCOUNT_NAME is for the name of the storage account in the Southeast Asia region.

Deploy Azure Function

The second change that was required to the YAML was to deploy the Azure Function. The first step was to build the Azure Function using the dotnet build command executed in a bash shell:

- name: 'Run dotnet build'
      shell: bash
      run: |        
        pushd ./AzCheap.Functions
        dotnet build --configuration Release --output ./output
        popd

The important thing to note here is the package will be located in the output folder.

This was done using the GitHub Azure/functions-action action. This action simplifies the deployment of an Azure Function and supports the following:

Templates	Windows OS	Linux OS
DotNet	Supported	Supported
Node	Supported	Supported
PowerShell	Supported
Java	Supported	Supported
Python		Supported

For this scenario the action requires the Azure Function name and the package to be used.

- name: Azure Functions Central US
      uses: Azure/functions-action@v1.1.4
      with:
        app-name: ${{ secrets.FUNCTION_APP_NAME }}     
        package: ./AzCheap.Functions/output

The app-name in this example would be the Azure Function application name located in the Central US region.

Summary

This article provides an illustration of using GitHub actions to automate the deployment of a static website and Azure Function. The az strorage blob upload CLI command was used to replace a file in a given blob container. The building of a dotnet Azure function was shown using the dotnet build command. The function was then deployed using the Azure/function-action action.

windows-powershell-functionapp-on-azure.yml

Share via