Implantar um aplicativo Web Node.js + MongoDB no Azure

O Serviço de Aplicativo do Azure fornece um serviço de hospedagem na Web altamente escalonável e com aplicação automática de patches usando o sistema operacional Linux. Este tutorial mostra como criar um aplicativo Node.js seguro no Serviço de Aplicativo do Azure conectado a um banco de dados do 9Azure Cosmos DB for MongoDB. Quando terminar, você terá um aplicativo Express.js em execução no Serviço de Aplicativo do Azure no Linux.

Este artigo pressupõe que você já esteja familiarizado com o desenvolvimento do Node.js e que o Node e o MongoDB estejam instalados localmente. Você também precisará de uma conta do Azure com uma assinatura ativa. Se você ainda não tem uma conta do Azure, crie-a gratuitamente.

Aplicativo de exemplo

Para acompanhar este tutorial, clone ou baixe o aplicativo de exemplo do repositório https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

Se você quiser executar o aplicativo localmente, faça o seguinte:

• Instale as dependências de pacote executando npm install.
• Copie o arquivo .env.sample para .env e preencha o valor de DATABASE_URL com a URL do MongoDB (por exemplo, mongodb://localhost:27017/).
• Inicie o aplicativo usando npm start.
• Para exibir o aplicativo, navegue até http://localhost:3000.

1. Criar Serviço de Aplicativo e Azure Cosmos DB

Nesta etapa, você criará os recursos do Azure. As etapas usadas neste tutorial criam um conjunto de recursos seguros por padrão que incluem o Serviço de Aplicativo e o Azure Cosmos DB for MongoDB. Para o processo de criação, você especificará:

• O Nome do aplicativo Web. Esse nome é usado como parte do nome DNS para seu aplicativo Web na forma de https://<app-name>.azurewebsites.net.
• A Região para executar o aplicativo fisicamente no mundo.
• A pilha de runtime para o aplicativo. É aqui que você seleciona a versão do nó a ser usada para seu aplicativo.
• O plano de hospedagem para o aplicativo. É o tipo de preço que inclui o conjunto de recursos e a capacidade de colocação em escala do seu aplicativo.
• O Grupo de Recursos para o aplicativo. Um grupo de recursos permite agrupar (em um contêiner lógico) todos os recursos necessários do Azure para o aplicativo.

Entre no portal do Azure e siga estas etapas para criar seus recursos do Serviço de Aplicativo do Azure.

Etapa 1: no portal do Azure:

1. Insira “banco de dados do aplicativo Web” na caixa de pesquisa na parte superior do portal do Azure.
2. Selecione o item Web App + Banco de Dados no título Marketplace. Você também pode navegar diretamente para o assistente de criação.

Etapa 2: na página Criar aplicativo Web + Banco de dados, preencha o formulário conforme mostrado a seguir.

1. Grupo de recursos → Selecione Criar e use o nome msdocs-expressjs-mongodb-tutorial.
2. Região → qualquer região do Azure próxima a você.
3. Nome → msdocs-expressjs-mongodb-XYZ, em que XYZ são três caracteres aleatórios quaisquer. Esse nome deve ser exclusivo no Azure.
4. Pilha de runtime → Nó 16 LTS.
5. Plano de hospedagem → Básico. Quando estiver pronto, você poderá escalar verticalmente até um tipo de preço de produção posteriormente.
6. O Azure Cosmos DB for MongoDB é selecionado por padrão como o mecanismo de banco de dados. O Microsoft Azure Cosmos DB é um banco de dados nativo da nuvem que oferece uma API 100% compatível com MongoDB. Observe o nome do banco de dados gerado para você (<aplicativo-nome-bancodedados>). Você precisará dela mais tarde.
7. Selecione Examinar + criar.
8. Depois de concluir a validação, selecione Criar.

Etapa 3: a implantação leva alguns minutos para ser concluída. Depois que a implantação for concluída, selecione o botão Ir para o recurso. Você é levado diretamente para o aplicativo do Serviço de Aplicativo, mas os seguintes recursos são criados:

• Grupo de recursos → o contêiner para todos os recursos criados.
• Plano do Serviço de Aplicativo → define os recursos de computação para o Serviço de Aplicativo. É criado um plano do Linux na camada Básico.
• Serviço de Aplicativo → Representa seu aplicativo e é executado no plano de Serviço de Aplicativo.
• Rede virtual → Integrada ao aplicativo do Serviço de Aplicativo e isola o tráfego de rede de back-end.
• Ponto de extremidade privado → Ponto de extremidade de acesso para o recurso de banco de dados na rede virtual.
• Adaptador de rede Representa um endereço IP privado para o ponto de extremidade privado.
• Azure Cosmos DB for MongoDB → Acessível apenas por trás do ponto de extremidade privado. Um banco de dados e um usuário são criados para você no servidor.
• Zona DNS privada → habilita a resolução de DNS do servidor do Azure Cosmos DB na rede virtual.

2. Configurar a conectividade do banco de dados

O assistente de criação já gerou o URI do MongoDB para você, mas seu aplicativo precisa de uma variável DATABASE_URL e uma variável DATABASE_NAME. Nesta etapa, você criará as configurações de aplicativo com o formato de que seu aplicativo precisa.

Etapa 1: na página Serviço de Aplicativo, no menu à esquerda, selecione Configuração.

Etapa 2: na guia Configurações do aplicativo na página Configuração, crie uma configuração DATABASE_NAME:

1. Selecione Nova configuração de aplicativo.
2. No campo Nome, insira DATABASE_NAME.
3. No campo Valor, insira o nome do banco de dados gerado automaticamente do assistente de criação, que se parece com o seguinte: msdocs-expressjs-mongodb-XYZ-database.
4. Selecione OK.

Etapa 3:

1. Role até a parte inferior da página e selecione a cadeia de conexão MONGODB_URI. Ela foi gerada pelo assistente de criação.
2. No campo Valor, selecione o botão Copiar e cole o valor em um arquivo de texto para a próxima etapa. Ele está no formato URI da cadeia de conexão do MongoDB.
3. Selecione Cancelar.

Etapa 4:

1. Usando as mesmas etapas na Etapa 2, crie uma configuração de aplicativo chamada DATABASE_URL e defina o valor como aquele copiado da cadeia de conexão MONGODB_URI (ou seja mongodb://...).
2. Na barra de menus na parte superior, selecione Salvar.
3. Quando solicitado, selecione Continuar.

3. Implantar código de exemplo

Nesta etapa, você configurará a implantação do GitHub usando o GitHub Actions. É apenas uma das muitas maneiras de implantar no Serviço de Aplicativo, mas também uma ótima maneira de ter integração contínua em seu processo de implantação. Por padrão, cada git push em seu repositório GitHub iniciará a ação de compilação e implantação.

Etapa 1: em uma nova janela do navegador:

1. Entre em sua conta do GitHub.
2. Navegue até https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
3. Selecione Fork.
4. Selecione Criar fork.

Etapa 2: na página do GitHub, abra o Visual Studio Code no navegador pressionando a tecla ..

Etapa 3: no Visual Studio Code, no navegador, abra config/connection.js no explorer. Na função getConnectionInfo, veja se as configurações do aplicativo que você criou anteriormente para a conexão do MongoDB são usadas (DATABASE_URL e DATABASE_NAME).

Etapa 4: de volta à página Serviço de Aplicativo, no menu à esquerda, selecione Centro de Implantação.

Etapa 5: na página Centro de Implantação:

1. Em Origem, selecione GitHub. Por padrão, o GitHub Actions é selecionado como o provedor de build.
2. Entre em sua conta do GitHub e siga o prompt para autorizar o Azure.
3. Em Organização, selecione sua conta.
4. No Repositório, selecione msdocs-nodejs-mongodb-azure-sample-app.
5. Em Branch, selecione main.
6. No menu superior, selecione Salvar. O Serviço de Aplicativo confirma um arquivo de fluxo de trabalho no repositório GitHub escolhido, no diretório .github/workflows.

Etapa 6: na página Centro de Implantação:

1. Selecione Logs. Uma execução de implantação já foi iniciada.
2. No item de log para a execução da implantação, selecione Compilar/Implantar Logs.

Etapa 7: você será levado para o repositório do GitHub e verá que a ação do GitHub está em execução. O arquivo do fluxo de trabalho define dois estágios separados, compilar e implantar. Aguarde a execução do GitHub para mostrar um status de Concluído. Leva cerca de 15 minutos.

4. Navegar até o aplicativo

Etapa 1: na página Serviço de Aplicativo:

1. No menu esquerdo, selecione Visão geral.
2. Selecione a URL do aplicativo. Você também pode navegar diretamente até https://<app-name>.azurewebsites.net.

Etapa 2: adicione algumas tarefas à lista. Parabéns, você está executando um aplicativo Node.js controlado por dados seguro no Serviço de Aplicativo do Azure.

5. Transmitir logs de diagnóstico

O Serviço de Aplicativo do Azure captura todas as mensagens registradas no console para ajudar você a diagnosticar problemas com seu aplicativo. O aplicativo de exemplo gera mensagens de log do console em cada um de seus pontos de extremidade para demonstrar essa funcionalidade. Por exemplo, o ponto de extremidade get gera uma mensagem sobre o número de tarefas recuperadas do banco de dados e uma mensagem de erro aparece se algo der errado.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Etapa 1: na página Serviço de Aplicativo:

1. No menu à esquerda, selecione Logs do Serviço de Aplicativo.
2. Em Log do aplicativo, selecione Sistema de arquivos.

Etapa 2: no menu esquerdo, selecione Fluxo de log. Você verá os logs do seu aplicativo, incluindo os logs de plataforma e os logs de dentro do contêiner.

6. Inspecionar arquivos implantados usando o Kudu

O Serviço de Aplicativo do Azure fornece um console de diagnóstico baseado na Web chamado Kudu, que permite examinar o ambiente de hospedagem do servidor para seu aplicativo Web. Usando o Kudu, você pode exibir os arquivos implantados no Azure, examinar o histórico de implantação do aplicativo e até mesmo abrir uma sessão SSH no ambiente de hospedagem.

Etapa 1: na página Serviço de Aplicativo:

1. No menu à esquerda, selecione Ferramentas Avançadas.
2. Selecione Ir. Você também pode navegar diretamente até https://<app-name>.scm.azurewebsites.net.

Etapa 2: na página Kudu, selecione Implantações.

Se você implantou o código no Serviço de Aplicativo usando Git ou implantação zip, verá um histórico de implantações do seu aplicativo Web.

Etapa 3: volte para a página inicial do Kudu e selecione Site wwwroot.

Você pode ver a estrutura de pastas implantada e clicar para navegar e exibir os arquivos.

7. Limpar os recursos

Quando tiver terminado, você poderá excluir todos os recursos de sua assinatura do Azure ao excluir o grupo de recursos.

Etapa 1: na barra de pesquisa, na parte superior do portal do Azure:

1. Insira o nome do grupo de recursos.
2. Selecione o grupo de recursos.

Etapa 2: na página Grupo de recursos, selecione Excluir grupo de recursos.

Etapa 3:

1. Insira o nome do grupo de recursos para confirmar a exclusão.
2. Selecione Excluir.

:

Perguntas frequentes

• Quanto custa essa configuração?
• Como se conectar ao servidor do Azure Cosmos DB que está protegido por trás da rede virtual com outras ferramentas?
• Como o desenvolvimento de aplicativos local funciona com o GitHub Actions?
• Por que a implantação do GitHub Actions é tão lenta?

Quanto custa essa configuração?

O preço dos recursos de criação é o seguinte:

• O plano do Serviço de Aplicativo é criado na camada Básica e pode ser ampliado ou reduzido. Confira Preço do Serviço de Aplicativo.
• O servidor do Azure Cosmos DB é criado em uma única região e pode ser distribuído para outras regiões. Veja Preços do Microsoft Azure Cosmos DB.
• A rede virtual não incorre em cobrança, a menos que você configure uma funcionalidade extra, como emparelhamento. Consulte os Preços da Rede Virtual do Azure.
• A zona DNS privada incorre em uma pequena cobrança. Consulte os Preços do DNS do Azure.

Como se conectar ao servidor do Azure Cosmos DB que está protegido por trás da rede virtual com outras ferramentas?

• Para acesso básico de uma ferramenta de linha comando, você pode executar mongosh no terminal SSH do aplicativo. O contêiner do aplicativo não vem com mongosh, portanto, você deve instalá-lo manualmente. Lembre-se de que o cliente instalado não persiste entre as reinicializações do aplicativo.
• Para se conectar de um cliente da GUI MongoDB, seu computador deve estar dentro da rede virtual. Por exemplo, pode ser uma VM do Azure conectada a uma das sub-redes ou um computador em uma rede local que tenha uma conexão VPN site a site com a rede virtual do Azure.
• Para se conectar do shell do MongoDB na página de gerenciamento do Azure Cosmos DB no portal, seu computador também deve estar dentro da rede virtual. Em vez disso, você pode abrir o firewall do servidor do Azure Cosmos DB para o endereço IP de seu computador local, mas isso aumenta a superfície de ataque da sua configuração.

Como o desenvolvimento de aplicativos local funciona com o GitHub Actions?

Use o arquivo de fluxo de trabalho gerado automaticamente do Serviço de Aplicativo como exemplo, cada git push inicia uma nova execução de build e implantação. Em um clone local do repositório do GitHub, você faz as atualizações desejadas efetuarem push para o GitHub. Por exemplo:

git add .
git commit -m "<some-message>"
git push origin main

Por que a implantação do GitHub Actions é tão lenta?

O arquivo de fluxo de trabalho gerado automaticamente do Serviço de Aplicativo define a execução de dois trabalhos, compilar e implantar. Como cada trabalho é executado em seu próprio ambiente limpo, o arquivo de fluxo de trabalho garante que o trabalho deploy tenha acesso aos arquivos do trabalho build:

• No final do trabalhobuild, carregue arquivos como artefatos.
• No início do trabalho deploy, baixe os artefatos.

A maior parte do tempo gasto pelo processo de dois trabalhos é carregando e baixando artefatos. Se desejar, você pode simplificar o arquivo de fluxo de trabalho combinando os dois trabalhos em um, o que elimina a necessidade das etapas de carregar e baixar.

Próximas etapas

JavaScript no Centro de Desenvolvedores do Azure

Configurar um aplicativo Node.js no Serviço de Aplicativo

 Proteger com domínio e certificado personalizados