This article is the second of a two-part series. In my previous article, we created a build for our Angular app and configured it to have multiple environments that each point at a different API. Now, we are going to expand on that and create a release pipeline that deploys the app to Microsoft Azure. We will also work with deployment slots in Azure to hold our dev and test environments. Azure was chosen because of its easy integration with Visual Studio Team Services (VSTS), and VSTS is used because of its ability to serve as a central point for code and builds/releases.
1. Under the “Build and release” tab, click on “Releases” and then if you click on the “+” in the upper left 00000 of the screen, you can click on “Create a release pipeline”.
2. Again, you will be prompted to use a premade template or start with an empty process. We are going to use an empty template for this next part.
3. Next, we want to add an artifact to trigger the release. Click on “Add an artifact”, then select “Build”, and then choose the correct build to be the source.
4. Next, click on the lightning bolt and on the sidebar that pops up, under “Continuous deployment trigger,” click the slider to enable continuous deployment every time a new build occurs.
5. Click on “Environment 1” and on the sidebar change the environment name to “Development.”
6. On the pipeline under the “Development” environment name, click on the hyperlink that says “1 phase, 0 task.”
7. Now we need to add one task that deploys our app to Azure. To do so, click on the “+” on the right-hand side of the “Agent phase” bar. Select “Azure App Service Deploy.”
8. Here we need to take a quick sidetrip and create our Azure Web App. To do so, open a new tab and sign into the Azure portal, click “+ Create a resource” and then select “Web App” from the “Popular” group.
9. Next, select a name for your app, select your account that has your subscription under the “subscription” label, create and name a new resource group for your app, select Windows for your OS, and click “Create.” Note: it will take a few seconds to a couple of minutes for your app to be created and deployed.
10. Under “Home/App Services”, click on your app’s App Service plan. Select “Deployment slots” under the “Deployment” tab category label.
11. Click on “Add slot” and name it “Dev.” Choose “Don’t clone configuration from an existing slot” for the “Configuration Source.” Repeat this step to create a new slot and name it “Test.”
12. Back on the “Overview” tab for your Azure app, it is important to note the URL where you can find your deployed app online. To access the dev and test environments, add “-dev” or “-test” before the “.azureresources.net” part of your app’s url.
13. Now, let’s navigate back to the tab that has VSTS running in it. Click on the “Azure App Service Deploy” task that is under the “Agent phase.” On the sidebar, choose your Azure subscription from the dropdown, then the name of your App Service, the Resource group for your app, then check “Deploy to slot,” and choose “dev”.
14. Back in the pipeline, click on the “+ Add” button next to the word “Environments.” Then click “Clone environment” and repeat this step one more time to create a total of three environments.
15. Rename the first cloned environment to “Test” and change the slot to deploy to in the “Azure App Service Deploy” to the test slot in Azure.
16. Back in the pipeline, repeat step 10 on the last cloned environment except name it “Production” and deselect the “Deploy to slot” checkbox under the “Azure App Service Deploy” task.
17. In each of the three environments, in the “Deploy Azure App Service” step, there is a box that asks for the “Package or folder.” This is where the release looks to get the artifact that the build created and push it to the cloud. Each of the environments should point to a different drop. Dev should take in the “devDrop”, test should take in the “testDrop” and prod should take in the “prodDrop.”
18. Congratulations! You have now finished creating your own release pipeline! You can customize Pre-Deployment conditions by clicking on the button below. All you have to do now is save the release and click on “+ Release” in the top right-hand corner of the window to manually kick off the release!
