In this lab we will manually deploy the PartsUnlimited sample application into Azure App Services using Visual Studio. The intention is to allow you become more familiar with the ParstUnlimited and deploying it into Azure App Services, before we get into specific devops taks that will be built around the PartsUnlimited application.

For full deployments, you can deploy the PartsUnlimited app to slots in Azure App Service as needed. The website is setup to keep the connection strings with the slots. This means that if staging and main website slots are switched, the main website will still use the production database, while the staging slot will keep pointing to the staging database.

DevOps MPP Course Source

Pre-requisites:

Lab Tasks:

  • Setup Local Visual Studio Environment
  • Create Azure App Service Infrastructure from Visual Studio uing ARM Templates
  • Publish the website to Azure App Service Production URL
  • Publish the website to Azure App Service dev and staging sites
  • Swap dev and staging site content

Estimated Lab Time:

  • approx. 40 minutes

Task 1: Setup Local Visual Studio Environment

Note: Before starting ensure you have successfully completed the lab task PartsUnlimited Setup wth Visual Studio and that all required components are installed and the PartsUnlimited application builds successfully. If components are not present or the PartsUnlimited sample does not build successfully you will receive errors in this lab task.

  1. Start Visual Studio 2017 as an administrator and open the PartsUnlimited.sln at the root of the directory

    PowerShell Tools for Visual Studio

  2. Go to Tools > Extensions and Updates and ensure the PowerShell Tools for Visual Studio 2017** are installed

    PowerShell Tools for Visual Studio

    • If it is not present, then click the Online - Visual Studio Marketplace section and search for PowerShell there and then install, as per screenshot below. A Green tick beside the extension indicates it is already installed. If it is not installed a Download button option will be present beside the extentsion.

      PowerShell Tools for Visual Studio

    • Restart Visual Studio to complete the installation
    • Re-open the Visual Studio project PartsUnlimited.sln
  3. Ensure the PartsUnlimited solution builds successfully by going to Build > Build Solution

    PowerShell Tools for Visual Studio

    PowerShell Tools for Visual Studio

