Implantar um aplicativo Web Node.js no Azure

Neste quickstart, aprende como criar e implementar a sua primeira aplicação web Node.js (Express) para o Serviço de Aplicações do Azure. O Serviço de Aplicativo suporta várias versões do Node.js no Linux e no Windows.

Os passos do CLI do Azure neste quickstart usam o nível Premium v3 pago. Os passos do Visual Studio Code e do portal do Azure mostram como usar o Free tier.

Este vídeo mostra como implantar um aplicativo Web Node.js no Azure.

As etapas no vídeo também são descritas nas seções a seguir.

Configurar seu ambiente inicial

• Ter uma conta do Azure com uma assinatura ativa. Se não tiver uma, pode criar uma conta gratuitamente.
• Instale Node.js LTS. Execute o comando node --version para verificar se Node.js está instalado.
• Instalar o Visual Studio Code.
• Instale a extensão do Serviço de Aplicativo do Azure para Visual Studio Code.

• Ter uma conta do Azure com uma assinatura ativa. Se não tiver uma, pode criar uma conta gratuitamente.
• Instale Node.js LTS. Execute o comando node --version para verificar se Node.js está instalado.
• Instala o CLI do Azure, que podes usar para executar comandos numa shell para criar e configurar recursos Azure.

• Ter uma conta do Azure com uma assinatura ativa. Se não tiver uma, pode criar uma conta gratuitamente.
• Instale Node.js LTS. Execute o comando node --version para verificar se Node.js está instalado.
• Tenha um cliente FTP, como o FileZilla, para transferir ficheiros para o App Service.

Crie seu aplicativo Node.js

Nesta etapa, você cria um aplicativo Node.js básico e garante que ele seja executado no seu computador.

Gorjeta

Se já completaste o tutorial Node.js, podes avançar para Implantar no Azure.

1. Crie uma aplicação Node.js usando o gerador de aplicações express, que é instalado por defeito com Node.js e npm.

   npx express-generator myExpressApp --view ejs
   

   Se for a primeira vez que instala o gerador, a NPX pede-lhe que concorde com a instalação.

2. Mude para o diretório do aplicativo e instale os pacotes npm.

   cd myExpressApp && npm install
   

3. Atualize as dependências para a versão mais segura.

   npm audit fix --force
   

4. Inicie o servidor de desenvolvimento com informações de depuração.

   DEBUG=myexpressapp:* npm start
   

5. Em um navegador, navegue até http://localhost:3000. Deverá ver algo semelhante ao seguinte:

   

Deparei-me com um problema

Desdobrar no Azure

Antes de continuar, verifique se você tem todos os pré-requisitos instalados e configurados.

Nota

Para que seu aplicativo Node.js seja executado no Azure, ele precisa escutar na porta fornecida pela PORT variável de ambiente. No aplicativo Express gerado, essa variável de ambiente já é usada no script de inicialização bin/www. (Pesquisar process.env.PORT.)

Iniciar sessão no Azure

1. No terminal, verifique se você está no diretório myExpressApp e inicie o Visual Studio Code com o seguinte comando:

   code .
   

2. No Visual Studio Code, na Barra de Atividades, selecione o logotipo do Azure.

3. Certifique-se de que iniciou sessão com a sua conta Azure.

Deparei-me com um problema

Configurar o aplicativo do Serviço de Aplicativo e implantar o código

Implantar no Linux

1. Clique com o botão direito do mouse em Serviços de Aplicativo e selecione Criar novo Aplicativo Web. Um contêiner Linux é usado por padrão.

2. Digite um nome globalmente exclusivo para seu aplicativo Web e selecione Enter. O nome deve ser único em todo o Azure e usar apenas caracteres alfanuméricos (A-Z, a-z, e 0-9) e hífenes (-).

3. Em Selecione uma pilha de runtime, selecione a versão do Node.js que deseja. Recomenda-se o Node 24 LTS.

4. Em Selecione uma camada de preço, selecione Gratuito (F1) e aguarde até que os recursos sejam criados no Azure.

