Implementar uma aplicação web Node.js + MongoDB para a Azure

Serviço de Aplicações do Azure fornece um serviço de hospedagem web altamente escalável e auto-remendado utilizando o sistema operativo Linux. Este tutorial mostra como criar uma aplicação de Node.js segura em Serviço de Aplicações do Azure que está ligada a uma base de dados mongoDB (usando Azure Cosmos DB com MongoDB API). Quando terminar, terá uma aplicação Express.js em execução no Serviço de Aplicações do Azure em Linux.

Um diagrama que mostra como a aplicação Express.js será implementada para Serviço de Aplicações do Azure e os dados do MongoDB serão alojados dentro do Azure Cosmos DB.

Este artigo assume que já está familiarizado com Node.js desenvolvimento e tem Nó e MongoDB instalados localmente. Também vai precisar de uma conta Azure com uma subscrição ativa. Se não tiver uma conta Azure, pode criar uma de graça.

Aplicação de exemplo

Para acompanhar este tutorial, clone ou descarregue a aplicação da amostra a partir 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 pretender executar a aplicação localmente, faça o seguinte:

  • Instale as dependências do pacote em funcionamento npm install.
  • Copie o .env.sample ficheiro e .env povoe o valor DATABASE_URL com o seu URL MongoDB (por exemplo , mongodb://localhost:27017/).
  • Inicie a aplicação utilizando npm start.
  • Para ver a aplicação, navegue para http://localhost:3000.

1. Criar Serviço de Aplicações e Cosmos DB

Neste passo, cria-se os recursos do Azure. Os passos usados neste tutorial criam um conjunto de recursos seguros por defeito que incluem Serviço de Aplicações e Azure Cosmos DB API para a MongoDB que é. Para o processo de criação, irá especificar:

  • O Nome para a aplicação web. É o nome usado como parte do nome DNS para o seu webapp na forma de https://<app-name>.azurewebsites.net.
  • A Região para executar a app fisicamente no mundo.
  • A pilha runtime para a aplicação. É onde seleciona a versão do Nó para usar para a sua aplicação.
  • O plano de hospedagem para a aplicação. É o nível de preços que inclui o conjunto de funcionalidades e capacidade de escala para a sua aplicação.
  • O Grupo de Recursos para a aplicação. Um grupo de recursos permite-lhe agrupar (num recipiente lógico) todos os recursos Azure necessários para a aplicação.

Inscreva-se no portal do Azure e siga estes passos para criar os seus recursos Serviço de Aplicações do Azure.

Passo 1. No portal do Azure:

  1. Introduza a "base de dados de aplicações web" na barra de pesquisa no topo da portal do Azure.
  2. Selecione o item marcado web app + base de dados no título Marketplace . Também pode navegar diretamente para o assistente de criação .

Uma imagem mostrando como usar a caixa de pesquisa na barra de ferramentas superior para encontrar o assistente de criação Web App + Database.

Passo 2. Na página 'Criar Aplicação Web + Base de dados' , preencha o formulário da seguinte forma.

  1. Grupo de Recursos → Select Criar novos e usar um nome de msdocs-expressjs-mongodb-tutorial.
  2. Região → região de Azure perto de si.
  3. Nomemsdocs-expressjs-mongodb-XYZ onde XYZ é qualquer três caracteres aleatórios. Este nome tem de ser exclusivo em todo o Azure.
  4. Pilha de tempo de execuçãoNó 16 LTS.
  5. Plano de hospedagemBásico. Quando estiver pronto, pode subir para um nível de preços de produção mais tarde.
  6. Cosmos DB API para MongoDB é selecionado por padrão como o motor de base de dados. Azure Cosmos DB é uma base de dados nativa em nuvem que oferece uma API compatível com o MongoDB a 100%. Note o nome da base de dados que é gerado para si (<app-name-database>). Precisará dela mais tarde.
  7. Selecione Rever + criar.
  8. Após a validação concluída, selecione Criar.

Uma imagem que mostra como configurar uma nova aplicação e base de dados no assistente de base de dados Web App +.

Passo 3. A implantação leva alguns minutos para ser concluída. Assim que a implementação estiver concluída, selecione o botão Go para o botão de recursos . Você é levado diretamente para a app Serviço de Aplicações, mas os seguintes recursos são criados:

  • Grupo de recursos → O contentor para todos os recursos criados.
  • Serviço de Aplicações plano → Define os recursos de computação para Serviço de Aplicações. É criado um plano Linux no nível básico .
  • Serviço de Aplicações → Representa a sua app e funciona no plano Serviço de Aplicações.
  • → de rede virtual Integrado com a aplicação Serviço de Aplicações e isola o tráfego de rede back-end.
  • Ponto final privado → Access para o recurso de base de dados na rede virtual.
  • A interface de → representa um endereço IP privado para o ponto final privado.
  • Cosmos DB API para MongoDB → Acessível apenas por trás do ponto final privado. Uma base de dados e um utilizador são criados para si no servidor.
  • DNS Privado zona → permite a resolução de DNS do servidor Cosmos DB na rede virtual.

Uma imagem que mostra o processo de implantação concluído.

2. Configurar a conectividade da base de dados

O assistente de criação já gerou o MongoDB URI para si, mas a sua aplicação precisa de uma DATABASE_URL variável e uma DATABASE_NAME variável. Neste passo, cria definições de aplicações com o formato de que a sua aplicação necessita.

Passo 1. Na página Serviço de Aplicações, no menu esquerdo, selecione Configuração.

Uma imagem mostrando como abrir a página de configuração em Serviço de Aplicações.

Passo 2. No separador definições de aplicação da página De configuração , crie uma DATABASE_NAME definição:

  1. Selecione Nova definição da aplicação.
  2. No campo Nome , introduza DATABASE_NAME.
  3. No campo Valor , introduza o nome de base de dados gerado automaticamente a partir do assistente de criação, que se parece com a base de dados msdocs-expressjs-mongodb-XYZ.
  4. Selecione OK.

Uma imagem mostrando como ver a cadeia de ligação autogerada.

Passo 3.

  1. Percorra a parte inferior da página e selecione o fio de ligação MONGODB_URI. Foi gerado pelo feiticeiro da criação.
  2. No campo Valor , selecione o botão Copiar e cole o valor num ficheiro de texto para o passo seguinte. Está no formato URI da cadeia de ligação MongoDB.
  3. Selecione Cancelar.

Uma imagem mostrando como criar uma configuração de aplicação.

Passo 4.

  1. Utilizando os mesmos passos no Passo 2, crie uma definição de aplicação com o nome DATABASE_URL e defina o valor para o que copiou a MONGODB_URI partir da cadeia de ligação (ou seja, mongodb://...).
  2. Na barra de menus no topo, selecione Save.
  3. Quando solicitado, selecione Continue.

Uma imagem que mostra como guardar as definições na página de configuração.

3. Implementar código de amostra

Neste passo, irá configurar a implementação do GitHub usando GitHub Actions. É apenas uma das muitas formas de implantar para Serviço de Aplicações, mas também uma ótima maneira de ter uma integração contínua no seu processo de implementação. Por defeito, cada um no git push seu repositório GitHub iniciará a construção e implementará a ação.

Passo 1. Numa nova janela do navegador:

  1. Inscreva-se na sua conta GitHub.
  2. Navegue para https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
  3. Selecione Fork.
  4. Selecione Criar garfo.

Uma imagem mostrando como criar um garfo do repositório GitHub da amostra.

Passo 2. Na página do GitHub, abra o Código do Estúdio Visual no navegador premindo a . chave.

Uma imagem mostrando como abrir a experiência do navegador Visual Studio Code no GitHub.

Passo 3. No Código do Estúdio Visual no navegador, abra o config/connection.js no explorador. Na função getConnectionInfo , consulte que as definições de aplicação criadas anteriormente para a ligação MongoDB são utilizadas (DATABASE_URL e DATABASE_NAME.

Uma imagem mostrando Código de Estúdio Visual no navegador e um ficheiro aberto.

Passo 4: De volta à página Serviço de Aplicações, no menu esquerdo, selecione Centro de Implementação.

Uma imagem mostrando como abrir o centro de implantação em Serviço de Aplicações.

Passo 5. Na página do Centro de Implantação:

  1. Em Source, selecione GitHub. Por predefinição, GitHub Actions é selecionada como fornecedor de construção.
  2. Inscreva-se na sua conta GitHub e siga o pedido para autorizar o Azure.
  3. Na Organização, selecione a sua conta.
  4. No Repositório, selecione msdocs-nodejs-mongodb-azure-sample-app.
  5. Em Branch, selecione principal.
  6. No menu superior, selecione Save. Serviço de Aplicações compromete um ficheiro de fluxo de trabalho no repositório gitHub escolhido, no .github/workflows diretório.

Uma imagem que mostra como configurar CI/CD utilizando GitHub Actions.

Passo 6. Na página do Centro de Implantação:

  1. Selecionar Registos. Uma execução já começou.
  2. No item de registo para a execução da implementação, selecione Registos de Construção/Implantação.

Uma imagem mostrando como abrir registos de implantação no centro de implantação.

Passo 7. Foste levado para o teu repositório do GitHub e vês que a ação do GitHub está a decorrer. O ficheiro workflow define duas fases distintas, construir e implantar. Aguarde que o GitHub corra para mostrar o estado de Completa. Leva cerca de 15 minutos.

Uma imagem mostrando uma corrida do GitHub em andamento.

4. Navegue pela aplicação

Passo 1. Na página Serviço de Aplicações:

  1. A partir do menu à esquerda, selecione Overview.
  2. Selecione o URL da sua aplicação. Também pode navegar diretamente para https://<app-name>.azurewebsites.net.

Uma imagem mostrando como lançar uma Serviço de Aplicações do portal do Azure.

Passo 2. Adicione algumas tarefas à lista. Parabéns, estás a executar uma aplicação de Node.js baseada em dados em Serviço de Aplicações do Azure.

Uma imagem da aplicação Express.js em execução em Serviço de Aplicações.

5. Fluxo de registos de diagnóstico

Serviço de Aplicações do Azure captura todas as mensagens registadas na consola para o ajudar a diagnosticar problemas com a sua aplicação. A aplicação de amostra sai de mensagens de registo de consola em cada um dos seus pontos finais para demonstrar esta capacidade. Por exemplo, o get ponto final produz uma mensagem sobre o número de tarefas obtidas na base de dados e uma mensagem de erro aparece se algo correr mal.

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.');
    });
});

