Publicar um aplicativo ASP.NET Core no Azure com o Visual Studio CodePublish an ASP.NET Core app to Azure with Visual Studio Code

Por Ricardo SerradasBy Ricardo Serradas

Importante

Versões prévias do ASP.NET Core com o Serviço de Aplicativo do AzureASP.NET Core preview releases with Azure App Service

Versões prévias do ASP.NET Core não são implantadas para o Serviço de Aplicativo do Azure por padrão.ASP.NET Core preview releases aren't deployed to Azure App Service by default. Para hospedar um aplicativo que usa uma versão prévia do ASP.NET Core, veja Implantar versão prévia do ASP.NET Core para o Serviço de Aplicativo do Azure.To host an app that uses an ASP.NET Core preview release, see Deploy ASP.NET Core preview release to Azure App Service.

Para solucionar um problema de implantação do Serviço de Aplicativo, confira Solucionar problemas ASP.NET Core no serviço Azure App e no IIS.To troubleshoot an App Service deployment issue, see Solucionar problemas ASP.NET Core no serviço Azure App e no IIS.

IntroduçãoIntro

Com este tutorial, você aprenderá a criar um aplicativo ASP.NET Core MVC e implantá-lo no Visual Studio Code.With this tutorial, you'll learn how to create an ASP.Net Core MVC Application and deploy it within Visual Studio Code.

ConfigurarSet up

Criar um projeto ASP.NET Core MVCCreate an ASP.Net Core MVC project

Usando um terminal, navegue para a pasta em que deseja criar o projeto e use o seguinte comando:Using a terminal, navigate to the folder you want the project to be created on and use the following command:

dotnet new mvc

Você terá uma estrutura de pastas semelhante à seguinte:You'll have a folder structure similar to the following:

      appsettings.Development.json
      appsettings.json
<DIR> Controllers
<DIR> Models
      netcore-vscode.csproj
<DIR> obj
      Program.cs
<DIR> Properties
      Startup.cs
<DIR> Views
<DIR> wwwroot

Abri-lo com o Visual Studio CodeOpen it with Visual Studio Code

Depois que o projeto for criado, abra-o com o Visual Studio Code usando uma das seguintes opções:After your project is created, you can open it with Visual Studio Code by using one of the options below:

Por meio da linha de comandoThrough the command line

Use o seguinte comando na pasta em que você criou o projeto:Use the following command within the folder you created the project:

> code .

Se o comando abaixo não funcionar, verifique se a instalação está configurada corretamente referenciando este link.If the command below does not work, check if your installation is configured properly by referencing this link.

Por meio da interface do Visual Studio CodeThrough Visual Studio Code interface

  • Abra o Visual Studio CodeOpen Visual Studio Code
  • No menu, selecione File > Open FolderOn the menu, select File > Open Folder
  • Selecione a raiz da pasta em que você criou o projeto MVCSelect the root of the folder you created the MVC Project

Ao abrir a pasta do projeto, você receberá uma mensagem informando que os ativos necessários para o build e a depuração estão ausentes.When you open the project folder, you'll receive a message saying that required assets to build and debug are missing. Aceite a ajuda para adicioná-los.Accept the help to add them.

Interface do Visual Studio Code com o projeto carregado

Uma pasta .vscode será criada com a estrutura do projeto.A .vscode folder will be created under the project structure. Ela conterá os seguintes arquivos:It will contain the following files:

launch.json
tasks.json

Eles são arquivos de utilitário para ajudá-lo a criar e depurar seu aplicativo Web .NET Core.These are utility files to help you build and debug your .NET Core Web App.

Executar o aplicativoRun the app

Antes de implantar o aplicativo no Azure, verifique se ele está sendo executado corretamente no computador local.Before we deploy the app to Azure, make sure it is running properly on your local machine.

  • Pressione F5 para executar o projetoPress F5 to run the project

Seu aplicativo Web iniciará a execução em uma nova guia do navegador padrão.Your web app will start running on a new tab of your default browser. Você poderá observar um aviso de privacidade assim que ele for iniciado.You may notice a privacy warning as soon as it starts. Isso ocorre porque o aplicativo será iniciado usando HTTP e HTTPS, e ele navega para o ponto de extremidade HTTPS por padrão.This is because your app will start either using HTTP and HTTPS, and it navigates to the HTTPS endpoint by default.

Aviso de privacidade durante a depuração do aplicativo localmente

Para manter a sessão de depuração, clique em Advanced e, em seguida, Continue to localhost (unsafe).To keep the debugging session, click Advanced and then Continue to localhost (unsafe).

Gerar o pacote de implantação localmenteGenerate the deployment package locally

  • Abrir o terminal do Visual Studio CodeOpen Visual Studio Code terminal
  • Use o seguinte comando para gerar um pacote Release para uma subpasta chamada publish:Use the following command to generate a Release package to a sub folder called publish:
    • dotnet publish -c Release -o ./publish
  • Uma pasta publish será criada com a estrutura do projetoA new publish folder will be created under the project structure

Estrutura de pastas de publicação

Publicar no Serviço de Aplicativo do AzurePublish to Azure App Service

Aproveitando a extensão do Serviço de Aplicativo do Azure para Visual Studio Code, siga as etapas a seguir para publicar o site diretamente no Serviço de Aplicativo do Azure.Leveraging the Azure App Service extension for Visual Studio Code, follow the steps below to publish the website directly to the Azure App Service.

Se você estiver criando um aplicativo WebIf you're creating a new Web App

  • Clique com o botão direito do mouse na pasta publish e selecione Deploy to Web App...Right click the publish folder and select Deploy to Web App...
  • Selecione a assinatura em que deseja criar o aplicativo WebSelect the subscription you want to create the Web App
  • Selecione Create New Web AppSelect Create New Web App
  • Insira um nome para o aplicativo WebEnter a name for the Web App

A extensão criará o aplicativo Web e começará automaticamente a implantar o pacote nele.The extension will create the new Web App and will automatically start deploying the package to it. Depois que a implantação for concluída, clique em Browse Website para validar a implantação.Once the deployment is finished, click Browse Website to validate the deployment.

Mensagem de implantação bem-sucedida

Depois de clicar em Browse Website, você navegará para ele usando o navegador padrão:Once you click Browse Website, you'll navigate to it using your default browser:

Novo aplicativo Web implantado com êxito

Se você estiver fazendo uma implantação em um aplicativo Web existenteIf you're deploying to an existing Web App

  • Clique com o botão direito do mouse na pasta publish e selecione Deploy to Web App...Right click the publish folder and select Deploy to Web App...
  • Selecione a assinatura na qual reside o aplicativo Web existenteSelect the subscription the existing Web App resides
  • Selecione o aplicativo Web na listaSelect the Web App from the list
  • O Visual Studio Code perguntará se você deseja substituir o conteúdo existente.Visual Studio Code will ask you if you want to overwrite the existing content. Clique em Deploy para confirmarClick Deploy to confirm

A extensão implantará o conteúdo atualizado no aplicativo Web.The extension will deploy the updated content to the Web App. Após a conclusão, clique em Browse Website para validar a implantação.Once it's done, click Browse Website to validate the deployment.

Aplicativo Web existente implantado com êxito

Próximas etapasNext steps

Recursos adicionaisAdditional resources