Quickstart: Implementar uma aplicação web ASP.NET

Neste arranque rápido, você vai aprender a criar e implementar a sua primeira aplicação web ASP.NET para o Azure App Service. O App Service suporta várias versões de aplicações .NET e fornece um serviço de hospedagem web altamente escalável e auto-remendado. ASP.NET aplicações web são cross-platform e podem ser hospedadas em Linux ou Windows. Quando terminar, terá um grupo de recursos Azure composto por um plano de hospedagem do App Service e um Serviço de Aplicações com uma aplicação web implementada.

Pré-requisitos

  • Uma conta Azure com uma subscrição ativa. Crie uma conta gratuita.

  • Visual Studio 2019 com a ASP.NET e trabalho de desenvolvimento web.

    Se já instalou o Visual Studio 2019:

    • Instale as últimas atualizações no Estúdio Visual selecionando o Help Check > for Updates.
    • Adicione a carga de trabalho selecionando Ferramentas > Obter Ferramentas e Funcionalidades.

Instale o mais recente .NET Core 3.1 SDK.

Instale o mais recente .NET Core 3.1 SDK.

Criar uma aplicação Web ASP.NET

Dica

.NET Core 3.1 é a atual libertação de .NET de suporte a longo prazo (LTS). Para obter mais informações, consulte a política de suporte .NET.

  1. Abra o Estúdio Visual e, em seguida, selecione Criar um novo projeto.

  2. In Create a new project, find and choose ASP.NET Core Web App, em seguida, selecione Next.

  3. Em Configurar o seu novo projeto, nomeie a aplicação MyFirstAzureWebApp e, em seguida, selecione Next.

    Configurar ASP.NET web Core 3.1

  4. Selecione .NET Core 3.1 (Suporte a longo prazo).

  5. Certifique-se de que o Tipo de Autenticação está definido para Nenhum. Selecione Criar.

    Estúdio Visual - Selecione .NET Core 3.1 e Nenhum para Tipo de Autenticação.

  6. A partir do menu Visual Studio, selecione Debug > Start Without Debugging para executar a aplicação web localmente.

    Estúdio Visual - .NET Core 3.1 navegue localmente

Crie uma nova pasta chamada MyFirstAzureWebApp e abra-a no Código do Estúdio Visual. Abra a janela Terminal e crie uma nova aplicação web .NET utilizando o dotnet new webapp comando.

dotnet new webapp -f netcoreapp3.1

A partir do Terminal em Código de Estúdio Visual, execute a aplicação localmente usando o dotnet run comando.

dotnet run

Abra um browser e navegue para a aplicação em https://localhost:5001.

Você verá o modelo ASP.NET web Core 3.1 apresentado na página.

Visual Studio Code - executar .NET Core 3.1 no navegador localmente.

Abra uma janela terminal da sua máquina para um diretório de trabalho. Crie uma nova aplicação web .NET utilizando o dotnet new webapp comando e, em seguida, altere os diretórios para a aplicação recém-criada.

dotnet new webapp -n MyFirstAzureWebApp -f netcoreapp3.1 && cd MyFirstAzureWebApp

A partir da mesma sessão terminal, execute a aplicação localmente usando o dotnet run comando.

dotnet run

Abra um browser e navegue para a aplicação em https://localhost:5001.

Você verá o modelo ASP.NET web Core 3.1 apresentado na página.

Visual Studio Code - ASP.NET Core 3.1 no navegador local.

Publique a sua aplicação web

Para publicar a sua aplicação web, tem primeiro de criar e configurar um novo Serviço de Aplicações para o quais pode publicar a sua aplicação.

Como parte da criação do Serviço de Aplicações, irá criar:

  • Um novo grupo de recursos para conter todos os recursos da Azure para o serviço.
  • Um novo Plano de Hospedagem que especifica a localização, tamanho e funcionalidades da fazenda de servidores web que hospeda a sua aplicação.