Passo 1. Na página Serviço de Aplicações:

  1. A partir do menu esquerdo, selecione Serviço de Aplicações registos.
  2. No registo de aplicações, selecione O Sistema de Ficheiros.

Uma imagem que mostra como permitir registos nativos em Serviço de Aplicações no portal do Azure.

Passo 2. A partir do menu esquerdo, selecione 'Registar'. Você vê os registos da sua aplicação, incluindo registos de plataforma e registos de dentro do recipiente.

Uma imagem mostrando como ver o fluxo de registo no portal do Azure.

6. Inspecione ficheiros implantados utilizando o Kudu

Serviço de Aplicações do Azure fornece uma consola de diagnóstico baseada na Web chamada Kudu que permite examinar o ambiente de hospedagem do servidor para a sua aplicação web. Utilizando o Kudu, pode visualizar os ficheiros implantados no Azure, rever o histórico de implementação da aplicação e até abrir uma sessão de SSH no ambiente de hospedagem.

Passo 1. Na página Serviço de Aplicações:

  1. A partir do menu esquerdo, selecione Advanced Tools.
  2. Selecione Go. Também pode navegar diretamente para https://<app-name>.scm.azurewebsites.net.

Uma imagem mostrando como navegar para a página de kudu Serviço de Aplicações.

