Como conectar o MongoDB Atlas ao Vercel usando a nova integração
.png&w=3840&q=75)
Avalie esse Início rápido
Nunca foi tão fácil criar um banco de dados do MongoDB Atlas e vinculá-lo ao seu projeto Vercel. Neste tutorial, configuraremos tudo — incluindo um aplicativo Next.js inicial — em apenas alguns minutos.
Para este tutorial, você precisará de:
- Node.js 14+.
Este tutorial funcionará com qualquer framework frontend se Next.js não for sua preferência.
O Vercel é uma plataforma em nuvem para hospedagem de websites e aplicativos da web. A implantação é perfeita e o dimensionamento é automático.
Muitos frameworks da web funcionam no Vercel, mas o mais notável é o Next.js do próprio Vercel. O Next.js é uma estrutura baseada em React e tem muitos recursos interessantes, como roteamento integrado, otimização de imagem e sem servidor e funções de borda.
Para nosso exemplo, vamos usar Next.js. No entanto, você pode usar qualquer framework da web que desejar.
Usaremos o aplicativo de exemplo
with-mongodb para começar. Isso dará um aplicativo Next.js com a integração do MongoDB Atlas já configurada para nós.1 npx create-next-app --example with-mongodb vercel-demo -y
Estamos usando o comando padrão
npx create-next-app junto com o parâmetro --example with-mongodb que nos fornecerá nosso aplicativo MongoDB totalmente integrado. Em seguida, vercel-demo é o nome do nosso aplicativo. Você pode nomear o seu da forma que quiser.Depois que isso for concluído, navegue até o diretório do aplicativo:
1 cd vercel-demo
Neste ponto, precisamos configurar nossa conexão de banco de dados do MongoDB Atlas. Em vez de configurar manualmente nosso banco de dados e conexão no dashboard do MongoDB Atlas, vamos fazer tudo por meio do Vercel!
Antes de mudarmos para o Vercel, vamos publicar este 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 Controle de versão.
Vou pressionar Publish Branch e nomear meu novo repositório como
vercel-integration.No dashboard do Vercel, crie um novo projeto e opte por importar um repositório do GitHub clicando em Continuar com o GitHub.
Escolha o repositório que você acabou de criar e clique em Implantar. Na verdade, essa implantação falhará porque ainda não configuramos nossa integração com o MongoDB.
Vá para o dashboard principal do Vercel e selecione a aba Integrações. A partir daqui, você pode navegar no mercado e selecionar a integração do MongoDB Atlas.
Clique em Adicionar integração, selecione sua conta no menu suspenso e clique em continuar.
Em seguida, você pode adicionar essa integração a todos os projetos ou selecionar um projeto específico. Vamos selecionar o projeto que acabei de criar e clicar em Adicionar integração.
Se você ainda não tiver uma conta do MongoDB Atlas, pode se cadastrar para uma nesta etapa. Se você já tiver uma, clique em “Log in now.”
A próxima etapa permite selecionar qual organização Atlas você gostaria de conectar ao Vercel. Crie uma nova ou selecione uma existente. Clique em Continuar e, em seguida, em Reconheço.
A etapa final permite que você selecione um projeto e um cluster do Atlas aos quais se conectar. Novamente, você pode criar novos ou selecionar os existentes.
Depois de concluir essas etapas, você deverá voltar ao Vercel e ver que a integração com o MongoDB foi concluída.
Se você acessar o seu projeto no Vercel e selecionar a seção Variáveis de ambiente na página Configurações, verá que há uma nova variável chamada
MONGODB_URI. Ela agora pode ser usada em nosso aplicativo Next.js.Para obter mais informações sobre como conectar o MongoDB Atlas ao Vercel, consulte nossa documentação.
Tudo o que precisamos fazer agora é sincronizar nossas variáveis de ambiente com nosso ambiente local.
Você pode copiar/colar manualmente seu
MONGODB_URI em seu arquivo .env local ou pode usar a CLI do Vercel para automatizar isso.Vamos adicionar o Vercel CLI ao nosso projeto executando o seguinte comando:
1 npm i vercel
Para vincular nosso projeto local ao projeto Vercel, execute o seguinte comando:
1 vercel
Escolha um método de login e use o pop-up do navegador para se autenticar.
Responda sim para configurar e implantar.
Selecione o escopo apropriado para seu projeto.
Quando solicitado a vincular a um projeto existente, digite Y e pressione Enter.
Agora digite o nome do seu projeto Vercel. Isso vinculará o projeto local e executará outra compilação. Observe que esta compilação funciona. Isso ocorre porque a variável de ambiente com nossa string de conexão do MongoDB já está em produção.
Mas se você executar o projeto localmente, receberá uma mensagem de erro.
1 npm run dev
Precisamos obter as variáveis de ambiente para o nosso projeto. Para fazer isso, execute o seguinte:
1 vercel env pull
Agora, sempre que você atualizar seu repositório, o Vercel reimplantará automaticamente suas alterações para a produção!
Neste tutorial, configuramos um projeto do Vercel, o vinculamos a um projeto e cluster do MongoDB Atlas e vinculamos nosso ambiente local a eles.
Essas mesmas etapas funcionam com qualquer framework e fornecem as variáveis de ambiente local e de produção de que você precisa para se conectar ao banco de dados do MongoDB Atlas.
Para um tutorial detalhado sobre o Next.js e o MongoDB, confira Como integrar o MongoDB ao seu aplicativo Next.js.