In this lab, you will learn to provision and manage resources in Azure with the new Azure Resource Manager. Then we will deploy our sample application into newly created infrastructure.
In this hands-on lab, you will learn how to:
- Author Azure Resource Manager templates.
- Deploy ARM Templates to Azure.
- Integrate environments into VSTS Release pipelines.
- Deploy City Power & Light to new Web App.
- You should have completed the previous Continuous Integration HOL.
This hands-on-lab has the following exercises:
- Exercise 1: Create an ARM Template in Visual Studio Code
- Exercise 2: Deploy ARM Template to Azure via the XPlat CLI
- Exercise 3: Integrate new Web App into VSTS
- Exercise 4: Deploy City Power & Light to new Web App
You can use any editor you like to create Azure resource group templates, but both Visual Studio and Visual Studio Code have convenient mechanisms for this process. In this example, we are going to use Visual Studio Code, and we are going to leverage the Azure Resource Manager Tools extension.
-
Install the ARM Tools extension in Visual Studio Code by using the Command Palette. With VSCode open, press
CTRL
+P
and enterext install azurerm-vscode-tools
.This extension gives intellisense and schema support for ARM Templates.
-
Next, let's install a pack of code snippets to make creating resources easier. In VS Code, you can open the JSON snippets file by either navigating to
File
->Preferences
->User Snippets
->JSON
, or by selectingF1
and typingpreferences
until you can selectPreferences: Snippets
.From the options, select
JSON
:The json file that opens can be extended to hold custom snippets.
From the azure-xplat-arm-tooling repo, open the raw snippets file and copy the entire contents to your clipboard.
Then, paste the contents into VSCode in between the
{}
of the json file, replacing the existing comment.Save and close the file. You will now be able to use snippets in the creation of ARM files.
-
Now that we have our tooling setup, open
start
->azuredeploy.json
in this HOL's folder. This is a skeleton ARM Template, including the four sectionsparameters
,variables
,resources
, andoutputs
. Click into the brackets next toresources
and create a linebreak. In the new line, typearm-p
and hit enter to selectarm-plan
. This will create a new App Service Plan, which controls the features and performance of associated Azure Web Apps.Tap the right arrow key, then hit backspace to remove the
1
from the resource nameAppServicePlan1
.Next to our resource's ending
}
add a,
and a line break. Then repeat the process above to create a Web App by typingarm-w
and selectingarm-webapp
.This web app name needs to be globally unique, as it will be used for the https://[...].azurewebsites.net DNS entry and cannot be the same as an existing webapp. Use
javaapptest
plus 4-5 random characters.The webapp resource has stubbed in 3 instances of
APP_SERVICE_PLAN_NAME
. Replace this value with theAppServicePlan
name value that you gave the App Service Plan earlier when you were removing the1
from the resource name. -
The web application needs to be configured to work with the AzureAD, Azure Storage, Azure Redis Cache, and ASP.NET WebAPI that we configured earlier.
In earlier exercises we have configured these settings as environment variables on our local machines, and in the Azure Portal for our "Dev" Azure Web App.
ARM Templates can include
resources
, which define numerous options for a given resource. For a web app, we can useappsettings
to adjust the environment variables present on our app. Here is an extended web app with theresources
array filled in.Paste the
resources
content into the ARM Web App resource within your ARM Template. Update thedependsOn
attribute to match your website'sname
, and the environment variables to match your values.If you are using VSCode and have been debugging locally with
.vscode/launch.json
then you can copy/paste the values into the template to override the sample values below:{ "apiVersion": "2015-08-01", "name": "javaapptest0298374", "type": "Microsoft.Web/sites", "location": "[resourceGroup().location]", "tags": { "[concat('hidden-related:', resourceGroup().id, '/providers/Microsoft.Web/serverfarms/AppServicePlan')]": "Resource", "displayName": "javaapptest0298374" }, "dependsOn": [ "Microsoft.Web/serverfarms/AppServicePlan" ], "properties": { "name": "javaapptest0298374", "serverFarmId": "[resourceId('Microsoft.Web/serverfarms/', 'AppServicePlan')]" }, "resources": [ { "apiVersion": "2015-08-01", "name": "web", "type": "config", "dependsOn": [ "[concat('Microsoft.Web/sites/', 'javaapptest0298374')]" ], "properties": { "javaVersion": "1.8", "javaContainer": "TOMCAT", "javaContainerVersion": "8.0" } }, { "name": "appsettings", "type": "config", "apiVersion": "2015-08-01", "dependsOn": [ "[concat('Microsoft.Web/sites/', 'javaapptest0298374')]" ], "tags": { "displayName": "AppSettings" }, "properties": { "WEBSITE_NODE_DEFAULT_VERSION": "6.7.0", "AZURE_STORAGE_ACCOUNT": "incidentblobstg32csxy6h3", "AZURE_STORAGE_ACCESS_KEY": "JUv0Ii0ZH59z/VuloHVVf0jIwU+g2bfVb76dg0XQo+m0ne+PL8S7eFcZdNqkUbBj4EmQrAW673bhhXdDUfiNRQ==", "AZURE_STORAGE_BLOB_CONTAINER": "images", "AZURE_STORAGE_QUEUE": "thumbnails", "INCIDENT_API_URL": "http://incidentapi32csxy6h3sbku.azurewebsites.net/", "REDISCACHE_HOSTNAME": "incidentcache32csxy6h3sbku.redis.cache.windows.net", "REDISCACHE_PORT": "6379", "REDISCACHE_SSLPORT": "6380", "REDISCACHE_PRIMARY_KEY": "ofiGLn8mowbVJ9/egFQ2+opdel4FQw7yWMFhxZclfPo=", "AAD_CLIENT_ID": "31959d66-08a7-49b1-8f03-7e64d55045f5", "AAD_CLIENT_SECRET": "oxE2XRnjyBkuz24saKuqN22", "AAD_RETURN_URL": "[concat('https://', reference('javaapptest0298374', '2015-08-01').defaultHostName, '/auth/openid/return')]" } } ] }
For the
AAD_RETURN_URL
we are dynamically resolving the value by using areference()
lookup for a given app name. Ensure that you replacejavaapptest0298374
with whatever name you choose for your web app.Your template should now look like this:
We are now ready to deploy our ARM Template containing an App Service Plan, and a Web App with environment variables to Azure.
For deploying the ARM Template we will use the Azure Xplat CLI. Please Ensure you have installed the Azure XPlat CLI package from NPM before proceeding.
-
From the command line,
cd
to thestart
directory containing our ARM Template:azure login
Follow the on-screen instructions to log in via your browser.
azure group create -n DevCampTest -l "West US" azure group deployment create -f .\azuredeploy.json -g DevCampTest
Feel free to swap out "West US" with another region.
-
Open the Azure Portal and verify that the app has been created in your resource group with the defined resources.
Also check the
Application Settings
blade to verify that the environment variables were created as expected: -
To use authentication with this new web app, we need to update our AzureAD app registration to whitelist its URL. In the browser, navigate to the Application Registration Portal and select your application. Under the
Platforms
heading, selectAdd Url
and paste in the URL of your newly created Azure Web App plus the/auth/openid/return
suffix. Also, since two of our applications share the same*.azurewebsites.net
domain we need to add an entry forhttps://azurewebsites.net
into the list. ClickSave
.See here for more information about redirect URIs.
The resource group is now holding our "Test" environment web app and has been added to our app registration.
-
In VSTS, open the Release Definition that we started in a previous lab. You should be be able to find this by navigating to
Releases
in theBuild & Release
menu on the top navigation. We need to create a second environment to serve as our test web app. -
Click the drop-down arrow next to the existing Release Definition, and select
Edit
: -
In the Release Definition, first select
Environment 1
, then selectAdd
and selectClone environment
. We will use our existing Dev web app configuration as the template for the new test web app configuration. -
Rename the environment from Copy of... to Test by clicking on it's title.
-
VSTS allows us to control and govern how releases happen between environments. Instead of automatically deploying our test environment after our dev environment, let's add an approval step. A user can look at the dev environment, confirm it is is ready, and then authorize a release to the test environment. Click the
Pre-deployment conditions
icon on the left side of the test environment, select theAfter environment
trigger and the first environment:For the
Pre-deployment approvers
option, selectSpecific users
and enter your account name. Then click theSave
button: -
Switch to the
Tasks
blade. Update theApp service name
to match the web app that you just deployed via the ARM Template. The task now targets the test environment web app, rather than the dev environment web app. -
Save your Release Definition to finish adding the additional environment.
With the updated Release Definition, we can now execute a release.
-
Click on the
Release
button and in the drop-down chooseCreate Release
. -
Select a Build to release into the environments. This is likely the largest numbered Build. Then click the
Create
button. -
Click the Release number to navigate to the Release Details screen:
-
On the top toolbar, select
Logs
to monitor the release process. When the release for the dev environment finishes, you will be prompted to approve the release to the test environment. ClickApprove
to continue the release. -
Once the test environment app has finished its release, open the app in the browser and login.
We have now created a new "test" environment web app and app service plan via an ARM Template, and integrated the new environment into our VSTS Release Definition.
In this hands-on lab, you learned how to:
- Create an ARM Template in Visual Studio Code.
- Deploy ARM Template to Azure via the XPlat CLI.
- Integrate new Web App into VSTS.
- Deploy City Power & Light to new Web App.
After completing this module, you can continue on to Module 6: Monitoring with Application Insights.
View Module 6 instructions for Java.
Copyright 2016 Microsoft Corporation. All rights reserved. Except where otherwise noted, these materials are licensed under the terms of the MIT License. You may use them according to the license as is most appropriate for your project. The terms of this license can be found at https://opensource.org/licenses/MIT.