Passo 2. Na página de Kudu, selecione Implementações.

Uma imagem da página principal na aplicação Kudu SCM mostrando as diferentes informações disponíveis sobre o ambiente de hospedagem.

Se tiver implementado código para Serviço de Aplicações usando Git ou zip, verá um histórico de implementações da sua aplicação web.

Uma imagem mostrando o histórico de implementação de uma aplicação Serviço de Aplicações no formato JSON.

Passo 3. Voltar à página inicial do Kudu e selecione site wwwroot.

Uma imagem mostrando o site wwwroot selecionado.

Pode ver a estrutura da pasta implantada e clicar para navegar e ver os ficheiros.

Uma imagem de ficheiros implantados no diretório wwwroot.

7. Limpar recursos

Quando terminar, pode eliminar todos os recursos da sua subscrição Azure, eliminando o grupo de recursos.

Passo 1. Na barra de pesquisa no topo da portal do Azure:

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

Uma imagem mostrando como procurar e navegar para um grupo de recursos no portal do Azure.

Passo 2. Na página do grupo de recursos, selecione Eliminar o grupo de recursos.

Uma imagem que mostra a localização do botão Delete Resource Group no portal do Azure.

Passo 3.

  1. Insira o nome do grupo de recursos para confirmar a sua eliminação.
  2. Selecione Eliminar.

