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 Azure App Service. O Serviço de Aplicativo suporta várias versões do Node.js no Linux e no Windows.

Este guia de início rápido configura uma aplicação no App Service na camada Gratuita e não acarreta qualquer custo para a sua subscrição do Azure.

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 Azure CLI, 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, verifique se você está no diretório myExpressApp e implante o código em sua pasta local (myExpressApp) usando o comando az webapp up :

Implantar no Linux

az webapp up --sku F1 --name <app-name>

Implantar no Windows

az webapp up --sku F1 --name <app-name> --os-type Windows

• 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 exclusivo em todo o Azure. (Os 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 aplicativo.
• O --sku F1 argumento cria o aplicativo Web no nível de preço gratuito, que não incorre em nenhum custo.
• Opcionalmente, você pode incluir o argumento --location <location-name> onde <location_name> é uma região do Azure disponível. Você pode recuperar uma lista de regiões permitidas para sua conta do Azure executando o az account list-locations comando.
• O comando cria um aplicativo Linux para Node.js por padrão. Para criar uma aplicação do Windows, em vez disso, use o argumento --os-type.
• Se vir o erro "Não foi possível detetar automaticamente o stack de runtime da sua aplicação", assegure-se de que executa o comando na diretoria myExpressApp (Veja Solução de problemas de deteção automática com az webapp up.)

O comando pode levar alguns minutos para ser concluído. Durante a execução, ele fornece mensagens sobre como criar o grupo de recursos, o plano do Serviço de Aplicações e o recurso da aplicação, configurar o registo de logs e efetuar a implementação Zip. Em seguida, ele retorna uma mensagem que inclui a URL do aplicativo, que é a URL do aplicativo no Azure.

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at <URL>
{
  "URL": "<URL>",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|24",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "/home/cephas/myExpressApp"
}

Nota

O comando az webapp up executa as seguintes ações:

• Crie um grupo de recursos padrão.

• Crie um plano padrão do Serviço de Aplicativo.

• Crie um aplicativo com o nome especificado.

• Fazer o deploy em zip de todos os ficheiros do diretório de trabalho atual, com automação de construção ativada.

• Armazene os parâmetros em cache localmente no arquivo .azure/config para que você não precise especificá-los novamente ao implantar posteriormente com az webapp up ou outros az webapp comandos da pasta do projeto. Os valores armazenados em cache são usados automaticamente por padrã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. Salve suas alterações e reimplante o aplicativo usando o comando az webapp up novamente sem argumentos para Linux. Adicionar --os-type Windows para Windows:

   az webapp up
   

   Esse comando usa valores que são armazenados em cache localmente no arquivo .azure/config , como o nome do aplicativo, o grupo de recursos e o plano do Serviço de Aplicativo.

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:

az webapp log tail

O comando usa o nome do grupo de recursos armazenado em cache no arquivo .azure/config .

Você também pode incluir o parâmetro --logs no comando az webapp up para abrir automaticamente o fluxo de log na implantação.

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, criou os recursos do Azure num grupo de recursos. O grupo de recursos tem um nome como appsvc_rg_Linux_CentralUS, dependendo da tua localização.

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

az group delete --no-wait

O comando usa o nome do grupo de recursos armazenado em cache no arquivo .azure/config .

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.