Deploying Azure Static Web Apps Manually

Azure Static Web Apps is a relatively new service that tries to streamline the process for building and deploying full stack web apps to Azure directly from a code repository. It effectively takes an opinionated view of how this type of development should be done and:

  • Creates a set of Azure resources (grouped into an Azure Static Web App) to host the code components

  • Creates/forces a set of CI/CD automation to support the deployment and promotion of code from a repository of your choice

I’ve been using Azure Static Web Apps to host a few marketing type websites. It has been relatively quick and easy to setup. The one annoying thing, however, is that you have to have a CI/CD pipeline setup to perform a deployment. While this is always the recommended way, sometimes you just want to do it manually. You’ll notice that there are no tools provide by Azure to do this, so I had to go hunting around to make it work.

Investigating the GitHub Action

My first stop proved promising as I went to go and have a look at the github action that was created to support this deployment. Turns out it uses a docker container, which means we can try and reproduce the steps locally. Here is a link to the repo

From here, you can effectively run the docker container and mount in your web artifacts using something like:

docker run -it -v app:/app mcr.microsoft.com/appsvc/staticappsclient:stable /bin/bash

The main program to facilitate a deployment is located in the /bin/staticsites folder.

At first I thought I had to set a bunch of environment variables to make this work (as per the custom GitHub actions documentation) but it turns out that you can use –help on the StaticSitesClient binary to manually enter in the required information.

Here is a sample of the options for the “upload” action:

Based on this, you can work out a command to deploy your relevant configuration. Keep in mind that you will need to specify your apiToken on the command line here.

Enjoy!

Previous
Previous

What is an Azure Landing Zone?

Next
Next

Azure Storage Encryption At Rest