Last updated : Jul 20, 2018.

Overview

App Service is a platform-as-a-service (PaaS) offering of Microsoft Azure. Create web and mobile apps for any platform or device. Integrate your apps with SaaS solutions, connect with on-premises applications, and automate your business processes.

The following illustration shows the completed application:

image1

Prerequisites

  1. Visual Studio 2015 Update 3 download from here

  2. Active Azure Account.

  3. Azure SDK for VS 2015 download from here

  4. Microsoft Web Deploy download from here

Since we already have the source code in the repo we could use the same for our Azure App Service deployment. You can also create your own app and try deploying the same.

Exercise 1: Publish the App

  1. Load the 01_Demos_ASPNET5.sln from your Visual Studio and wait until the package restoration is complete. If any issues found, try the below workarounds-

    • Clean the solution and try to rebuild, which should work fine. Also make sure you have connected to the internet while restoring the packages as these would get downloaded over the internet

    • Close your Visual Studio and try to clear the temp of your system and reload the solution, which should work fine.

      image2

  2. Right click on “MyHealth.Web” and select “publish”. You will see a new window automatically open to indicate that the resources will be created in Azure, which will host all application resources. Fill in the required information and make sure to change the type to Web App.

    image3

  3. Select a publish target to “Microsoft Azure App Service” since we would be publishing a WebApp to Azure App Service.

    image4

  4. Upon selecting the publish target to Microsoft Azure App Service, you will get a new window to fill in the information for publishing. On the top right corner, you can manage your Azure accounts. Select one of the account that you wish to host against and click on “New” to create a new Resource group.

    image5

  5. Log into Azure portal from here

    1

  6. Upon login you should see there are no resource group created at the moment in your resource groups.

    image6

  7. From your Visual Studio, upon clicking “New”, you will get another window to configure the App Service Plan.

    image7

  8. Upon filling out the required information, click on “Services” to add a new service.

    image8

  9. You will get a new window when clicked on services. Your web application will have a SQL database in the future, so fill out the required information to configure SQL Server as shown-

    image9

  10. Configure SQL database as shown-

    image10

  11. Finally, you should see the services upon configured-

    image11

  12. Click on create so that the deployment starts by spinning up all those resources on Azure. You can see at the bottom of the window which shows the status of your deployments.

    image12

  13. Once successfully created, you should see the resources in your Visual Studio “Server Explorer”.

    image13

  14. With the previous steps, you generated the Azure resources for your deployments.

  15. In your solution explorer, right click on the MyHealth.Web and click Publish. You will see Publish Web dialog box. The wizard shows you a list of available Publish Profiles. If you select Microsoft Azure App Service, you can see a list of available subscriptions and the resource groups that were previously created. Select the resource group that you created to deploy the web application.

    image14

  16. After you select the resource group, the page that opens shows the connection information. The default parameters will populate the fields. You can modify these fields if required or leave it as it is. To test that the connection works correctly, click on Validate Connection.

    image15

  17. In the Settings page, you can configure the deployment type depending on whether you require in a Debug/Release mode. You can check the box for using default connection string at run time.

    image16

  18. On the last page, Preview, you can determine the changes that affect the Azure environment.

    image17

  19. At last, click Publish. The Output window displays information about the deployment. When it’s completed, it displays a successful message.

    image18

  20. You can see the website in the browser that will open.

    image19

  21. When you go back to your Azure portal and see, you have all the resources that was created and published from your Visual Studio.

    image20

  22. Once the app is running fine, you can verify by doing some changes to the UI. So that you make sure that your app is actually running in Azure App Service. To open remote files, go to your server explorer from Visual Studio.

  23. Login to your Azure from Server Explorer. Expand the node Azure > App Service > YOUR RESOURCE GROUP > YOUR WEBAPP > Files > Views > Index.cshtml and replace the line as below

       <li><a asp-controller="Account" asp-action="Login">Secret area</a></li>
    
  24. Save the changes and refresh the browser. You should see the changes reflecting in the site now.

    image21

  25. We can also remote debug our application from Azure within our Visual Studio.

    Put a breakpoint in your code and Right click and select Publish. You should see the new window as shown-

    image22

  26. Publish the debug files so that you can show remote debugging-

    image23

  27. Click on Publish. From your Visual Studio, go to Debug > click Attach to Process, enter the azure websites URL along with its port and select dnx.exe process

    image24

    image25

  28. Finally, from your Server Explorer > App Service node, attach the debugger. Refresh the browser and you would be hitting your breakpoint wherever you would have set. And that’s how you gonna remote debug ASP.NET apps on Azure. To learn more about remote debugging, see Remote Debug ASP .NET Core Apps on Azure

    image26