5. No pop-up Sempre implantar o espaço de trabalho "myExpressApp" para <app-name>", selecione Sim. Desde que estejas no mesmo espaço de trabalho, isso garante que o Visual Studio Code seja sempre implementado na mesma aplicação do Serviço de Aplicações.

   Enquanto o Visual Studio Code cria os recursos do Azure e implanta o código, ele mostra notificações de progresso.

6. Após a conclusão da implementação, selecione Navegar no Website na janela de notificações. O navegador deve exibir a página padrão Express.

Implantar no Windows

1. Em Recursos, na subscrição que pretende usar, clique com o botão direito em Serviços de Aplicação e depois selecione Criar Nova Aplicação Web... (Avançado).

2. Selecione o local a partir do qual pretende servir a sua aplicação. Por exemplo, a Europa Ocidental.

3. Selecione Proteger nome de host padrão exclusivo.

4. Selecione Criar um novo grupo de recursos e insira um nome para o grupo de recursos, como AppServiceQS-rg.

5. Digite um nome globalmente exclusivo para seu aplicativo Web e selecione Enter. O nome deve ser único em todo o Azure e usar apenas caracteres alfanuméricos (A-Z, a-z, e 0-9) e hífenes (-).

6. Selecione a versão Node.js desejada. Recomenda-se o Node 24 LTS.

7. Selecione Windows para o sistema operacional.

8. Selecione Criar novo plano do Serviço de Aplicativo, insira um nome para o plano (como AppServiceQS-plan) e selecione F1 Free para o nível de preço.

9. Em Selecione um recurso do Application Insights para seu aplicativo, selecione Ignorar por enquanto. Aguarde até que os recursos sejam criados no Azure.

10. No pop-up Sempre implantar o espaço de trabalho "myExpressApp" para <app-name>", selecione Sim. Desde que estejas no mesmo espaço de trabalho, isso garante que o Visual Studio Code seja sempre implementado na mesma aplicação do Serviço de Aplicações.

    Enquanto o Visual Studio Code cria os recursos do Azure e implanta o código, ele mostra notificações de progresso.

    Nota

    Depois de concluída a implementação, a tua aplicação Azure ainda não corre porque a raiz do teu projeto não tem um ficheiroweb.config . Siga os passos restantes para o gerar automaticamente. Para obter mais informações, consulte Você não tem permissão para exibir este diretório ou página em Configurar um Node.js.

11. Em Recursos no Visual Studio Code, expanda o nó do novo aplicativo, clique com o botão direito do mouse em Configurações do Aplicativo e selecione Adicionar Nova Configuração:

    

12. Digite SCM_DO_BUILD_DURING_DEPLOYMENT para a chave de configuração.

13. Insira true para o valor de definição.

    Esta configuração da aplicação permite a automação da compilação no momento da implementação, que deteta automaticamente o script de início e gera o ficheiroweb.config com ele.

14. No Gerenciador do Serviço de Aplicativo , selecione o ícone Implantar no Aplicativo Web novamente e confirme selecionando Implantar novamente.

15. Aguarde a conclusão da implantação e selecione Procurar site no pop-up de notificação. O navegador deve exibir a página padrão Express.

Deparei-me com um problema

No terminal, certifica-te de que estás no diretório myExpressApp . Substitua <app-name> por um nome globalmente único, depois crie o grupo de recursos, o plano de Serviços de Aplicações e a aplicação. Defina SCM_DO_BUILD_DURING_DEPLOYMENT para que o App Service instale as dependências e construa a aplicação quando implementar o arquivo de origem.

Implantar no Linux

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

Implantar no Windows

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• Se o az comando não for reconhecido, certifique-se de ter a CLI do Azure instalada conforme descrito em Configurar seu ambiente inicial.
• Substitua <app-name> por um nome que seja único em todo o Azure (caracteres válidos são a-z, 0-9, e -).
• O argumento --sku P0v3 seleciona o escalão de preços pago Premium v3. Substitua eastus pela sua região preferida; liste as regiões disponíveis com az account list-locations.
• --is-linux seleciona um plano Linux. Omita isso para um plano Windows, como mostrado no separador Windows.