Uma imagem do diálogo de confirmação para a eliminação de um grupo de recursos no portal do Azure:

Perguntas mais frequentes

Quanto custa esta configuração?

Os preços dos recursos de criação são os seguintes:

Como devo proceder para ligar-se ao servidor DB cosmos que está protegido por trás da rede virtual com outras ferramentas?

  • Para acesso básico a partir de uma ferramenta de linha commmand, pode correr mongosh a partir do terminal SSH da aplicação. O recipiente da aplicação não vem com mongosh, por isso deve instalá-lo manualmente. Lembre-se que o cliente instalado não persiste em todo o reinício da aplicação.
  • Para se ligar a partir de um cliente MONGODB GUI, a sua máquina deve estar dentro da rede virtual. Por exemplo, pode ser um Azure VM que está ligado a uma das sub-redes, ou uma máquina numa rede no local que tem uma ligação VPN site-to-site com a rede virtual Azure.
  • Para se ligar a partir da concha de Mongo a partir da página de gestão do Cosmos DB no portal, a sua máquina também deve estar dentro da rede virtual. Em vez disso, pode abrir a firewall do servidor Cosmos DB para o endereço IP da sua máquina local, mas aumenta a superfície de ataque para a sua configuração.

Como funciona o desenvolvimento de aplicações locais com GitHub Actions?

Tome o ficheiro de fluxo de trabalho autogerado a partir de Serviço de Aplicações como exemplo, cada git push um inicia uma nova construção e execução de implementação. A partir de um clone local do repositório GitHub, você faz as atualizações desejadas empurrá-lo para GitHub. Por exemplo:

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

Porque é que a GitHub Actions é tão lenta?

O ficheiro de fluxo de trabalho autogerado de Serviço de Aplicações define a construção e depois implantação, duas tarefas executadas. Como cada trabalho funciona no seu próprio ambiente limpo, o ficheiro de fluxo de trabalho garante que o deploy trabalho tenha acesso aos ficheiros a build partir do trabalho:

A maior parte do tempo tomado pelo processo de dois trabalhos é gasto a carregar e a descarregar artefactos. Se quiser, pode simplificar o ficheiro de fluxo de trabalho combinando os dois empregos num só, o que elimina a necessidade de carregar e descarregar etapas.

Passos seguintes