Releasing an Angular 5 App in VSTS: Part 2
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.
Creating a Release
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”.
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.
6. On the pipeline under the “Development” environment name, click on the hyperlink that says “1 phase, 0 task.”
Set up Microsoft Azure
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.
Finishing the Release
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”.
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.
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!