Crie um arquivo ZIP dos ficheiros em myExpressApp, não do diretório que contém a pasta. No Linux ou macOS, executa zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' a partir do myExpressApp. No Windows, executa Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip no PowerShell a partir de myExpressApp. Depois implemente o arquivo compactado:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

Navegue para https://<app-name>.azurewebsites.net para ver a aplicação.

Criar recursos do Azure

1. Inicie sessão no portal do Azure.

2. Para começar a criar um aplicativo Node.js, navegue até https://portal.azure.com/#create/Microsoft.WebSite.

3. Na guia Noções básicas, em Detalhes do projeto, verifique se a assinatura correta está selecionada e selecione Criar nova para criar um grupo de recursos. Digite myResourceGroup para o nome.

   

4. Em Detalhes da instância, digite um nome globalmente exclusivo para seu aplicativo Web e selecione Código. Selecione Node 24 LTS na pilha de Runtime, um Sistema Operativo e uma Região de onde pretende servir a sua aplicação.

   

5. Em Planos de preços, selecione Criar novo para criar um plano do Serviço de Aplicativo. Digite myAppServicePlan para o nome. Para mudar para o nível Gratuito, selecione F1 Livre na lista Plano de preços .

   

6. Selecione o botão Rever + criar na parte inferior da página.

   

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

8. Após a conclusão da implantação, selecione Ir para o recurso.

   

Obter credenciais FTPS

O Serviço de Aplicativo do Azure dá suporte a dois tipos de credenciais para implantação de FTP/S. Essas credenciais não são as mesmas que suas credenciais de assinatura do Azure. Nesta secção, obtém as credenciais do âmbito da aplicação para usar com o seu cliente FTP.

1. Na página da app App Service, selecione Centro de Implementação em Deployment no menu da barra lateral e depois selecione o separador Credenciais FTPS .

   

2. Abra o seu cliente FTP e navegue até à pasta myExpressApp .

3. A partir do separador de credenciais FTPS , copie o endpoint FTPS, o Nome de Utilizador e a Palavra-passe para o seu cliente FTP.

   

4. Selecione Ligar no seu cliente FTP.

Implantar arquivos com FTPS

1. Copie todos os arquivos e diretórios para o diretório /site/wwwroot no Azure.

   

2. Navegue até o URL do seu aplicativo para verificar se o aplicativo está sendo executado corretamente.

Reimplantar atualizações

Você pode implantar alterações neste aplicativo fazendo edições no Visual Studio Code, salvando seus arquivos e reimplantando em seu aplicativo do Azure. Por exemplo:

1. No projeto de exemplo, abra views/index.ejs e altere

   <p>Welcome to <%= title %></p>
   

   para

   <p>Welcome to Azure</p>
   

2. No Gerenciador do Serviço de Aplicativo , selecione o ícone Implantar no Aplicativo Web novamente e confirme selecionando Implantar novamente.

3. Aguarde a conclusão da implantação e selecione Procurar site no pop-up de notificação. Deves ver que a Welcome to Express mensagem foi alterada para Welcome to Azure.

2. Guarda as tuas alterações, recria ../app.zip dos ficheiros da app conforme descrito em Deploy to Azure, e volta a implementar:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Substitui <app-name> pelo nome que usaste quando criaste a aplicação web.

3. Quando a implantação estiver concluída, atualize a página da Web. Deves ver que a Welcome to Express mensagem foi alterada para Welcome to Azure.

2. Salve as alterações e reimplante o aplicativo usando seu cliente FTP.

3. Quando a implantação estiver concluída, atualize a página da Web. Deves ver que a Welcome to Express mensagem foi alterada para Welcome to Azure.

Transmitir registos

Você pode transmitir a saída de log (chamadas para console.log()) do aplicativo do Azure diretamente na janela de saída do Visual Studio Code.

1. Em Recursos no Visual Studio Code, clique com o botão direito do rato no nó da aplicação e selecione Iniciar Registos de Transmissão.

   

2. Se lhe for pedido para reiniciar a aplicação, selecione Sim. Assim que o aplicativo é reiniciado, a janela de saída do Visual Studio Code abre com uma ligação ao fluxo de logs.

