In this requirement. We are using CI / CD from the GitHub repository and Deploying Next Js Static pages which are using “Strapi – Open source Node.js Headless CMS” from an Azure App Service. We are not using staging slots in this to keep the UAT and Prod completely independent
Good to know – CI/CD are Continuous Integration, Continuous Delivery, and Continuous Deployment
Pipelines are integrated with GitHub Repo for CI / CD and are deployed to UAT (Azure Static Web App ) where they can be tested, if it gets approved (Approval Gates) after testing it will be deployed to Production. Otherwise, the change can be rejected.
Ran the node js locally using [ npm run dev / npm run build ] which went through successfully.
Linking a similar article for CI / CD is done for Azure App Service using Azure DevOps
Azure DevOps Pipelines for App Service with GitHub – Azure365Pro.com
As you see below we are using a Git hub source repository. First Deploys to a Standard UAT Azure Static Web App if changes are approved by an approver, It’s deployed to a Production Azure Static Web App.
Please note: Azure DevOps integration using Deployment tokens currently supports only on the Standard version of Azure static Web Apps and not in the free version of Azure Static Web Apps.
Now you can see the releases happening on UAT and Production environments without any manual steps. Let’s see how to implement the same.
Create New Release Pipeline
Utilizing GitHub Repo Source Type
To Keep the Git hub repo more secure – We will use Personal Tokens in this Scenario as the account hold many repos belonging to different projects. (Most of them can skip this step – It’s only for companies who want to host many repositories from different customers)
Use the personal token generated from Github Fine-Grained Tokens – Which has access to the specific Repo.
Provide All Repository Permissions
Create a Stage using ubuntu-latest
Create another task – Static Web App – Deploy Azure Static Web App, which is currently in preview.
App Location set to “/”
Now Get the deployment token from the Azure Static Web App
Enter the variable value to be set on the Azure Static Web Apps API token
Create variables for UAT and Prod to use at different stages
Name – Variable Name
Value – Deployment Token Value
and press the lock button to save it as a secret
Now if you deploy it. It generates its yml and deploys it to the appropriate static web app using the deployment token
Deploys to UAT
Deploys to Prod
If you see the stages – UAT and Prod succeeded.
Enabled Continous Deployment Trigger in this specific scenario. On Each commit/push to the repo it Auto Deploys to UAT.