Task 2: Create Azure App Service Infrastructure from Visual Studio uing ARM Templates

  1. In Solution Explorer right-click on the PartsUnlimitedEnv folder (the deployment project root) and choose Deploy -> New…

    PowerShell Tools for Visual Studio

  2. Click the drop down box to hoose subscription to deploy to and select add an account.. and enter your details if needed.

    PowerShell Tools for Visual Studio

    If the link to re-enter your credentials is present

    PowerShell Tools for Visual Studio

  3. Under Resource group: click the drop down arrow and choose <Create New…>

    PowerShell Tools for Visual Studio

  4. Enter the below details or similar for your own

    • Resource group name: puvs_rg < or whatever name you wish to use >
    • Resource group location: East US < or your nearest Aure Datacenter location >

    NOTE: It is important the names you use for all resource values adhere to Azure naming standards in terms of allowed characters and length etc If values not allowed are used, you will receive errors when you go to deploy to Azure.

    The names used here should not inlcude periods.

    PowerShell Tools for Visual Studio

  5. For Deployment template: choose fullenvironmentsetupmerged.json.

    PowerShell Tools for Visual Studio

    Note: If you wish to see more details about the other templates, see Appendix A at the end of this page.

  6. For Deployment parameters file: choose fullenvironmentsetupmerged.param.json and then click Edit Parameters…

    PowerShell Tools for Visual Studio

  7. In the Edit Parameters dialogue we will enter values for required parameters deeded during deployment.

    PowerShell Tools for Visual Studio

    • Pointers for choosing values

      • PartsUnlimitedHostingPlanSKU needs to be value that supports slots or else the deployment will fail. (The Free hosting plan has been removed as an availabl option form the template for full setup template. But still worth noting for other templates if you wished to try to deploy them.)
      • The SQL Server name (specified by PartsUnlimitedServerName) should be all lowercase.
      • The Storage Account names (specified by CdnStorageAccountName, CdnStorageAccountNameForDev and CdnStorageAccountNameForStaging) should be all lowercase and be 3 to 24 characters in length
      • The Storage Container names (specified by CdnStorageContainerName, CdnStorageContainerNameForDev and CdnStorageContainerNameForStaging) should be all lowercase and be 3 to 63 characters in length
      • In general, if you try to make all values unique, lowercase and between the resource character limits, i.e. if you stay under 24 characters you should be fine.
      • You should also not have an underscore or dash in the name, as during deployment some resources and object names are generated and will append names with other values with dashes and underscores, and as a result may give errors if used.

    You can use the below values as guidelines, but some values you use must be unique such as WebsiteName, if it is not, it will result in errors when you deploy.

    • WebsiteName = pufesmeu1
    • PartsUnlimitedServername = puserverfesm1
    • PastrunlimtedServerAdminLogin = AdminUser
    • PartsUnlimitedServerAdminLoginPassword = Pa$$w0rd01 (ensure passwords meet minimum requirements error and fail deployment)
    • PartsUnlimitedServerAdminLoginPasswordforTest = Pa$$w0rd01
    • PartsUnlimitedDBName = pudbfesm
    • PartsUnlimtedDBCollation = SQL_Latin1_General_CP1_CI_AS
    • PartsUnlimitedEBEdition = Basic
    • PartsUnlimitedHostingPlanName = puhostingplanfesm1
    • PartsUnlimitedHostingPanSKU = Standard
    • PartsUnlimitedHostingPlanWorkerSize = 1
    • EnableRules = False
    • CdnStorageAccountName = pustracc
    • CDNStorageContainerName = pustrcntr
    • CdnStorageAccountNameforDev = pustraccdev
    • CDNStorageContainerNameforDev = pustrcntrdev
    • CdnStorageAccountNameForStaging = pustraccstaging
    • CDNStorageContainerNameForStaging = pustrcntrstaging

    PowerShell Tools for Visual Studio

    Additional Notes:

    • You can modify the json file, PartsUnlimitedEnv\Templates\FullenvironmentSetupMerged.json to edit allowable values and parameters. If you edit any of the json files, ensure you commit your changes and rebuild the file.
    • In order to use deployment slots, you’ll need to configure the Web App to use Standard or Premium App Service Plan mode. You cannot create deployment slots for Basic or Free Azure Web Apps. To learn more about deployment slots, see this article
  8. Click Deploy and if prompted fill in any values the scripts ask for. This will only happen if you leave a non-auto-generated parameter blank

    • Potential Errors and Solutions

      • If you receive and error saying something like Get-ChildItem ... cannot find path etc, relating to the json files, this usually occurs when the Build Action property of the file is set to None. To resolve this error, in Solution Explorer** right click the file PartsUnlimitedEnv\Templates\FullenvironmentSetupMerged.json, select Properties, and in the Properties Pages set the value for Build Action to Content..

        Repeat this step for the PartsUnlimitedEnv\Templates\FullenvironmentSetupMerged.param.json file also

        PowerShell Tools for Visual Studio

      • If you receive errors about Azure resources not available or not identifiable, cannot be found etc it may be related to the parameter values you defined earlier. You should return to those and define them again using the criteria and guidelines outlined earlier.

  9. The deployment should run successfully in Visual Studio and the infrastructure deployed into Azure as per the screenshots below.

    PowerShell Tools for Visual Studio

    PowerShell Tools for Visual Studio

    Note: Some of the resources will be deployed into East US, regardless of what location you specify, so you may see a mix of locations depending on what you specified. This is because some location values are hard coded into the depployment templates, FullEnvironmentSetupMerged.json. You can modify these locations if you wish in the template to customise, but again remember to commit anmy changes you make to the template files.

  10. Open up the Dev Web App by double clicking it and copy the URL

    PowerShell Tools for Visual Studio

  11. Paste the URL into a browser and view the app service page.

    Note: The App Service is up and running but the ParstUnlimted application has not been pblished to it yet. So the App Service is up and running but our sample app is not.

    PowerShell Tools for Visual Studio

    You can repeat this also for the staging web app service, and you should note the difference between the two URLs from dev and staging i.e. the URLs are differentiated by using the dev and staging terms in their respective URLs

    The production URL has no such designation and is just the flat URL. It has the Resource Type of App Service in Azure, as opposed to Web App which is the deployment slots for dev and staging

    • http://pufesmeu11.azurewebsites.net/
    • https://pufesmeu11-dev.azurewebsites.net/
    • https://pufesmeu11-staging.azurewebsites.net/

    PowerShell Tools for Visual Studio

Task 3: Publish the website to Azure App Service Production URL

Now that the environment is setup, it is time to publish the website bits.

Note: You need to have completed Tasks 1 and 2 earlier to be able to complete Task 3. If you have not completed Tasks 1 and 2 do so now before continuing with Task 3.

  1. In Solution Explorer right click on the PartsUnlimitedWebsite project and choose Publish…

    PowerShell Tools for Visual Studio

  2. In the Publish pane select Microsoft Azure App service and Select Existing and then click Publish

    Note: the presence of a Continuous Delivery option on the Publish pane to allow you publish automatically to Azure App service. We won’t configure this in this lab but you can browse through it if you have time later.

    Also note the setting options beside the Publish button to either

    • Publish Immediately
    • Create Profile

    PowerShell Tools for Visual Studio

  3. In the App Service wizard the subscription details should be automatically added and select the App Service you wish to deploy to, i.e. in our case from earlier it is pufesmeu11 and click OK. This will deploy to the priduction App Service.

    PowerShell Tools for Visual Studio

    Note: If you click the arrow under the production site notice the presence of the deployment slots for Dev and Staging. You can create profiles to deploy to these also if you wish.

  4. On the Publish pane click Publish. The Pulishing process will start and it should successfully publish as per screenshots below.

    PowerShell Tools for Visual Studio

    PowerShell Tools for Visual Studio

  5. Go to your Azure subscription and open the App service production website, and verify the app is now published

    • http://pufesmeu11.azurewebsites.net/

    PowerShell Tools for Visual Studio

Note: we have not published the ParstUnlimited website to the dev and staging deployment slot sites yet. If you go to those pages they will still have the default Azure App Services page present.

