Multi-environment deployments with Azure DevOps and Static Web Apps

hey everyone azure static web apps recently released a bunch of features that are useful for deploying your app with azure devops today we'll walk through how to create a pipeline that builds your app and deploys it to multiple environments in static web apps we'll also look at how to require approvals before deploying to an environment run automated end-to-end tests using the playwright framework and secure your staging environments with a password here i have a dotnet app in my azure devops repository in the client folder i have a blazer webassembly front end in the api folder i have a dot net 6 azure functions api and in the playwright tests folder i have some end-to-end tests that use the playwright framework to validate that my app is working as expected to deploy this app to azure static web apps i'll go to the azure portal and create a static web app i'll create a resource group and provide a name since i'm building a production app i'm going to choose the standard plan but most of the things we'll see today also work with the free plan azure static web apps globally distributes my app's static content i still have to select a region here where my azure functions api and staging environments will be deployed my app is in azure devops so i'll select that and i'll look for my devops project and select the branch i want to use finally i'll select a build preset this is a blazer app it all looks good and i'll go ahead and create the app and it only takes a few seconds for the app to be created and if i go back to my azure devops repo and refresh i'll see there's a new pipeline that was added the pipeline has a single task it's the azure static web apps task that automatically builds and deploys your app if i open my new pipeline i can see a build that's running it took a few minutes to build and deploy my app now back in the azure portal i can click on my app's url and see that it's working if i click on fetch data it's calling the azure functions api and getting back some random weather data the pipeline that was generated by azure static web apps has a single stage for many apps this works great but sometimes we want to build a more robust pipeline that deploys to multiple environments and maybe we want to run automated tests or require approvals before deploying we can do that by adding environments in azure devops and then modifying the pipeline file the first thing i'll do is go to my pipelines environments and create one called staging then i'll create one called production for the production environment i'll require an approval from me before deploying i've cloned my repo down to my machine and open it with vs code here's my pipeline file again i'll replace the single stage pipeline with the much fancier one that has multiple stages i have three stages in this new pipeline the first one is called build it installs the dotnet sdk then it builds the blazer front end the azure functions api and the playwright test project it publishes those as artifacts that will be consumed by the remaining stages the key here is i'm building the app once and i'm deploying the same artifacts to all my environments this way i'm sure that my app that i tested in staging is the same one that i'm deploying to production the next stage is deploy the staging i added an environment property that references the staging environment that i just created in azure devops this job first downloads the artifacts from the build stage then it uses the azure static web apps task to deploy them to the staging environment i'm setting both the skip app build and skip api build flags to true so it deploys what was built in the first stage without building it again if i use skip api build azure static web apps doesn't know what runtime my api uses so i'll tell it by modifying my app's configuration file to point to the correct runtime this file is in the frontend apps triple w root folder azure static web apps recently added the ability to deploy to named environments named environments are great for previewing changes to your app in different stages of your pipeline here in the pipeline file i'm calling this environment staging to match the environment i created in azure devops if i don't specify it the task will deploy the app to production after my app is deployed to the staging environment i want to run my automated playwright test on it playwright is an end-to-end test framework that uses a variety of browsers to test our app it saves us from manually testing our app every time we make a change to run the tests in the azure devops agent i first need to install.net then i'll use these commands here to install the necessary browsers and dependencies then i'll use the.net test command to run the tests we'll look at what the tests look like later on in the video the last stage is deployed to production it looks just like the staging stage i'm referencing the production environment that i just created this will cause the pipeline to wait for my approval before running this job i didn't set the deployment environment property in the azure static web apps task so it's going to deploy to production now i'm going to save the pipeline then i'll commit it to git and push it in azure devops i can see that the pipeline is running and it now has three stages after a couple of minutes the first stage is done when the pipeline uses the azure devops environments for the first time it will ask me for permission i only have to permit it once and i won't be asked again this is different than the manual approval i added for the production environment while the app is deploying the staging let's look at the artifacts that were created by the build stage and now the second stage is done before we move on to the production stage i'll open up the azure portal and see that a staging environment has been created in my static web app if i click on it i can see that it's deployed to a staging url i can use it to preview my changes and the playwright tests are going to be run against this environment as well here are my tests back in vs code it references a variable that contains my app's url this is set by the azure static web apps task after it finishes deploying to an environment when the tests run in the pipeline it's going to use this variable to figure out which environment to call and in this case it's going to talk to the staging environment to validate that it is working as expected here are a couple of tests the first is a simple one that checks that the home page works the next one clicks through the app to ensure that the weather data is being retrieved from the api and displayed on the page back in my pipeline run i can click on the tests and see a report everything passed just like my staging environment i also have to permit the pipeline to use the production environment and again i only have to do this once then i see a different approval this is the one that i defined for my production environment i'll need to manually approve it every time before the production stage will run and a couple more minutes later the third stage is done as well and my app is fully deployed if i refresh the environments page i can see the deployment status here as well before we wrap up the video i want to show you one more thing if i go to my staging site i can see that it's actually open to the public most of the time i want to restrict access to my staging sites to only my team azure static web apps recently added the ability to protect my app with a password i can enable it in the configuration page in the portal i'll select protect staging environments only then i'll set a password and confirm it and then click save now if i refresh the staging site it asks for a password i'll enter it and the site loads but what about the playwright tests are they now broken because i've added a password to my site taking a look at the tests again in vs code you can see i added some logic to log into the staging site it gets the password from a variable named login password so let's set that up in my pipeline i can add an environment variable i'll name it login password i'll make it a secret and then i'll fill in the correct value because it's a secret i'll also need to explicitly pass it to my playwright tests i'll also make a small change to my app then i'll commit the changes and push them my pipeline is now going to run again it took a few minutes to build the app deployed the staging and run the tests now it's asking for my approval i'll take a look at the staging site and to do that i need to log in to see it i can see the change i made is here and it all looks great i'm going to go ahead and approve the pipeline and it will deploy to production and it's done so to recap we saw how to create a multi-stage pipeline in azure devops to deploy to different azure static web apps environments we also set up approvals we ran tests and we secured our staging environments now go ahead and try this yourself and thanks so much for watching

Channel: Anthony Chu

Views: 14,654

Keywords:

Id: 4JkfeZp7aDk

Length: 10min 26sec (626 seconds)

Published: Thu May 05 2022