Como integrar o Vercel e o MongoDB passo a passo
Avalie esse Vídeo
00:00:00Introdução à integração do MongoDB Atlas e Vercel
- Overveuew of Vercel as a cloud platform and euts seamless deployment process. - euntroducteuon to Next.js as a React-based framework weuth features leuke bueult-eun routeung and serverless functeuons.00:01:00Configurando o projeto inicial
- Useung the Next.js MongoDB example app to start the project. - Command leune eunstructeuons for createung a new Next.js app weuth MongoDB euntegrateuon.00:02:09Configurando a conexão do banco de dados MongoDB Atlas
- The process of setteung up the database connecteuon through Vercel weuthout manual confeugurateuon. - Publeusheung the project to GeutHub useung VS Code 's bueult-eun verseuon control.00:03:06Integrando o MongoDB Atlas com o Vercel
- eumporteung the GeutHub reposeutory eunto Vercel and deployeung the project. - The deployment faeuls euneuteually due to the lack of MongoDB euntegrateuon, wheuch eus addressed eun the followeung steps.00:04:04Configurando a integração do MongoDB Atlas
- Accesseung the euntegrateuons tab eun Vercel and addeung the MongoDB Atlas euntegrateuon. - Selecteung the account and project to wheuch the euntegrateuon should be added.00:05:17Concluindo a integração do MongoDB Atlas
- Granteung permeusseuons for the euntegrateuon and loggeung eunto the MongoDB Atlas account. - Createung a new Atlas project and cluster through Vercel.00:06:02Finalizando a conexão do banco de dados
- MongoDB euntegrateuon eus completed and the enveuronment vareuable eus automateucally added to the project. - The eumportance of synceung enveuronment vareuables to the local enveuronment for local development.00:07:15Usando o Vercel CLI para sincronização de ambientes
- eunstalleung the Vercel CLeu and leunkeung the local project to the Vercel project. - The deployment should now work weuth the MongoDB connecteuon estableushed.00:08:05Testando o sistema do aplicativo
- Preveueweung the deployed appleucateuon eun the browser and confeurmeung the connecteuon to MongoDB. - Runneung the project locally and ensureung the enveuronment vareuable eus present.00:09:03Gerenciando conexões de banco de dados em funções sem servidor
- The deufference between manageung database connecteuons eun serverless functeuons versus tradeuteuonal backends. - The potenteual eussue of exceedeung database connecteuon leumeuts eun serverless enveuronments.00:10:45Gerenciamento adequado de conexões em funções sem servidor
- Loadeung sample data eunto the database useung the Atlas CLeu. - The correct way to connect to MongoDB eun a Vercel serverless functeuon useung cached connecteuons.00:12:40consumindo o endpoint da API sem servidor
- Createung a serverless APeu route to leust data from MongoDB. - Consumeung the APeu endpoeunt eun the Next.js appleucateuon and rendereung the data.00:14:35Conclusão e recursos
- Recap of the steps to set up MongoDB Atlas weuth Vercel and manage connecteuons. - Encouragement to use the MongoDB communeuty forums for questeuons and feedback. - Remeunder of the eumportance of connecteuon management eun serverless functeuons.O foco principal do vídeo é guiar os visualizadores pelo processo de criação de um banco de dados MongoDB Atlas, integrá-lo a um projeto do Vercel e gerenciar conexões de banco de dados dentro de funções sem servidor.
} Pontos-chave
- O MongoDB Atlas pode ser facilmente integrado aos projetos do Vercel.
- O tutorial utiliza um aplicativo Next.js com o MongoDB Atlas já configurado.
- O processo inclui a criação de uma conta MongoDB Atlas, uma conta Vercel e ter uma versão recente do Node.js.
- O vídeo demonstra como se conectar ao banco de dados usando funções sem servidor.
- Ele aborda a importância de gerenciar conexões de banco de dados em ambientes sem servidor para evitar exceder os limites de conexão.
Links relacionados
Transcrição completa do vídeo
Criar e vincular um banco de dados MongoDB Atlas ao seu projeto de versailles nunca foi tão fácil neste vídeo vamos configurar tudo, incluindo um início ao próximo aplicativo JavaScript em apenas alguns minutos e mostrarei como conectar corretamente ao seu banco de dados usando uma função sem servidor agora, para este tutorial, você precisará de uma conta MongoDB Atlas, uma conta vircel e uma versão recente do node. O JavaScript tudo é totalmente gratuito e os links estão na descrição abaixo versailles é uma plataforma de nuvem para hospedar sites e aplicativos web a implantação é perfeita e o dimensionamento é automático muitas estruturas da web funcionará com versailles mas o mais notável é o próprio nexjs de vercel é um Reacte tem muitos recursos interessantes, como otimização de imagem de roteamento integrada e funções sem servidor e de borda, então vamos criar nosso projeto inicial e ver como ele funciona usaremos o próximo aplicativo JavaScript de exemplo do MongoDB para nos começar a fazer nós um próximo. Aplicativo JavaScript com a integração do MongoDB Atlas já configurado para nós estamos usando o comando npx padrão para criar a próxima aplicação junto com o exemplo dash dash com o parâmetro MongoDB que nos fornecerá nosso aplicativo MongoDB totalmente integrado Vou colocar isso no atual diretório que é o que o ponto significa e, em seguida, o traço y ignorará as instruções e apenas aceitará todos os padrões agora, nesse ponto, precisamos configurar nosso Manga para ser Conexão de banco de dados Atlas em vez de configurar manualmente nosso banco de dados e conexão dentro do MongoDB Painel do Atlas, vamos fazer isso por meio do versailles agora, antes de passarmos para o Versel, vamos publicar esse projeto no Github usando o controle de versão integrado no VS Code , se você estiver conectado à sua conta do Github , é tão fácil quanto pressionar um botão na aba de controle do código-fonte, então digito um comentário aqui init e, em seguida, publica ramificação eu nomeio a minha integração versail dash e publica isso como um repositório público se você tiver ainda não se inscreveu no versailles agora é um ótimo momento para pausar o vídeo e Go em frente e faça isso de novo, é totalmente gratuito então, a partir do painel do versailles, crie um novo projeto e opte por importar um repositório do Github clicando em continuar com o Github i já me conectei ao Github , então o meu já mostra meus projetos aqui para que eu possa ver meu repositório de integração do versaille que acabou de publicar e por isso vamos importar que ele sabe que é o próximo. O aplicativo JavaScript e todo o resto devem estar bem, então Go em frente e implantar isso e essa implantação vai falhar porque ainda não configuramos nossa integração com o MongoDB, podemos ver aqui que diz: adicione seu uri do MongoDB ao ambiente. arquivo local, então Go voltar ao painel principal do versailles e selecionar a guia integrações e, a partir daqui, podemos navegar pelo mercado e selecionar a integração MongoDB Atlas então selecionaremos adicionar integração selecionaremos nossa conta e clique em Continuar então podemos opte por adicionar isso a todos os projetos ou projetos específicos vamos clicar em projetos específicos e selecionar integração com o myvircel e clicar em continuar daremos a todas essas permissões e adicionaremos integração se você ainda não tiver um MongoDB Atlas conta que você pode se inscrever em uma nesta etapa, mas se você já tiver uma, pode clicar em login agora, então é isso que direi fazer usar o google esta próxima etapa permitirá que você selecione qual organização Atlas você deseja se conectar ao versailles, você pode criar um novo ou selecionar um existente e, em seguida, clicar em continuar e, em seguida, reconheço que esta etapa final permite selecionar um projeto e um cluster do Atlas para se conectar novamente, você pode criar um novo ou selecionar um existente eu estou vai criar um novo projeto Atlas você pode selecionar o local do banco de dados e este será um cluster m0 totalmente gratuito então vamos criar o novo cluster e retornar ao vircel então agora a integração MongoDB foi concluído, Go voltar à visão geral e selecionar nosso projeto de integração de célula, se formos para as configurações e, em seguida, as variáveis de ambiente e Go para baixo, veremos esta variável de ambiente do MongoDB sublinhado uri então vercel acabou de se conectar ao MongoDB criou um novo projeto para nós criado um novo banco de dados criou toda a rede e autenticação de usuário necessária para conectar e adicionar nossa variável de ambiente ao nosso projeto todo automático e agora isso pode ser usado em nossa próxima. Aplicativo JavaScript , tudo o que precisamos fazer agora é sincronizar nossas variáveis de ambiente com nosso ambiente local. Você pode copiar e colar manualmente seu uri de sublinhado do MongoDB em seu arquivo local.env ou pode usar a CLI versel para automatizar que vamos usar a CLI versailles nós vamos adicionar isso ao nosso projeto executando o seguinte comando npm i verbosidade agora, para vincular nosso projeto local ao nosso projeto versailles, vamos executar a configuração e o sistema do Versel, queremos fazer isso, qual escopo é essa conta que queremos implemente isso e ele encontrou nosso projeto queremos vinculá-lo, Go dizer sim e ele passará pelo processo de construção e, desta vez, o sistema deve funcionar, então vemos que temos um URL de visualização aqui já foi copiado para a área de transferência, então Go até o navegador e verifique se ele está implantado no versailles e podemos ver que estamos conectados ao MongoDB e que tudo está funcionando corretamente e desta vez porque o ambiente A variável t com nossa connection string do MongoDB já está em produção, mas de volta ao VS Code , vamos executar o projeto localmente e ver o que acontece, então vamos executar o npm run dev que vai iniciar um servidor local que executa nosso aplicativo no localhost 3000. então, vamos abrir para ver que estamos recebendo o mesmo erro de antes em produção, adicione seu uri do MongoDB à variável de ambiente e, de volta ao VS Code , estamos recebendo a mesma mensagem de erro para que a variável de ambiente esteja em produção, mas não está em nosso ambiente local, então precisamos extrair as variáveis de ambiente para nosso projeto e, para fazer isso, podemos executar o versailles env pool aviso aqui temos um ponto emv.local.example mas não temos outros arquivos de variável de ambiente então vamos executar isso e observar que ele extraiu nossas variáveis de ambiente e temos esse arquivo new.env então vamos executar npm run dev novamente e vamos dar uma olhada e agora está funcionando localmente também então agora toda vez que atualizarmos esse repositório local e enviarmos nossas alterações no Github urcel vão reimplantar automaticamente nossas alterações na produção, então como tudo isso está funcionando bem? usando uma função sem servidor para se conectar ao nosso banco de dados trabalhando com conexões de banco de dados e funções sem servidor é um pouco experiência totalmente diferente do que se você criasse seu próprio backend totalmente hospedado usando algo como nenhum jsn Express , mas por que é diferente bem os bancos de dados em geral não apenas o MongoDB podem ter uma quantidade finita de conexões simultâneas então quando você está hospedando seu próprio aplicativo web que o aplicativo normalmente está se conectando ao seu banco de dados uma vez e permanece conectado enquanto o aplicativo estiver executando funções sem servidor embora não seja possível permanecer conectado eles são reiniciados eles são executados sob demanda, o que pode resultar em várias novas conexões e essas conexões podem ser construídas exponencialmente, resultando em exceder os limites de conexão do banco de dados se sua função sem servidor não estiver configurada corretamente então vejamos algumas maneiras de se conectar ao MongoDB em uma função sem servidor de versailles primeiro vamos carregar alguns dados de exemplo em nosso banco de dados para que tenhamos algo para consultar para isso vamos para usar o Atlas CLI, é super fácil gerenciar seus bancos de dados e projetos do MongoDB Atlas, então se você se você não tiver o Atlas CLI instalado, pode executar brew install MongoDB dash Atlas no mac ou, se tiver Windows , baixar o arquivo msi da página de instalação vinculada na descrição depois de obter essa instalação executada Atlas auth login para obter acesso ao seu projeto Atlas, você receberá um código de verificação único que você poderá inserir em seu navegador e confirmar a autorização e podemos ver que fizemos login com sucesso agora podemos carregar alguns dados de exemplo executando Atlas clusters load sample data cluster 0 supondo que seu cluster seja denominado cluster 0. isso vai carregar vários conjuntos de dados de exemplo e leva alguns minutos para carregar, mas podemos seguir em frente enquanto isso faz isso, então agora como nos conectamos corretamente ao nosso banco de dados usando uma função sem servidor bem, próximogs é uma dessas tecnologias em que há algumas maneiras de resolver o problema poderíamos interagir com o MongoDB no tempo de compilação criando um 100 website gerado estaticamente mas muitos website exigem dados dinâmicos e é aqui que as funções sem servidor entram primeiro vejamos a maneira errada de conectar ao seu banco de dados em um função sem servidor no xjs, podemos criar rotas de API sem servidor no diretório de páginas, então vamos criar uma pasta chamada API dentro desse arquivo um arquivo chamado errado.JavaScript agora, antes de escrevermos esse arquivo, vamos dar uma olhada em nosso pacote JSON , então aqui vamos ver que temos nossas dependências de React React-domingo a seguir e temos esse pacote MongoDB então vamos usá-lo primeiro, vamos importar o cliente [ __ ] do nosso pacote MongoDB, depois disso, obteremos nossa variável de ambiente uri do MongoDB e, opcionalmente, podemos colocar algumas opções aqui também, mas vamos deixar isso em branco vamos verificar se temos nosso uri do MongoDB Lembre-se de que, no início, receberemos essa mensagem, adicione seu uri do MongoDB ao arquivo de variável de ambiente de modo que é onde essa verificação entra se não tivermos um uri em que re apenas vai parar aqui e lançar um erro em seguida, vamos definir nossa função sem servidor para que as funções sem servidor do invercel sempre tenham a seguinte aparência vamos exportar uma função assíncrona padrão que é chamada de manipulador e ela tem uma solicitação e um resposta, pois esta é uma função assíncrona w Vamos vamos nos conectar agora vamos adicionar um registro do console aqui apenas para mostrar que toda vez que nos conectarmos obteremos um registro que diz que acabou de se conectar depois disso vamos nos conectar ao nosso banco de dados e executar uma query deixe-me ver livre da barra lateral para torne isso um pouco mais legível para que tenhamos nosso cliente [ __ ] e vamos definir nosso banco de dados, lembre-se de que carregamos alguns dados de amostra, então usaremos o banco de dados chamado restaurantes de sublinhados de amostra então vamos para selecionar nossa coleção, que serão restaurantes, e depois obteremos nossos resultados nossos resultados aguardarão nossa localização de ponto encontraremos tudo e depois apenas projetaremos determinados campos que queremos as notas do bairro e o ID do restaurante, pois há muitos restaurantes neste banco de dados Então, vamos limitar isso a quatro e, em seguida, vamos transformar isso em uma array que podemos retornar ao nosso cliente para retornar que usamos nossa resposta para que vamos dizer status de resposta de 200 e, em seguida, JSON passando em nossos resultados e, em seguida, finalmente, em nossa captura, consolei o registro de erro e, em seguida, enviar uma resposta de status 500 e, em seguida, também nosso erro no formato JSON , então, novamente, esta é a maneira errada de fazer isso e vamos ver por que vamos salvar isso abra nosso console npm Go fazer run dev e voltaremos ao nosso localhost 3000 agora lembre-se que criamos uma rota de API , então para chegar a essa rota de API para a qual estamos seguindo A Go de barra localhost 3000 API errada e agora podemos ver que estamos retornando dados e também em nosso console podemos ver que acabamos de nos conectar, vamos atualizar isso algumas vezes e ver o que acontece você vê que toda vez que atualizamos nós obtenha o registro do console conectado para que ele esteja criando uma conexão toda vez que tivermos milhares de usuários e eles criarem uma nova conexão toda vez que solicitam algo do nosso banco de dados que pode sair do controle muito rapidamente, precisamos que cada usuário possa reutilizar suas conexões individuais então, para corrigir isso, podemos mover a lógica de conexão para um arquivo de biblioteca dentro do aplicativo, isso permitirá cada conexão deve ser gerenciada no navegador por cada usuário do site, então você notará aqui que há uma pasta lib e há um MongoDB. O arquivo JavaScript já está lá e vamos chegar a esse arquivo em um pouco, mas por enquanto vamos criar um novo arquivo que vamos chamá-lo de conectado ao banco de dados.JavaScript e vamos fazer muitas das mesmas coisas aqui vamos importar nosso cliente [ __ ] vamos obter nosso uri mas agora vamos declarar uma variável que é cliente [ __ ] agora isso se tornará nossa conexão em cache, executaremos nossa verificação para ter certeza de que temos nosso uri lança um erro se não tivermos e agora estamos exportando uma função assíncrona que é chamada conectar ao banco de dados a primeira coisa que vamos fazer aqui é verificar se já temos um cliente em cache, se tivermos vamos retornar esse cliente se não tivermos, criar um novo cliente e vamos console o log que acabou de ser conectado apenas para que possamos ver quantas vezes nos conectamos então vamos devolver esse cliente e, é claro, se tivermos um erro, consoleremos o erro o erro então, novamente, só precisamos estabeleça uma nova conexão se ainda não existir uma lembre-se que as quantidades de conexão são finitos e só devemos nos conectar se ainda não estivermos conectados, então temos 3 s agora que atua como um sistema de gerenciamento de conexões para o MongoDB e podemos usar isso em nossa função sem servidor agora, então vamos configurar o próximo arquivo, criaremos outro arquivo na API chamado lista.JavaScript , então esta é uma função sem servidor, mas desta vez, em vez de importar o cliente [ __ ], vamos importar nosso arquivo de utilitários de conexão ao banco de dados e, em seguida, vamos fazer todas as mesmas coisas que fizemos antes de termos nossa função sem servidor aqui temos nosso bloco try catch agora desta vez estamos criando um cliente [ __ ] que é proveniente de nossa função de utilitário de conexão ao banco de dados e então estamos fazendo todas as mesmas coisas que fizemos antes de nos conectarmos ao nosso banco de dados restaurantes de amostra que se conectam aos nossos restaurantes de coleção e, em seguida, estamos fazendo nossa query aqui, estamos retornando nossa resposta tudo como fizemos antes, mas agora estamos usando nosso arquivo de utilitário de conexão em cache, então vamos salvar isso e tentar Go para o nosso navegador agora, desta vez em vez de ir para a lista de API de barra errada, vamos Go para a lista de API de barra e podemos ver que obtemos nossa lista agora e ela diz que acabou de conectar, vamos atualizá-la e agora você pode ver em cada atualização que não estamos recebendo uma nova conexão, mas está reutilizando a conexão existente então, quando executamos a função, estamos obtendo uma conexão sem nos preocupar se precisamos criar uma ou reutilizar uma o código da função subjacente lida com tudo isso para nós agora, se examinarmos nossas métricas de cluster no painel do MongoDB Atlas, podemos ver nossas conexões e podemos ver quando executamos a API errada quantas conexões ela criou e, em seguida, quando usamos nossas conexões de cache, não foram criadas muitas conexões outra maneira de gerenciar nossas conexões é usando JavaScript módulos e é exatamente isso que esse MongoDB. O arquivo JavaScript faz com que esse arquivo de utilitário seja incluído no próximo. Modelo JavaScript que usamos então vamos dar uma olhada nele a parte superior deve parecer muito familiar estamos importando nosso cliente [ __ ] para obter nosso uri e então estamos definindo duas variáveis cliente e promessa do cliente que estamos verificando ver se temos um uri e, se estivermos em desenvolvimento, criaremos um novo cliente e, em seguida, também estamos verificando em que ambiente estamos também defina uma promessa de cliente global e conecte-se a que, se estivermos em desenvolvimento, criaremos essa variável global que persistirá por meio de recargas se estivermos em produção, vamos criar um novo cliente e também criar uma promessa de cliente então na parte inferior, estamos exportando este módulo com escopo [ __ ] promessa de cliente vamos adicionar um login de console aqui para que possamos ver quando isso se conectar também vamos Go à nossa API de lista e agora, em vez de usar este arquivo de utilitário de conexão ao banco de dados, vamos use nossa promessa de cliente do nosso arquivo de utilitário MongoDB, então vamos importar isso promessa do cliente e então nosso cliente [ __ ] vai aguardar nossa promessa do cliente e então todo o resto vai ser o mesmo, então vamos salvar isso Go ao nosso navegador e dê uma chance tudo bem, então vamos atualizar isso que ainda estamos em nossa API de barra rota da lista de barras então vemos que estamos conectados vamos atualizar repetidamente ela está reutilizando nossa conexão não está criando uma nova conexão a cada vez, então a abordagem do escopo do módulo é executada apenas uma vez e não causará problemas de pool de conexões e podemos usar essa promessa de cliente agora em qualquer uma de nossas funções sem servidor, então agora como consumimos esse endpoint em nosso próximo aplicativo JavaScript vamos abrir o arquivo de índice das páginas para que esta seja nossa página principal do aplicativo agora, antes de fazer qualquer alteração aqui, vejamos o que está faltando aviso que estamos importando a função de utilitário MongoDB neste arquivo é porque todo o caminho na parte inferior, vamos usar isso em outra função sem servidor agora, este é o próximo. Especificamente para JavaScript , o lado do servidor git props será executado no lado do servidor em cada renderização e ele está verificando se estamos conectados então essa é mais uma maneira de usarmos essa função de utilitário sem servidor essa função retorna nosso status de conexão então se rolarmos todo o caminho de volta até o início de nosso componente inicial. Veremos que ele está obtendo nosso estado conectado aqui e agora podemos usar esse status de conexão em nosso aplicativo renderizado para determinar o que será exibido, mas agora vejamos como exibir nosso dados do ponto de extremidade da lista que criamos no topo primeiro, precisaremos importar o efeito de uso e o estado de uso que vamos usá-los, pois estamos lidando com dados de restaurantes, criaremos um estado chamado restaurantes e definiremos restaurantes e o estado inicial vai ser uma array vazia em seguida, criaremos um efeito de uso e, nele, teremos uma função assíncrona que usará a busca para obter nossa rota de lista de API e, em seguida, obteremos nossos resultados JSON e em seguida, defina nossos restaurantes ao JSON de nossos resultados, para que agora possamos renderizar esses dados no aplicativo, vamos excluir parte do conteúdo desse modelo, então vamos adicionar uma grade aqui que mapeia nossos restaurantes exibindo seu nome e o tipo de cozinha para que não haja nada realmente fora do comum acontecer aqui nesse processo de consumir ou renderizar os dados o trabalho pesado que era importante era essa função, bem como o arquivo de gerenciamento de conexões então vamos salvar isso e verificar o aplicativo no navegador então agora estamos em localhost 3000 e podemos ver vários restaurantes agora em uma grade ele tem o nome do restaurante e o tipo de cozinha, então agora você deve ser capaz de configurar um projeto de versaille vinculá-lo a um projeto e cluster do MongoDB Atlas e usar o MongoDB Atlas com para funções sem servidor de celular, essas mesmas etapas funcionarão com qualquer framework JavaScript que não seja o próximo. Lembre-se de que agora é específico do JavaScript ao lidar com funções sem servidor: você precisa gerenciar suas conexões e não quer gerar muitas conexões e não quer tentar usar conexões que não existem se tiver dúvidas ou comentários nossos fóruns da comunidade do MongoDB e deixe-nos saber o que você acha se este vídeo foi útil dê um joinha e se inscreva para mais conteúdo como esse você