Also, The website is set up to automatically update the database shape, only if the database is empty. No extra EF migrations commands needed for the first deployment.

Task 4: Publish the website to Azure App Service dev and staging sites

We deployed to the production URL in Task 3, now we will deploy to the dev and staging in Azure App Service

  1. On the Publishig pane click Create new profile

    PowerShell Tools for Visual Studio

  2. In the Pick a publish target wizard, choose Select Existing and click Create Profile

    PowerShell Tools for Visual Studio

  3. On the App Service page select your subscription and then under View choose Resource Type and expand the Web App folder in the bottom pane and navigate to the dev slot in your app service and click OK

    PowerShell Tools for Visual Studio

  4. Notice the presence of a new profile with -Dev present in the title. It is now available along with the production publishing profile you created earlier. Click Publish

    PowerShell Tools for Visual Studio

  5. When complete you should see a message in the Ouput window stating that it was successful

    PowerShell Tools for Visual Studio

  6. Go to the dev URL https://pufesmeu11-dev.azurewebsites.net/ and the ParstUnlimited website should now be available.

    PowerShell Tools for Visual Studio

  7. Return to the staging URL and confirm the web site has not being published to that URL.

Task 5: Swap dev and staging site content

  1. In the Azure portal and the App Service pane that you deployed earlier, open up the dev Web App and click on Swap

    PowerShell Tools for Visual Studio

  2. specify the following settings and click OK

    • Swap Type= Swap
    • Source = Dev (where we want to pull content from)
    • Destination = Staging (where we want to publish content to)

    PowerShell Tools for Visual Studio

    Note: The Swap with preview action applies slot specific configuration elements from the destination slot to the source slot and pauses until a selection is made to complete or cancel the swap action. The swap action directs destination slots traffic to the source slot after source slot has been warmed up.

    Verify the dev and staging content swaps over and the PartsUnlimited website is now avialable on the staging slot and it is not present on the dev slot.

    Note: Website is all setup to use slot switching. Users can publish to individual slots as they need. Website is setup to keep the connection strings with the slots. This means that if staging and main website slots are switched the main website still uses the production database.

  3. In the App Service go to DEPLOYMENT > Deployment slots and note the presence of two deployment slots. the first is for production and was created during deployment, the second is the one we created earlier. Click the second one and then click on Swap to view the available options.

    PowerShell Tools for Visual Studio

    We will leave this here but you can play around with these settings and configuration some more, creating, deleting and swapping slots if you wish and have time.

  4. If you wish you can return to Visual Studio and repeat steps 1 to 6 from Task 4 to create a profile to publish to the URL where the PartsUnlimted has not yet been published to, and verify the website successfully deploys to it as well or re-reploy to an existing site if you have deleted or swapped using deployment slots.

Summary

In this lab you completed the following tasks:

  • Setup Local Visual Studio Environment
  • Create Azure App Service Infrastructure from Visual Studio uing ARM Templates
  • Publish the website to Azure App Service Production URL
  • Publish the website to Azure App Service dev and staging sites
  • Swap dev and staging site content using deployment slots

Appendix A: Overview of ARM Template files in **PartsUnlimitedEnv\Templates**

1) AppInsights.json

- No Parameters file present
- Not deployed standalone, called from FullEnvironmentSetup.json

2) DemoEnvironmentSetup.json

- Template File=template\DemoEnvironmentSetup.json
- Template parameters file= template\DemoEnvironmentSetup.param.json
- Deploys fine, results in the resources below
![PowerShell Tools for Visual Studio](..\assets\manualdeployment-jan2018\VS_DemoEnvironmentSetup.png)

3) FullEnvironmentSetup.json

- currently giving errors when deploying.
- This .json file has references to the other .json files
    1.	AppInsights.json
    2.	WebSiteWithTwoSlots.json
    3.	HostingPLanandRules.json 
    4.	SqlServerandDb.json 
    5.	Website.json
    6.	WebsiteRules.json
    7.	WebsiteWithTwoSlots.json
- Template File=template\ FullEnvironmentSetup.json
- Template parameters file= template\ FullEnvironmentSetup.param.json

4) FullEnvironmentSetupMerged.json

- Deployed fine
- Template File=template\ FullEnvironmentSetupMerged.json
- Template parameters file= template\ FullEnvironmentSetupMerged.param.json

5) HostingPLanandRules.json

- No Parameters file present
- Selecting one of the other parameter files and populating variables, fails
- Not deployed standalone, called from FullEnvironmentSetup.json

6) SqlServerandDb.json

- No Parameters file present
- Selecting one of the other parameter files and populating variables
- Not deployed standalone, called from FullEnvironmentSetup.json

7) Website.json

- No Parameters file present
- Selecting one of the other parameter files and populating variables, fails
- Not deployed standalone, called from FullEnvironmentSetup.json

8) WebsiteRules.json

- No Parameters file present
- Selecting one of the other parameter files and populating variables, fails
- Not deployed standalone, called from FullEnvironmentSetup.json

9) WebSiteWithTwoSlots.json

- No Parameters file present
- Selecting one of the other parameter files and populating variables, fails
- Not deployed standalone, called from FullEnvironmentSetup.json