3. Após alguns segundos, a janela de saída mostra uma mensagem indicando que você está conectado ao serviço de streaming de log. Você pode gerar mais atividade de saída atualizando a página no navegador.

   Connecting to log stream...
   2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
   Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
   

Deparei-me com um problema

Você pode acessar os logs do console gerados de dentro do aplicativo e do contêiner no qual ele é executado. Os logs incluem qualquer saída gerada por chamadas para console.log().

Para transmitir logs, execute o comando az webapp log tail:

• Ative o registo primeiro: no Linux, execute az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; no Windows, execute az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

az webapp log tail --resource-group myResourceGroup --name <app-name>

Substitua <app-name> pelo nome que utilizou quando criou a aplicação web.

Atualize o aplicativo no navegador para gerar logs do console, que incluem mensagens descrevendo solicitações HTTP para o aplicativo. Se não surgir uma saída imediatamente, tente novamente após 30 segundos.

Para interromper o streaming de logs a qualquer momento, selecione Ctrl+C no terminal.

Você pode acessar os logs do console gerados de dentro do aplicativo e do contêiner no qual ele é executado. Você pode transmitir a saída de log (chamadas para console.log()) do aplicativo Node.js diretamente no portal do Azure.

1. Na mesma página do Serviço de Aplicações da sua aplicação, use o menu lateral para deslocar até à secção de Monitorização e selecionar Fluxo de Registo.

   

2. Após alguns segundos, a janela de saída mostra uma mensagem indicando que você está conectado ao serviço de streaming de log. Você pode gerar mais atividade de saída atualizando a página no navegador.

   Connecting...
   2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
   Starting Log Tail -n 10 of existing logs ----
   /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
   2021-10-26T21:04:08.614384810Z: [INFO]
   2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
   2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
   2021-10-26T21:04:08.614403210Z: [INFO]
   2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
   2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
   2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
   2021-10-26T21:04:08.614419610Z: [INFO]  fi
   2021-10-26T21:04:08.614423411Z: [INFO]
   2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
   Ending Log Tail of existing logs ---
   

Limpar recursos

Nos passos anteriores, criou os recursos do Azure num grupo de recursos. As etapas neste guia de início rápido colocam todos os recursos neste grupo de recursos. Para limpar, você só precisa remover o grupo de recursos.

1. Na extensão do Azure do Visual Studio Code, na lista Agrupar por , selecione Agrupar por Grupo de Recursos.

2. Na lista Recursos , expanda a assinatura, clique com o botão direito do mouse no grupo de recursos criado anteriormente e selecione Excluir Grupo de Recursos.

   

3. Quando solicitado, confirme sua exclusão inserindo o nome do grupo de recursos que você está excluindo. Depois de confirmares, o grupo de recursos é eliminado e vês uma notificação quando termina.

Deparei-me com um problema

Nos passos anteriores da CLI, criaste recursos do Azure no myResourceGroup.

Se você não espera precisar desses recursos no futuro, exclua o grupo de recursos executando o seguinte comando:

az group delete --name myResourceGroup --no-wait

O --no-wait argumento permite que o comando retorne antes que a operação seja concluída.

Você pode excluir o grupo de recursos, o Serviço de aplicativo e todos os recursos relacionados quando eles não forem mais necessários.

1. Na página de visão geral do App Service, selecione o grupo de recursos que criou na etapa Criar recursos do Azure.

   

2. Na página do grupo de recursos, selecione Excluir grupo de recursos. Confirme o nome do grupo de recursos para concluir a exclusão dos recursos.

   

Conteúdo relacionado

Parabéns, você concluiu com sucesso este início rápido!

Implantar um aplicativo Web Node.js + MongoDB no Azure

Configurar um aplicativo Node.js

  Use um domínio personalizado e um certificado gerido para proteger a sua aplicação

Confira as outras extensões do Azure.

• Azure Cosmos DB
• Funções do Azure
• Pacote de Extensão Docker
• Ferramentas da CLI do Azure
• Ferramentas do Azure Resource Manager

Ou obtenha todos eles ao instalar o pacote de extensões Node Pack for Azure.