Deploying an Azure Static Web App from Gitlab

So you are trying to deploy an Azure Static Web App, but you do not use the Microsoft deployment tooling (Azure DevOps or Gitlab), and you don’t want to use the Azure CLI for everything?

Well, I have the solution for you!

You can deploy the static web app from Gitlab without too much difficulty.

First thing you have to do is log in to the Azure Portal and create the Static Web App to deploy to. Once created, while looking at the resource, there is a button across the top of the Overview page that says Manage deployment token. Clicking this button will open a blade on the right-hand side with the token. Copy that token.

Then, navigate over to Gitlab to start the configuration. Under Settings > CI/CD select the Add Variable button. Here, you will create a new variable with a key of DEPLOYMENT_TOKEN and a value of the deployment token copied from the Azure Portal.

Finally, we go into .gitlab-ci.yml, note the folder of the build location, if that is not yet configured, pick a logical location for the application to be placed once built. The first addition to the build configuration will be to add some variable mappings:

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN       # Our Azure Static Web App deployment token
  APP_PATH: '$CI_PROJECT_DIR/public' # The path to the built website to be deployed
  SKIP_APP_BUILD : true              # Depending on your preferences, you may want this to be set to false. This will tell the deployment container whether or not to build the application.

Now we add the deployment step. This is pretty easy, it is just referencing a Gitlab container.

deploy:
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy 
  script:
    - echo "App deployed successfully."

That is everything to deploy to Azure Static Web Apps. Interested in understanding the build/deploy container? Here is the Gitlab Repo with more information. Effectively, it is just a little wrapper around the Microsoft Static App container: mcr.microsoft.com/appsvc/staticappsclient. In a future post, I will have notes on configuring Terraform to manage the Azure resources.