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 Serviço de Aplicações do Azure. Serviço de Aplicações 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 Serviço de Aplicações e uma Serviço de Aplicações com uma aplicação web implementada.

Pré-requisitos

Se já instalou o Visual Studio 2022:

  1. Instale as atualizações mais recentes no Estúdio Visual selecionando o Help>Check for Atualizações.
  2. Adicione a carga de trabalho selecionando Ferramentas>Obter Ferramentas e Funcionalidades.
Instale o mais recente .NET 6.0 SDK.
Instale o mais recente .NET 6.0 SDK.
Instale o mais recente .NET 6.0 SDK.

Criar uma aplicação Web ASP.NET

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

  2. In Create a new project, find, and select 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.

    Screenshot do Visual Studio - Configurar ASP.NET aplicação web 6.0.

  4. Selecione .NET 6.0 (suporte a longo prazo).

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

    Screenshot do Visual Studio - Informações adicionais ao selecionar .NET 6.0.

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

    Screenshot de Visual Studio - ASP.NET Core 6.0 a correr localmente.

  1. Na janela do terminal, crie uma nova pasta chamada MyFirstAzureWebApp e abra-a no Código do Estúdio Visual.

    mkdir MyFirstAzureWebApp
    code MyFirstAzureWebApp
    
  2. No Código do Estúdio Visual, abra a janela do Terminal digitando Ctrl + `.

  3. No terminal Visual Studio Code, crie uma nova aplicação web .NET utilizando o dotnet new webapp comando.

    dotnet new webapp -f net6.0
    
  4. A partir do Terminal em Código de Estúdio Visual, execute a aplicação localmente usando o dotnet run comando.

    dotnet run --urls=https://localhost:5001/
    
  5. Abra um browser e navegue para a aplicação em https://localhost:5001.

    Você verá o modelo ASP.NET Core aplicação web 6.0 exibida na página.

    Screenshot do Visual Studio Code - corra .NET 6.0 no navegador localmente.

  1. 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 --framework net6.0
    cd MyFirstAzureWebApp
    
  2. A partir da mesma sessão de terminal, execute a aplicação localmente usando o dotnet run comando.

    dotnet run --urls=https://localhost:5001/
    
  3. Abra um browser e navegue para a aplicação em https://localhost:5001.

    Você verá o modelo ASP.NET Core aplicação web 6.0 exibida na página.

    Screenshot do Visual Studio Code - ASP.NET Core 6.0 no navegador local.

Neste passo, vamos forquilitivo de um projeto de demonstração para implementar.

  • Aceda à aplicação de amostras .NET 6.0.
  • Selecione o botão Fork na parte superior direita na página GitHub.
  • Selecione o Proprietário e deixe o nome de Repositório predefinido.
  • Selecione Criar garfo.

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 onde 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 os seus recursos Serviço de Aplicações e publicar o seu projeto:

  1. Em Explorador de Soluções, clique com o botão direito no projeto MyFirstAzureWebApp e selecione Publish.

  2. Em Publicar, selecione Azure e depois Next.

    Screenshot of Visual Studio - Publique a aplicação web e o alvo Azure.

  3. Escolha o alvo específico, Serviço de Aplicações do Azure (Linux) ou Serviço de Aplicações do Azure (Windows). Então, selecione Next.

    Importante

    Ao direcionar ASP.NET Quadro 4.8, utilize Serviço de Aplicações do Azure (Windows).

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

    Screenshot do Estúdio Visual - Selecione iniciar sação no diálogo Azure.

  5. À direita de Serviço de Aplicações casos, selecione +.

    Screenshot do Visual Studio - New Serviço de Aplicações diálogo 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 hospedar o Plano, selecione New.

  9. No Plano de Hospedagem: Criar novo diálogo, insira 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.

    Screenshot de Criar novo ecrã do Plano de Hospedagem no portal do Azure.

  10. Em Nome, insira um nome de aplicação único que inclui apenas os caracteres válidos são a-z, A-Z0-9e -. 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.

    Screenshot do Visual Studio - Crie diálogo de recursos de aplicações.

    Assim que o assistente estiver concluído, os recursos do Azure são criados para si e está pronto para publicar o seu projeto ASP.NET Core.

  12. No diálogo Publicar, certifique-se de que a sua nova aplicação Serviço de Aplicações é selecionada em Serviço de Aplicações casos e, em seguida, selecione Acabamento. O Visual Studio cria um perfil de publicação para si para a aplicação Serviço de Aplicações selecionada.

  13. Na página Publicar , selecione Publicar. Se vir uma mensagem de aviso, selecione Continue.

    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 ASP.NET Core 6.0 exibida na página.

    Screenshot do Visual Studio - ASP.NET Core aplicação web 6.0 em Azure.

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

  2. Procure e selecione "Serviço de Aplicações do Azure: Implementar para web app".

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

    1. Selecione MyFirstAzureWebApp como a pasta a implementar.
    2. Selecione Add Config quando solicitado.
    3. Se solicitado, inscreva-se na sua conta Azure.
    4. Selecione a sua Assinatura.
    5. Selecione Criar nova Aplicação Web... Avançado.
    6. Para introduzir um nome globalmente único, use um nome único em todo o Azure (caracteres válidos são a-z, 0-9e -). Um bom padrão é usar uma combinação do nome da sua empresa e um identificador de aplicativos.
    7. Selecione Criar um novo grupo de recursos e fornecer um nome como myResourceGroup.
    8. Quando solicitado para selecionar uma pilha de tempo de execução:
    • Para .NET 6.0, selecione .NET 6
    • Para .NET Framework 4.8, selecione ASP.NET V4.8
    1. Selecione um sistema operativo (Windows ou Linux).
      • Para .NET Framework 4.8, o Windows será selecionado implicitamente.
    2. Selecione uma localização próxima de si.
    3. Selecione Criar um novo plano de Serviço de Aplicações, fornecer um nome e selecionar o nível de preçosF1 Free.
    4. Selecione Skip por enquanto para o recurso Application Insights.
  4. No popup implemente sempre o espaço de trabalho "MyFirstAzureWebApp" para <o nome> da aplicação",, selecione Sim para que o Código do Estúdio Visual seja implementado para a mesma aplicação Serviço de Aplicações sempre que estiver naquele espaço de trabalho.

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

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

    Screenshot do Visual Studio Code - ASP.NET Core aplicação web 6.0 em Azure.

  1. Inscreva-se na sua conta Azure utilizando o az login comando e seguindo a solicitação:

    az login
    
  2. 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 são a-z, 0-9e -). 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çosgratuitos. Omita este argumento para usar um nível premium mais rápido, que incorre num custo de hora a hora.
    • Substitua-o <os> por um ou linux .windows Deve utilizar windows ao 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 levar alguns minutos para ser concluído. Durante a execução, fornece mensagens sobre a criação do grupo de recursos, o plano Serviço de Aplicações e a aplicação de hospedagem, configurando o registo e, em seguida, executando a implementação zip. Em seguida, mostra uma mensagem com o URL da aplicação:

    You can launch the app at http://<app-name>.azurewebsites.net
    
  3. Abra um navegador web e navegue para o URL:

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

    Screenshot do CLI - ASP.NET Core aplicação web 6.0 em Azure.

Nota

Azure PowerShell é recomendado para a criação de apps na plataforma de hospedagem do Windows. Para criar aplicativos no Linux, utilize uma ferramenta diferente, como o Azure CLI.

  1. Inscreva-se na sua conta Azure utilizando o Connect-AzAccount comando e seguindo a solicitação:

    Connect-AzAccount
    
  1. Crie uma nova aplicação utilizando o comando New-AzWebApp :

    New-AzWebApp -Name <app-name> -Location westeurope
    
    • Substitua <app-name> por um nome único em todo o Azure (caracteres válidos são a-z, 0-9e -). Uma combinação do nome da sua empresa e um identificador de aplicações é um bom padrão.
    • Você pode opcionalmente incluir o parâmetro -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 Get-AzLocation comando.

    O comando pode levar alguns minutos para ser concluído. Durante a execução, cria um grupo de recursos, um plano Serviço de Aplicações e o recurso Serviço de Aplicações.

  2. A partir da pasta raiz da aplicação, prepare a aplicação local MyFirstAzureWebApp para implementação utilizando o dotnet publish comando:

    dotnet publish --configuration Release
    
  3. Altere para o diretório de lançamento e crie um ficheiro zip a partir do conteúdo:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. Publique o ficheiro zip na aplicação Azure utilizando o comando Publish-AzWebApp :

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
    

    Nota

    -ArchivePath precisa de todo o caminho do ficheiro zip.

  5. Abra um navegador web e navegue para o URL:

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

    Screenshot do CLI - ASP.NET Core aplicação web 6.0 em Azure.

  1. Digite serviços de aplicativos na pesquisa. Em Serviços, selecione Serviços de Aplicações.

    Screenshot da pesquisa do portal no portal do Azure.

  2. Na página Serviços de Aplicações , selecione + Criar.

  3. No separador Basics , nos detalhes do Projeto, certifique-se de que a subscrição correta é selecionada e, em seguida, selecione para Criar um novo grupo de recursos. Digite myResourceGroup para o nome.

    Screenshot da secção de detalhes do Projeto mostrando onde seleciona a subscrição do Azure e o grupo de recursos para a aplicação web.

  4. De acordo com os detalhes da instância:

    • Under Name, escreva um nome globalmente único para a sua aplicação web.
    • Em Publicação, selecione Código.
    • Em baixo da pilha de tempo de execuçãoselecione .NET 6 (LTS).
    • Selecione um Sistema Operativo e uma Região a partir daí a que pretende servir a sua aplicação.

    Screenshot do Serviço de Aplicações Instance Details com um tempo de execução .NET 6.

  5. Ao abrigo Serviço de Aplicações Plano, selecione Criar novo Plano de Serviço de Aplicações. Digite o meu Plano de Serviço para o nome. Para alterar para o nível Livre, selecione Alterar o tamanho, selecione Dev/Test , selecione F1 e selecione o botão Aplicar na parte inferior da página.

    Screenshot da secção de conta do Administrador onde fornece o nome de utilizador e a palavra-passe do administrador.

  6. Selecione o seguinte: Botão de implantação > na parte inferior da página.

  7. No separador 'Implementação', em GitHub Actions, certifique-se de que a implementação contínua está ativada.

  8. Sob GitHub Actions detalhes, autentica com a sua conta GitHub e selecione as seguintes opções:

    • Para a Organização selecione a organização onde você forfurou o projeto de demonstração.
    • Para Repositório , selecione o projeto dotnetcore-docs-hello-world .
    • Para o mestre selecionado do Ramo.

    Screenshot das opções de implementação para uma aplicação utilizando o tempo de execução .NET 6.

  9. Selecione o botão 'Rever +' na parte inferior da página.

    Screenshot da Revisão e criar botão na parte inferior da página.

  10. Após a validação, selecione o botão Criar na parte inferior da página.

  11. Depois de concluída a implementação, selecione Ir para o recurso.

    Screenshot do próximo passo de ir para o recurso.

  12. Navegue pela aplicação implementada no seu navegador web no URL http://<app-name>.azurewebsites.net.

Atualizar a aplicação e reimplementar

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

  1. Em Explorador de Soluções, no âmbito do seu projeto, 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. Para recolocar a Azure, clique com razão no projeto MyFirstAzureWebApp em Explorador de Soluções 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 web ASP.NET Core 6.0 atualizada exibida na página.

    Screenshot do Visual Studio - Atualizado ASP.NET Core aplicação web 6.0 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. No Código do Estúdio Visual, abra a Paleta de Comando, Ctrl+Shift+P.

  4. Procure e selecione "Serviço de Aplicações do Azure: Implementar para web app".

  5. Selecione Implementar quando solicitado.

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

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

    Screenshot do Visual Studio Code - Atualizado ASP.NET Core aplicação web 6.0 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 6.0 é cross-platform, com base na sua substituição <os> anterior por 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 Serviço de Aplicações plano.

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 web ASP.NET Core 6.0 atualizada exibida na página.

Screenshot do CLI - Atualizado ASP.NET Core aplicação web 6.0 em Azure.

  1. 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>
    
  2. A partir da pasta raiz da aplicação, prepare a aplicação local MyFirstAzureWebApp para implementação utilizando o dotnet publish comando:

    dotnet publish --configuration Release
    
  3. Altere para o diretório de lançamento e crie um ficheiro zip a partir do conteúdo:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. Publique o ficheiro zip na aplicação Azure utilizando o comando Publish-AzWebApp :

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
    

    Nota

    -ArchivePath precisa de todo o caminho do ficheiro zip.

  5. 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 web ASP.NET Core 6.0 atualizada exibida na página.

    Screenshot do CLI - Atualizado ASP.NET Core aplicação web 6.0 em Azure.

  1. Navegue pelo seu garfo GitHub do código de amostra.

  2. Na sua página de repo, prima . para iniciar o código Visual Studio dentro do seu browser.

    Nota

    A URL passará de GitHub.com para GitHub.dev. Esta funcionalidade funciona apenas com repos que têm ficheiros. Isto não funciona em repos vazios.

  3. Abra o Index.cshtml.

    Index.cshtml está localizado na Pages pasta.

    Screenshot da janela Explorer do Visual Studio Code no navegador, destacando o Index.cshtml no repo dotnetcore-docs-hello-world.

  4. 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.

  5. A partir do menu Controlo de Origem , selecione o botão Alterações de Fase para encenar a alteração.

  6. Introduza uma mensagem de compromisso como We love Azure. Em seguida, selecione Commit and Push.

  7. Depois de concluída a implementação, volte para a janela do browser aberta durante o passo Navegar para a aplicação e atualize a página.

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

    Screenshot do CLI - Atualizado ASP.NET Core aplicação web 6.0 em Azure.

Gerir a app Azure

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

Screenshot da portal do 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.

Screenshot da página portal do Azure - Serviços de Aplicação com uma aplicação web de exemplo selecionada.

A página 'Visão 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.

Screenshot da página geral do portal do Azure - 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.

Limpar os recursos

Nos passos anteriores, criou os recursos do Azure num grupo de recursos. Se não espera precisar destes recursos no futuro, elimine o grupo de recursos executando o seguinte comando PowerShell:

Remove-AzResourceGroup -Name myResourceGroup

Este comando pode demorar alguns minutos a ser executado.

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.

Passos seguintes

Neste quickstart, criou e implementou uma aplicação web ASP.NET para Serviço de Aplicações do Azure.

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