Skip to content

Commit

Permalink
Publish ASPNET Core to Azure (dotnet#4240)
Browse files Browse the repository at this point in the history
* Publish ASPNET Core to Azure

* cleanup

* final

* italics
  • Loading branch information
rachelappel authored Sep 11, 2017
1 parent 966baa2 commit 0ba263d
Show file tree
Hide file tree
Showing 21 changed files with 75 additions and 83 deletions.
149 changes: 66 additions & 83 deletions aspnetcore/tutorials/publish-to-azure-webapp-using-vs.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
title: Publish an ASP.NET Core app to Azure using Visual Studio
author: rick-anderson
description:
keywords: ASP.NET Core,
keywords: ASP.NET Core
ms.author: riande
manager: wpickett
ms.date: 10/14/2016
ms.date: 09/01/2017
ms.topic: get-started-article
ms.assetid: 78571e4a-a143-452d-9cf2-0860f85972e6
ms.technology: aspnet
Expand All @@ -14,187 +14,170 @@ uid: tutorials/publish-to-azure-webapp-using-vs
---
# Publish an ASP.NET Core web app to Azure App Service using Visual Studio

By [Rick Anderson](https://twitter.com/RickAndMSFT) and [Cesar Blum Silveira](https://github.com/cesarbs)
By [Rick Anderson](https://twitter.com/RickAndMSFT), [Cesar Blum Silveira](https://github.com/cesarbs), and [Rachel Appel](https://twitter.com/rachelappel)

## Set up the development environment

* Install the latest [Azure SDK for Visual Studio](https://www.visualstudio.com/features/azure-tools-vs). The SDK installs Visual Studio if you don't already have it.

> [!NOTE]
> The SDK installation can take more than 30 minutes if your machine doesn't have many of the dependencies.
* Install [.NET Core + Visual Studio tooling](http://go.microsoft.com/fwlink/?LinkID=798306)
* Install [.NET Core + Visual Studio tooling](http://go.microsoft.com/fwlink/?LinkID=798306).

* Verify your [Azure account](https://portal.azure.com/). You can [open a free Azure account](https://azure.microsoft.com/pricing/free-trial/) or [Activate Visual Studio subscriber benefits](https://azure.microsoft.com/pricing/member-offers/msdn-benefits-details/).

## Create a web app

In the Visual Studio Start Page, tap **New Project...**.

![Start Page](publish-to-azure-webapp-using-vs/_static/new_project.png)

Alternatively, you can use the menus to create a new project. Tap **File > New > Project...**.
In the Visual Studio Start Page, select **File > New > Project...**

![File menu](publish-to-azure-webapp-using-vs/_static/alt_new_project.png)
![File menu](publish-to-azure-webapp-using-vs/_static/file_new_project.png)

Complete the **New Project** dialog:

* In the left pane, tap **Web**
* In the left pane, select **.NET Core**.

* In the center pane, tap **ASP.NET Core Web Application (.NET Core)**
* In the center pane, select **ASP.NET Core Web Application**.

* Tap **OK**
* Select **OK**.

![New Project dialog](publish-to-azure-webapp-using-vs/_static/new_prj.png)

In the **New ASP.NET Core Web Application (.NET Core)** dialog:
In the **New ASP.NET Core Web Application** dialog:

* Tap **Web Application**
* Select **Web Application**.

* Verify **Authentication** is set to **Individual User Accounts**
* Select **Change Authentication**.

* Verify **Host in the cloud** is **not** checked
![New Project dialog](publish-to-azure-webapp-using-vs/_static/new_prj_2.png)

* Tap **OK**
The **Change Authentication** dialog appears.

![New ASP.NET Core Web Application (.NET Core) dialog](publish-to-azure-webapp-using-vs/_static/noath.png)
* Select **Individual User Accounts**.

## Test the app locally
* Select **OK** to return to the **New ASP.NET Core Web Application**, then select **OK** again.

* Press **Ctrl-F5** to run the app locally
![New ASP.NET Core Web authentication dialog](publish-to-azure-webapp-using-vs/_static/new_prj_auth.png)

* Tap the **About** and **Contact** links. Depending on the size of your device, you might need to tap the navigation icon to show the links
Visual Studio creates the solution.

![Web application open in Microsoft Edge on localhost](publish-to-azure-webapp-using-vs/_static/show.png)
## Run the app locally

* Tap **Register** and register a new user. You can use a fictitious email address. When you submit, you'll get the following error:
* Choose **Debug** then **Start Without Debugging** to run the app locally.

![Internal Server Error: A database operation failed while processing the request. SQL exception: Cannot open the database. Applying existing migrations for Application DB context may resolve this issue.](publish-to-azure-webapp-using-vs/_static/mig.png)
* Click the **About** and **Contact** links to verify the web application works.

You can fix the problem in two different ways:
![Web application open in Microsoft Edge on localhost](publish-to-azure-webapp-using-vs/_static/show.png)

* Tap **Apply Migrations** and, once the page updates, refresh the page; or
* Select **Register** and register a new user. You can use a fictitious email address. When you submit, the page displays the following error:

* Run the following from a command prompt in the project's directory:
*"Internal Server Error: A database operation failed while processing the request. SQL exception: Cannot open the database. Applying existing migrations for Application DB context may resolve this issue."*

<!-- literal_block {"ids": [], "xml:space": "preserve"} -->
* Select **Apply Migrations** and, once the page updates, refresh the page.

```
dotnet ef database update
```
![Internal Server Error: A database operation failed while processing the request. SQL exception: Cannot open the database. Applying existing migrations for Application DB context may resolve this issue.](publish-to-azure-webapp-using-vs/_static/mig.png)

The app displays the email used to register the new user and a **Log off** link.
The app displays the email used to register the new user and a **Log out** link.

![Web application open in Microsoft Edge. The Register link is replaced by the text Hello abc@example.com!](publish-to-azure-webapp-using-vs/_static/hello.png)
![Web application open in Microsoft Edge. The Register link is replaced by the text Hello email@domain.com!](publish-to-azure-webapp-using-vs/_static/hello.png)

## Deploy the app to Azure

Confirm that the published app for deployment isn't running. Files in the *publish* folder are locked when the app is running. Deployment can't occur because locked files can't be copied.
Close the web page, return to Visual Studio, and select **Stop Debugging** from the **Debug** menu.

Right-click on the project in Solution Explorer and select **Publish...**.

![Contextual menu open with Publish link highlighted](publish-to-azure-webapp-using-vs/_static/pub.png)

In the **Publish** dialog, tap **Microsoft Azure App Service**.
In the **Publish** dialog, select **Microsoft Azure App Service** and click **Publish**.

![Publish dialog](publish-to-azure-webapp-using-vs/_static/maas1.png)

Tap **New...** to create a new resource group. Creating a new resource group will make it easier to delete all the Azure resources you create in this tutorial.
* Name the app a unique name.

![App Service dialog](publish-to-azure-webapp-using-vs/_static/newrg1.png)
* Select an MSDN subscription.

Create a new resource group and app service plan:
* Select **New...** for the resource group and enter a name for the new resource group.

* Tap **New...** for the resource group and enter a name for the new resource group
* Select **New...** for the app service plan and select a location near you. You can keep the name that is generated by default.

* Tap **New...** for the app service plan and select a location near you. You can keep the default generated name
![App Service dialog](publish-to-azure-webapp-using-vs/_static/newrg1.png)

* Tap **Explore additional Azure services** to create a new database
* Select the **Services** tab to create a new database.

![New Resource Group dialog: Hosting panel](publish-to-azure-webapp-using-vs/_static/cas.png)
* Select the green **+** icon to create a new SQL Database

* Tap the green **+** icon to create a new SQL Database
![New SQL Database](publish-to-azure-webapp-using-vs/_static/sql.png)

![New Resource Group dialog: Services panel](publish-to-azure-webapp-using-vs/_static/sql.png)
* Select **New...** on the **Configure SQL Database** dialog to create a new database.

* Tap **New...** on the **Configure SQL Database** dialog to create a new database server.
![New SQL Database and server](publish-to-azure-webapp-using-vs/_static/conf.png)

![Configure SQL Database dialog](publish-to-azure-webapp-using-vs/_static/conf.png)
The **Configure SQL Server** dialog appears.

* Enter an administrator user name and password, and then tap **OK**. Don't forget the user name and password you create in this step. You can keep the default **Server Name**
* Enter an administrator user name and password, and then select **OK**. Don't forget the user name and password you create in this step. You can keep the default **Server Name**.

![Configure SQL Server dialog](publish-to-azure-webapp-using-vs/_static/conf_servername.png)
* Enter names for the database and connection string.

> [!NOTE]
> "admin" is not allowed as the administrator user name.
* Tap **OK** on the **Configure SQL Database** dialog
![Configure SQL Server dialog](publish-to-azure-webapp-using-vs/_static/conf_servername.png)

![Configure SQL Database dialog](publish-to-azure-webapp-using-vs/_static/conf_final.png)
* Select **OK**.

* Tap **Create** on the **Create App Service** dialog
Visual Studio returns to the **Create App Service** dialog.

![Create App Service dialog](publish-to-azure-webapp-using-vs/_static/create_as.png)
* Select **Create** on the **Create App Service** dialog.

* Tap **Next** in the **Publish** dialog
![Configure SQL Database dialog](publish-to-azure-webapp-using-vs/_static/conf_final.png)

* Click the **Settings** link in the **Publish** dialog.

![Publish dialog: Connection panel](publish-to-azure-webapp-using-vs/_static/pubc.png)

* On the **Settings** stage of the **Publish** dialog:
On the **Settings** page of the **Publish** dialog:

* Expand **Databases** and check **Use this connection string at runtime**
* Expand **Databases** and check **Use this connection string at runtime**.

* Expand **Entity Framework Migrations** and check **Apply this migration on publish**
* Expand **Entity Framework Migrations** and check **Apply this migration on publish**.

* Tap **Publish** and wait until Visual Studio finishes publishing your app
* Select **Save**. Visual Studio returns to the **Publish** dialog.

![Publish dialog: Settings panel](publish-to-azure-webapp-using-vs/_static/pubs.png)

Visual Studio will publish your app to Azure and launch the cloud app in your browser.
Click **Publish**. Visual Studio will publish your app to Azure and launch the cloud app in your browser.

### Test your app in Azure

* Test the **About** and **Contact** links

* Register a new user

![Web application opened in Microsoft Edge on Azure App Service](publish-to-azure-webapp-using-vs/_static/final.png)
![Web application opened in Microsoft Edge on Azure App Service](publish-to-azure-webapp-using-vs/_static/register.png)

### Update the app

* Edit the `Views/Home/About.cshtml` Razor view file and change its contents. For example:
<!-- literal_block {"ids": [], "linenos": false, "xml:space": "preserve", "language": "html", "highlight_args": {"hl_lines": [7]}} -->
* Edit the *Pages/About.cshtml* Razor page and change its contents. For example, you can modify the paragraph to say "Hello ASP.NET Core!":

```html
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>
[!code-html[About](publish-to-azure-webapp-using-vs/sample/about.cshtml?highlight=9&range=1-9)]

<p>My updated about page.</p>
```

* Right-click on the project and tap **Publish...** again
* Right-click on the project and select **Publish...** again.

![Contextual menu open with Publish link highlighted](publish-to-azure-webapp-using-vs/_static/pub.png)

* After the app is published, verify the changes you made are available on Azure
* After the app is published, verify the changes you made are available on Azure.

![Verify task is complete](publish-to-azure-webapp-using-vs/_static/final.png)

### Clean up

When you have finished testing the app, go to the [Azure portal](https://portal.azure.com/) and delete the app.

* Select **Resource groups**, then tap the resource group you created
* Select **Resource groups**, then select the resource group you created.

![Azure Portal: Resource Groups in sidebar menu](publish-to-azure-webapp-using-vs/_static/portalrg.png)

* In the **Resource group** blade, tap **Delete**
* In the **Resource groups** page, select **Delete**.

![Azure Portal: Resource Groups blade](publish-to-azure-webapp-using-vs/_static/rgd.png)
![Azure Portal: Resource Groups page](publish-to-azure-webapp-using-vs/_static/rgd.png)

* Enter the name of the resource group and tap **Delete**. Your app and all other resources created in this tutorial are now deleted from Azure
* Enter the name of the resource group and select **Delete**. Your app and all other resources created in this tutorial are now deleted from Azure.

### Next steps

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@page
@model AboutModel
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"]</h2>
<h3>@Model.Message</h3>

<p>Hello ASP.NET Core!</p>

0 comments on commit 0ba263d

Please sign in to comment.