Como desenvolver um aplicativo web com funções sem servidor da Netlify e MongoDB
Avalie esse Tutorial
Como mencionei em um tutorial anteriordo,sou um grande fá da Netlify e dos serviços que ela oferece aos desenvolvedores - meu serviço favorito é a hospedagem de sites estáticos e as funções sem servidor. Ao combinar os dois, você pode implantar um site da web ou aplicativo da web complexos com um back-end, sem nunca se preocupar com infraestrutura ou design de API potencialmente complexo.
Então, como isso funciona com um banco de dados como o MongoDB?
Se você já se interessou por funções sem servidor antes, deve estar ciente de que elas nem sempre estão disponíveis para consumo. Muitas funções sem servidor existem por um período de tempo definido e são desligadas até serem executadas novamente. Com isso em mente, a conexão com um banco de dados pode nem sempre estar disponível como estaria em um aplicativo criado com o Express Framework, por exemplo. Você pode estabelecer uma conexão toda vez que uma função é chamada, mas corre o risco de muitas conexões, o que pode sobrecarregar seu banco de dados.
Então, o que você faz?
Neste tutorial, vamos ver como criar e implantar um aplicativo web simples usando funções da Netlify e MongoDB Atlas. Para este tutorial específico, usaremos o driver Node.js para MongoDB, mas a Netlify e o MongoDB também suportam o uso de outras linguagens e drivers.
Há algumas coisas que devem estar prontas antes de iniciar este tutorial.
- O Node.js 15+ deve estar instalado.
- Um clusterdo MongoDB Atlas deve ser distribuído e configurado com funções de usuário e regras de rede adequadas.
- Você deve ter uma conta Netlify.
Tudo o que fizermos neste tutorial pode ser feito de forma gratuita. Você pode usar o nível gratuito para sempre do MongoDB Atlas, que é um cluster do tamanho M0. Você também pode usar o plano gratuito que a Netlify oferece.
Importa referir que, se você preferir uma experiência totalmente sem servidor, o MongoDB Atlas também oferece instâncias sem servidor — um banco de dados totalmente sem servidor que é dimensionado elasticamente de acordo com a demanda. Não exploraremos instâncias sem servidor neste tutorial, mas se você quiser saber mais, consulte este artigo.
Se precisar de ajuda para começar a usar o cluster do MongoDB Atlas, confira o tutorial anterior que criei sobre o assunto.
Para manter este tutorial simples e fácil de entender, vamos trabalhar em um novo projeto. Embora você não precise necessariamente usar a CLI para fazer o trabalho, será mais fácil para este exemplo.
Supondo que a CLI Netlify esteja instalada, execute o seguinte comando para criar um novo projeto:
Neste exemplo, não usaremos os recursos de integração contínua que você obteria ao conectar o GitHub e similares. Certifique-se de seguir as instruções que a CLI apresenta a você a partir do comando acima.
Não criaremos nenhum arquivo de projeto específico até que avancemos no tutorial.
A estrela deste tutorial estará por perto, incluindo o MongoDB Atlas em sua função Netlify. Conforme mencionado anteriormente, é necessário levar em consideração o estado da função para evitar a tentativa de acesso a um banco de dados sem conexão ou o estabelecimento de muitas conexões.
Com isso em mente, podemos fazer o seguinte com a Netlify CLI:
Siga as instruções quando solicitado. Para este exemplo, usaremos JavaScript em vez de TypeScript ou Golang. Embora não seja muito importante, pois faremos alterações significativas depois, selecione hello_world como o modelo de função que você deseja usar.
Como usaremos o driver Node.js do MongoDB, precisamos instalá-lo em nosso projeto. Execute o seguinte na linha de comando, na raiz do projeto:
As funções sem servidor da Netlify poderão acessar os módulos NPM na raiz do projeto.
Se você manteve o caminho de função padrão, abra o arquivonetlify/functions/get_movies.js e adicione o seguinte código JavaScript:
Então, o que está acontecer no código acima?
A primeira coisa que estamos fazendo é criar um novo cliente MongoDB usando uma string URI que estamos armazenando dentro de nossas variáveis de ambiente. Embora você possa codificar esse URI, sua melhor aposta é mantê-lo em uma variável de ambiente, pois os usaremos em uma etapa posterior deste tutorial.
Talvez a frase mais interessante aqui seja a seguinte:
Se você já trabalhou com o driver Node.js do MongoDB antes, provavelmente já o usou com um
await ou similar. Não queremos bloquear nossa função na área global. Esta área antes da funçãohandler será executada somente quando a função iniciar. Sabemos que a função não será necessariamente encerrada após uma execução. Com esse conhecimento, podemos usar o mesmo cliente enquanto essa função específica existir, reduzindo o número de conexões existentes.Dentro da função
handler, podemos tentar resolver nossa promessa de cliente, obter um identificador para o banco de dados que queremos usar e obter um identificador para a collection que queremos usar. Para este exemplo, estamos armazenando o nome do banco de dados e o nome da collection em uma variável de ambiente.Vamos expandir nossa função para realmente fazer algo útil. Altere o código JavaScript para que fique parecido com o seguinte:
Para essa função específica, estamos usando nossa conexão para encontrar todos os documentos em nossa collection, limitando o conjunto de resultados aos documentos 10 e retornando os dados para quem quer que tenha executado a função. Nosso exemplo é técnicamente baseado em documentos de filmes, mas nosso código não reflete nada tão específico.
Então, temos uma função sem servidor para consultar nosso banco de dados MongoDB Atlas. Vamos juntá-lo a algumas das outras ofertas do Netlify, principalmente a hospedagem de sites.
Na raiz do nosso projeto Netlify, crie um arquivo index.html com a seguinte marcação:
Não precisamos nos preocupar em fazer nada sofisticado do ponto de vista da interface do usuário neste exemplo.
No HTML e JavaScript acima, estamos definindo um elemento de lista não ordenada de espaço reservado. No JavaScript, estamos buscando nossa função sem servidor, percorrendo os resultados e adicionando cada um de nossos itens como itens de lista à lista não ordenada. Como estamos presumindo que estamos usando dados de filme, estamos adicionando apenas o título do objeto de filme à lista.
Novamente, nada sofisticado, mas prova que nossa função funciona.
Temos uma função, temos um site e estamos praticamente prontos para implantar. Antes de fazermos isso, vamos garantir que tudo funcione localmente.
Usando a Netlify CLI, execute o seguinte a partir da raiz do seu projeto:
O comando acima deve servir a função e o site localmente e, em seguida, abrir um navegador para você. Se você tiver problemas, verifique o seguinte:
- Você se lembrou de definir suas variáveis de ambiente primeiro?
- O seu IP local é adicionado ao seu MongoDB Atlas cluster?
Para ser sincero, esses dois itens me chamaram a atenção, por isso achei que valia a pena registrá-los.
Supondo que você tenha tudo funcionando em seu ambiente local, podemos nos concentrar na implantação na Netlify.
A primeira coisa que queremos fazer é criar nossas variáveis de ambiente. Isso pode ser feito no painel on-line da Netlify ou diretamente com a Netlify CLI. Para este exemplo, usaremos a CLI.
Na linha de comando, execute o seguinte:
O comando acima define três variáveis de ambiente. Você vai querer trocar o URI pelo do seu próprio cluster. Você pode obter essas informações no painel do MongoDB Atlas.
As outras duas variáveis, que representam o banco de dados e a collection, estão usando o conjunto de dados de amostra. Você pode alterá-los para o que quiser.
Com as variáveis definidas, podemos implantar o projeto. Execute o seguinte comando na linha de comando:
Pode levar um pouco de tempo para que o processo de construção seja ativado remotamente, mas, quando terminar, você deverá ter um website bem básico que consuma informações de uma função da Netlify.
É importante observar que você ainda precisa adicionar as regras adequadas de acesso à rede ao MongoDB Atlas para permitir conexões de uma função do Netlify.
Você acabou de ver como usar oNetlify Functions com o driver Node.js do MongoDB para criar um website com um backend sem servidor.
Lembre-se de que, ao trabalhar com funções sem servidor, você precisa estar ciente de que suas funções nem sempre estão disponíveis para reutilizar uma conexão. Você também deve estar ciente de que a conexão a um banco de dados diretamente dentro de um manipulador de função pode estabelecer muitas conexões. Quando feito corretamente, você terá uma poderosa função sem servidor que pode aproveitar ao máximo o MongoDB.
Se você estiver interessado em outro exemplo de função sem servidor, confira meu tutorial intitulado Adicionar uma seção de comentários a um site do Eleventy com o MongoDB e a Netlify para obter mais ideias.