Siga estes passos para criar o seu Serviço de Aplicações e publique a sua aplicação web:

  1. No Solution Explorer, clique com o botão direito no projeto MyFirstAzureWebApp e selecione Publicar.

  2. In Publish, selecione Azure e, em seguida, Next.

    Visual Studio - Publique a aplicação web e destino Azure.

  3. As suas opções dependem se já está inscrito no Azure e se tem uma conta visual studio ligada a uma conta Azure. Selecione Adicione uma conta ou inscreva-se para iniciar súmis na sua subscrição Azure. Se já fez a sua assinatura, selecione a conta que pretende.

    Visual Studio - Selecione iniciar sação no diálogo Azure.

  4. Escolha o alvo específico, ou Azure App Service (Linux) ou Azure App Service (Windows).

    Importante

    Ao direcionar ASP.NET Quadro 4.8, utilizará o Azure App Service (Windows).

  5. À direita das instâncias do Serviço de Aplicações, selecione + .

    Visual Studio - Novo diálogo de aplicações do Serviço de Aplicações.

  6. Para Subscrição, aceite a subscrição listada ou selecione uma nova da lista de drop-down.

  7. Para o grupo de recursos, selecione New. No nome do grupo de novos recursos, insira o myResourceGroup e selecione OK.

  8. Para o Plano de Hospedagem, selecione New.

  9. No Plano de Hospedagem: Criar novo diálogo, introduzir os valores especificados no quadro seguinte:

    Definição Valor sugerido Descrição
    Plano de Alojamento MyFirstAzureWebAppPlan Nome do plano de serviço de aplicações.
    Localização Europa Ocidental O centro de dados onde o a aplicação Web está alojada.
    Tamanho Gratuito O escalão de preço determina as funcionalidades do alojamento.

    Criar novo Plano de Hospedagem

  10. In Name, insira um nome de aplicação único que inclui apenas os caracteres válidos são a-z , e A-Z 0-9 - . Pode aceitar o nome único gerado automaticamente. O URL da aplicação Web é http://<app-name>.azurewebsites.net, em que <app-name> é o nome da aplicação.

  11. Selecione Criar para criar os recursos Azure.

    Visual Studio - Criar diálogo de recursos de aplicações.

    Assim que o assistente estiver completo, os recursos do Azure são criados para si e está pronto para publicar.

  12. Selecione Acabamento para fechar o assistente.

  13. Na página Publicar, selecione Publicar. Visual Studio constrói, embala e publica a app para o Azure, e depois lança a aplicação no navegador padrão.

    Você verá a aplicação web core 3.1 ASP.NET exibida na página.

    Visual Studio - ASP.NET web Core 3.1 em Azure.

Para implementar a sua aplicação web utilizando a extensão Visual Studio Azure Tools:

  1. No Código do Estúdio Visual, abra a Paleta de Comando, Ctrl + Shift + P.

  2. Procure e selecione "Azure App Service: Deploy to Web App".

  3. Responda às instruções da seguinte forma:

    • Selecione MyFirstAzureWebApp como a pasta a implementar.
    • Selecione Add Config quando solicitado.
    • Se solicitado, inscreva-se na sua conta Azure existente.

    Visual Studio Code - Inscreva-se no Azure.

    • Selecione a sua Subscrição.
    • Selecione Criar nova Aplicação Web... Avançado.
    • Para introduzir um nome globalmente único, use um nome único em todo o Azure (caracteres válidos a-z 0-9 são, e -). Um bom padrão é usar uma combinação do nome da sua empresa e um identificador de aplicativos.
    • Selecione Criar um novo grupo de recursos e fornecer um nome como myResourceGroup .
    • Quando solicitado para selecionar uma pilha de tempo de execução:
      • Para .NET Core 3.1, selecione .NET Core 3.1 (LTS)
      • Para .NET 5.0, selecione .NET 5
      • Para .NET Framework 4.8, selecione ASP.NET V4.8
    • Selecione um sistema operativo (Windows ou Linux).
      • Para .NET Framework 4.8, o Windows será selecionado implicitamente.
    • Selecione Criar um novo plano de Serviço de Aplicações, fornecer um nome e selecionar o nível de preços F1 Free .
    • Selecione Skip por enquanto para o recurso Application Insights.
    • Selecione uma localização próxima de si.
  4. Ao publicar concluído, selecione Browse Website na notificação e selecione Open quando solicitado.

    Você verá a aplicação web core 3.1 ASP.NET exibida na página.

    Visual Studio Code - ASP.NET web Core 3.1 em Azure.

Implemente o código no seu diretório local MyFirstAzureWebApp utilizando o az webapp up comando:

az webapp up --sku F1 --name <app-name> --os-type <os>
  • Se o az comando não for reconhecido, certifique-se de que tem o CLI Azure instalado como descrito em Pré-Requisitos.
  • Substitua <app-name> por um nome único em todo o Azure (caracteres válidos a-z 0-9 são, e -. Um bom padrão é usar uma combinação do nome da sua empresa e um identificador de aplicativos.
  • O --sku F1 argumento cria a aplicação web no nível de preços gratuitos. Omita este argumento para usar um nível premium mais rápido, que incorre num custo de hora a hora.
  • <os>Substitua-o por um linux ou windows . Deve utilizar windows ao direcionar ASP.NET Quadro 4.8.
  • Pode opcionalmente incluir o argumento --location <location-name> onde <location-name> está uma região de Azure disponível. Pode recuperar uma lista de regiões admissíveis para a sua conta Azure, executando o az account list-locations comando.

O comando pode demorar alguns minutos a ser concluído. Durante a execução, fornece mensagens sobre a criação do grupo de recursos, o plano de Serviço de Aplicações e a aplicação de hospedagem, configurando o registo e, em seguida, executando a implementação zip. Em seguida, produz uma mensagem com o URL da aplicação:

You can launch the app at http://<app-name>.azurewebsites.net

Abra um navegador web e navegue para o URL:

Você verá a aplicação web core 3.1 ASP.NET exibida na página.

CLI - ASP.NET web Core 3.1 em Azure.

Atualizar a aplicação e reimplementar

Siga estes passos para atualizar e redistribuir a sua aplicação web:

  1. No Solution Explorer, no âmbito do seu projeto, abra Index.cshtml.

  2. Substitua o primeiro <div> elemento pelo seguinte código:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    Guarde as alterações.

  3. Para recolocar o Azure, clique com o botão direito no projeto MyFirstAzureWebApp no Solution Explorer e selecione Publicar.

  4. Na página do resumo da Publicação, selecione Publicar.

    Quando a publicação estiver concluída, o Visual Studio inicia um browser para o URL da aplicação Web.

    Verá a aplicação ASP.NET web Core 3.1 atualizada apresentada na página.

    Visual Studio - Atualizado ASP.NET web Core 3.1 em Azure.

  1. Abra o Index.cshtml.

  2. Substitua o primeiro <div> elemento pelo seguinte código:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    Guarde as alterações.

  3. Abra a Barra Lateral do Código do Estúdio Visual, selecione o ícone Azure para expandir as suas opções.

  4. Sob o nó app SERVICE, expanda a sua subscrição e clique com o botão direito no MyFirstAzureWebApp.

  5. Selecione a Aplicação de Implementação para Web....

  6. Selecione Implementar quando solicitado.

  7. Ao publicar concluído, selecione Browse Website na notificação e selecione Open quando solicitado.

    Verá a aplicação ASP.NET web Core 3.1 atualizada apresentada na página.

    Visual Studio Code - Atualizado ASP.NET web Core 3.1 em Azure.

No diretório local, abra o ficheiro Index.cshtml. Substitua o primeiro <div> elemento:

<div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

Guarde as alterações e, em seguida, volte a recolocar a aplicação utilizando o az webapp up comando:

ASP.NET Core 3.1 é uma plataforma cruzada, com base na sua substituição anterior <os> por qualquer um ou linux windows .

az webapp up --os-type <os>

Este comando utiliza valores que estão em cache localmente no ficheiro .azure/config, incluindo o nome da aplicação, grupo de recursos e plano de Serviço de Aplicações.

Uma vez concluída a implementação, volte para a janela do navegador que abriu na Navegação para o passo da aplicação e aprovam a atualização.

Verá a aplicação ASP.NET web Core 3.1 atualizada apresentada na página.

CLI - Atualizado ASP.NET web Core 3.1 em Azure.

Gerir a app Azure

Para gerir a sua aplicação web, vá ao portal Azuree procure e selecione Serviços de Aplicações.

Portal Azure - Selecione a opção Serviços de Aplicações.

Na página serviços de aplicações, selecione o nome da sua aplicação web.

Portal Azure - Página de Serviços de Aplicações com uma aplicação web de exemplo selecionada.

A página 'Vista Geral' para a sua aplicação web contém opções para gestão básica como navegar, parar, iniciar, reiniciar e excluir. O menu esquerdo fornece mais páginas para configurar a sua aplicação.

Portal Azure - Página geral do Serviço de Aplicações.

Limpar os recursos

Nos passos anteriores, criou os recursos do Azure num grupo de recursos. Se provavelmente não necessitar desses recursos no futuro, pode eliminá-los ao eliminar o grupo de recursos.

  1. Na página Descrição geral da sua aplicação Web no portal do Azure, selecione a ligação myResourceGroup em Grupo de recursos.
  2. Na página do grupo de recursos, confirme que os recursos apresentados são aqueles que pretende eliminar.
  3. Selecione Eliminar, introduza myResourceGroup na caixa de texto e, em seguida, selecione Eliminar.

Limpar os recursos

Nos passos anteriores, criou os recursos do Azure num grupo de recursos. Se provavelmente não necessitar desses recursos no futuro, pode eliminá-los ao eliminar o grupo de recursos.

  1. Na página Descrição geral da sua aplicação Web no portal do Azure, selecione a ligação myResourceGroup em Grupo de recursos.
  2. Na página do grupo de recursos, confirme que os recursos apresentados são aqueles que pretende eliminar.
  3. Selecione Eliminar, introduza myResourceGroup na caixa de texto e, em seguida, selecione Eliminar.

Limpar os recursos

Nos passos anteriores, criou os recursos do Azure num grupo de recursos. Se achar que não vai precisar destes recursos no futuro, execute o seguinte comando no Cloud Shell para eliminar o grupo de recursos:

az group delete --name myResourceGroup

Este comando pode demorar alguns minutos a ser executado.

Passos seguintes

Neste quickstart, criou e implementou uma aplicação web ASP.NET para o Azure App Service.

Avance para o próximo artigo para aprender a criar uma aplicação .NET Core e conectá-la a uma Base de Dados SQL: