Implantar um aplicativo Web do Node.js no Azure

Neste início rápido, você aprenderá a criar e implantar seu primeiro aplicativo Web Node.js (Express) no Serviço de Aplicativo do Azure. O Serviço de Aplicativo é compatível com várias versões do Node.js no Linux e no Windows.

As etapas da CLI do Azure nesse quickstart usam o nível Premium v3 pago. Os passos do Visual Studio Code e do portal do Azure mostram como usar a camada gratuita.

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 o seu ambiente inicial

• Tenha uma conta do Azure com uma assinatura ativa. Se você não tiver uma, crie uma conta gratuita.
• Instale o LTS do Node.js. Execute o comando node --version para verificar se o Node.js está instalado.
• Instale o Visual Studio Code.
• Instale a extensão do Serviço de Aplicativo do Azure para Visual Studio Code.

• Tenha uma conta do Azure com uma assinatura ativa. Se você não tiver uma, crie uma conta gratuita.
• Instale o LTS do Node.js. Execute o comando node --version para verificar se o Node.js está instalado.
• Instale a CLI do Azure, que você pode usar para executar comandos em um shell para criar e configurar recursos do Azure.

• Tenha uma conta do Azure com uma assinatura ativa. Se você não tiver uma, crie uma conta gratuita.
• Instale o LTS do Node.js. Execute o comando node --version para verificar se o Node.js está instalado.
• Tenha um cliente FTP, como o FileZilla, para transferir arquivos para o Serviço de Aplicativo.

Crie seu aplicativo Node.js

Nesta etapa, você vai criar um aplicativo Node.js básico e garante que ele é executado no computador.

Dica

Se você já concluiu o tutorialNode.js, pode pular para implantar no Azure.

1. Crie um aplicativo Node.js usando o gerador de aplicativo expresso, que é instalado por padrão com Node.js e npm.

   npx express-generator myExpressApp --view ejs
   

   Se esta for a primeira vez que você instala o gerador, o npx solicitará que você 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. Você deverá ver algo como:

   

Encontrei um problema

Implantar no Azure

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

Observação

Para executar o aplicativo Node.js no Azure, ele precisa escutar na porta fornecida pela variável de ambiente PORT. No aplicativo Expresso gerado, essa variável de ambiente já é usada no script de inicialização bin/www. (Pesquise por process.env.PORT).

Entrar no Azure

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

   code .
   

2. No Visual Studio Code, na Barra de Atividade, selecione no logotipo do Azure.

3. Verifique se você está conectado com sua conta do Azure.

Encontrei 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 nos Serviços de Aplicativos e selecione Criar novo Aplicativo Web. Um contêiner do Linux será usado por padrão.

2. Digite um nome global exclusivo para o aplicativo Web e selecione Enter. O nome deve ser exclusivo em todo o Azure e usar apenas caracteres alfanuméricos (A-Z, a-z, e 0-9) e hifens (-).

3. Na opção Selecionar uma pilha de runtime, selecione a versão do Node.js de sua preferência. Node 24 LTS é recomendado.

4. Em Selecionar um tipo de preço, escolha Gratuito (F1) e aguarde até que os recursos sejam criados no Azure.

5. No pop-up Sempre implantar o workspace "myExpressApp" em <app-name>", selecioneSim. Fazendo isso, você garante que, enquanto estiver no mesmo workspace, o Visual Studio Code executará uma implantação no mesmo aplicativo do Serviço de Aplicativo todas as vezes.

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

6. Após a conclusão da implantação, selecione Navegar no Website no pop-up de notificação. O navegador exibirá a página padrão do Expresso.

Implantar no Windows

1. Em Recursos, na assinatura que você deseja usar, clique com o botão direito do mouse nos Serviços de Aplicativo e selecione Criar Novo Aplicativo Web... (Avançado).

2. Selecione o local do qual você deseja atender seu aplicativo. Por exemplo, Oeste da Europa.

3. Selecione Nome de host padrão exclusivo do Secure.

4. Selecione Criar um grupo de recursos e, em seguida, 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 exclusivo em todo o Azure e usar apenas caracteres alfanuméricos (A-Z, a-z, e 0-9) e hifens (-).

6. Selecione a versão do Node.js de sua preferência. Node 24 LTS é recomendado.

7. Para o sistema operacional, selecione Windows.

8. Selecione Criar plano do Serviço de Aplicativo, insira um nome para o plano (como AppServiceQS-plan), depois selecione Gratuito F1 como o tipo de preço.

9. Para selecionar 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 workspace "myExpressApp" em <app-name>", selecioneSim. Fazendo isso, você garante que, enquanto estiver no mesmo workspace, o Visual Studio Code executará uma implantação no mesmo aplicativo do Serviço de Aplicativo todas as vezes.

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

    Observação

    Após a conclusão da implantação, seu aplicativo do Azure ainda não será executado porque a raiz do projeto não tem um arquivo web.config . Siga as etapas restantes para gerá-lo automaticamente. Para obter mais informações, confira a seção Você não tem permissão para ver este diretório ou página no artigo 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. Insira SCM_DO_BUILD_DURING_DEPLOYMENT para a chave de configuração.

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

    Essa configuração de aplicativo permite a automação de build no momento da implantação, que detecta automaticamente o script inicial e gera o arquivo web.config com ele.

14. No explorador Serviço de Aplicativo, selecione novamente o ícone Implantar no Aplicativo Web, depois confirme mais uma vez selecionando Implantar.

15. Aguarde a conclusão da implantação e, em seguida, selecione em Procurar no site no pop-up de notificação. O navegador exibirá a página padrão do Expresso.

Encontrei um problema

No terminal, certifique-se de estar no diretório myExpressApp . Substitua <app-name> por um nome globalmente único, depois crie o grupo de recursos, o plano de Serviços de Aplicativos e o app. Configure SCM_DO_BUILD_DURING_DEPLOYMENT para que o App Service instale as dependências e construa o app quando você implantar o arquivo de código-fonte.

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 comando az não for reconhecido, verifique se você tem 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 --sku P0v3 argumento seleciona a faixa de preço paga 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 em um plano Windows, como mostrado na aba Windows.

Crie um arquivo ZIP dos arquivos em myExpressApp, não do diretório pai. No Linux ou macOS, execute zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' de myExpressApp. No Windows, execute Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip no PowerShell, na pasta myExpressApp. Depois, implante 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 o aplicativo.

Criar recursos do Azure

1. Entre 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 Básico, em Detalhes do Projeto, verifique se a assinatura correta está selecionada e, em seguida, selecione Criar novo para criar um grupo de recursos. Digite myResourceGroup para o nome.

   

4. Em Detalhes da instância, digite um nome global exclusivo para o aplicativo Web e selecione Código. Selecione Node 24 LTS na Pilha de runtime, escolha um Sistema Operacional e uma Região em que você deseja disponibilizar seu aplicativo.

   

5. Em Planos de preços, selecione Criar novo para criar um plano do Serviço de Aplicativo. Digite myAppServicePlan para o nome. Para alterar para a camada Gratuita, selecione F1 Gratuito na lista de planos de preços .

   

6. Selecione o botão Examinar + 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.

   

Obtenha as credenciais do FTPS

O Serviço de Aplicativo do Azure dá suporte a dois tipos de credenciais para implantação por FTP/S. Essas credenciais não são iguais às suas credenciais de assinatura do Azure. Nesta seção, você obtém as credenciais de escopo do aplicativo a serem usadas com seu cliente FTP.

1. Na página do aplicativo do Serviço de Aplicativo, selecione Centro de Implantação no menu da barra lateral em Implantação e, em seguida, selecione a guia Credenciais do FTPS.

   

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

3. Na guia Credenciais FTPS, copie o Ponto de extremidade FTPS, o Nome de usuário e a Senha para o cliente FTP.

   

4. Selecione Conectar em 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é a URL do aplicativo para verificar se ele está sendo executado corretamente.

Reimplantar atualizações

É possível implantar alterações nesse aplicativo executando edições no Visual Studio Code, salvando os arquivos, depois reimplantando no aplicativo do Azure. Por exemplo:

1. No projeto de exemplo, abra views/index.ejs e faça uma alteração

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

   para

   <p>Welcome to Azure</p>
   

2. No explorador Serviço de Aplicativo, selecione novamente o ícone Implantar no Aplicativo Web, depois confirme mais uma vez selecionando Implantar.

3. Aguarde a conclusão da implantação, depois clique em Procurar no site no pop-up de notificação. Você deve ver que a Welcome to Express mensagem foi alterada para Welcome to Azure.

2. Salve suas alterações, recrie ../app.zip a partir dos arquivos do aplicativo conforme descrito em Deploy to Azure e redeploye:

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

   Substitua <app-name> pelo nome que você usou ao criar o aplicativo web.

3. Depois que a implantação for concluída, atualize a página da Web. Você deve ver que a Welcome to Express mensagem foi alterada para Welcome to Azure.

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

3. Depois que a implantação for concluída, atualize a página da Web. Você deve ver que a Welcome to Express mensagem foi alterada para Welcome to Azure.

Transmitir logs

É possível transmitir por streaming a saída do log (chamadas ao console.log()) do aplicativo Azure diretamente na janela de saída do Visual Studio Code.

1. Em Recursos no Visual Studio Code, clique com o botão direito sobre o nó da aplicação e selecione Iniciar Streaming de Logs.

   

2. Caso receba uma solicitação para reiniciar o aplicativo, selecione Sim. Quando o aplicativo reiniciar, a janela de saída do Visual Studio Code será aberta exibindo uma conexão com o fluxo de log.

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 atividades 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).
   

Encontrei 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 todas as saídas geradas por chamadas ao console.log().

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

• Ative o registro em log 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 você usou ao criar o aplicativo web.

Atualize o aplicativo no navegador para gerar logs de console, que incluem mensagens que descrevem solicitações HTTP para o aplicativo. Se nenhuma saída for exibida imediatamente, tente novamente em 30 segundos.

Para interromper o streaming de log 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. É possível transmitir por streaming a saída do log (chamadas ao console.log()) do aplicativo Node.js diretamente no portal do Azure.

1. Na mesma página do Serviço de Aplicativo para seu aplicativo, use o menu da barra lateral para rolar até a seção Monitoramento e selecione Fluxo de log.

   

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 atividades 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 os recursos

Nas etapas anteriores, você criou os recursos do Azure em um grupo de recursos. As etapas deste guia de início rápido inserem todos os recursos nesse grupo de recursos. Basta remover o grupo de recursos para limpar.

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

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

   

3. Quando solicitado, confirme a exclusão inserindo o nome do grupo de recursos que você está excluindo. Depois de confirmar, o grupo de recursos será excluído e você verá uma notificação quando terminar.

Encontrei um problema

Nas etapas anteriores da CLI, você criou recursos do Azure no myResourceGroup.

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

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

O argumento --no-wait permite que o comando seja retornado 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 não forem mais necessários.

1. Na página Visão geral do Serviço de Aplicativo, selecione grupo de recursos que você criou na etapa Criar recursos do Azure.

   

2. Na página Grupo de recursos, selecione Excluir grupo de recursos. Confirme o nome do grupo de recursos para terminar de excluir os recursos.

   

Conteúdo relacionado

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

Implantar um aplicativo Web Node.js + MongoDB no Azure

Configurar um aplicativo Node.js

  Usar um domínio personalizado e um certificado gerenciado para proteger seu aplicativo

Confira as outras extensões do Azure.

• Azure Cosmos DB
• Azure Functions
• Pacote de Extensão do Docker
• Ferramentas da CLI do Azure
• Ferramentas do Azure Resource Manager

Ou obtenha todos instalando o pacote de extensão Node Pack for Azure.