Vercel+MongoDB Atlas部署詳細指南

更新時間：2022年08月01日 11:14:39 作者：DebugUsery

這篇文章主要為大家介紹了Vercel+MongoDB Atlas部署的詳細指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

用Vercel和MongoDB Atlas進行部署

如何使用Vercel和MongoDB Atlas進行部署，甚至不需要嘗試

Web應用程序部署到Vercel

你現(xiàn)在可以將你的Web應用程序部署到Vercel，并讓它自動使用MongoDB Atlas集群作為數(shù)據存儲。具體方法如下：

2022年MongoDB世界大會最有趣的公告之一是Vercel-MongoDB集成的發(fā)布。我們在這里看到的是整合大型基礎設施組件的逐步簡化和標準化。你能夠利用你的數(shù)據存儲和主機中的大量力量，而不需要在架構上大費周章。

減少對架構的糾結意味著有更多的時間來實現(xiàn)你的核心目標。讓我們來看看新的精簡的集成。

[也在InfoWorld上：2022年軟件開發(fā)的方向]

在一起使用MongoDB和Vercel已經相當容易。然而，新的官方集成提供了一種標準的、帶來若干好處的規(guī)定方法。讓我們在我之前用來演示Vercel-MongoDB集成的這個項目上，看看事情是如何進行的。

你的Vercel和MongoDB Atlas基礎設施之間的鉸鏈是MONGODB_URI 環(huán)境變量。官方集成處理定義這個變量，并為你分享它，以及必要的權限。

對于我們這里的演示，我們想要實現(xiàn)的是一個基于SvelteKit的應用程序，我們在本地開發(fā)，有一個本地MongoDB數(shù)據存儲。
然后我們想把這個應用部署到Vercel，讓它自動使用MongoDB Atlas集群作為其數(shù)據存儲。這是一個非常常見的設置。順便說一句，這對React/Next或Vue/Nuxt來說，大部分工作都是一樣的?；驹O置見圖1。

Vercel-MongoDB 應用程序的開發(fā)和生產架構

SvelteKit 演示應用程序

我們的演示應用程序是一個 SvelteKit 應用程序，它允許創(chuàng)建一個簡單的文檔，即 apothegm，帶有一個文本和作者字段，并顯示數(shù)據庫中的 apothegms 列表。對于我們的文件的文本，我們將使用一些精煉的神諭。

SvelteKit是一個全棧框架，所以我們將使用視圖中的load方法來訪問后端并加載任何現(xiàn)有的apothegms，如清單1。

清單1.SvelteKit的load()方法

 export async function load({ params, fetch, session, stuff }) {
    const res = await fetch('/apothegm', {
      method: "GET",
      headers: { 'content-type': 'application/json' }
    });
    return {
      props: {
        apothegms: await res.json()
      }
    };
  }
復制代碼

你可以在這里找到更多關于SvelteKit的加載方法的信息，但主要的想法是，我們在頁面啟動之前就會點擊后端API，并將結果的JSON插入到props.apothegms 字段中。該字段也暴露在一個普通的腳本元素中，因此頁面可以訪問它，行數(shù)為export let apothegms; 。

在后端，/apothegm獲取方法看起來像清單2。

清單2.從后端取回apothegms

import clientPromise from '../lib/mongo';

export async function get ({request}) {
  const dbConnection = await clientPromise;
  const db = dbConnection.db("apothegm");
  const collection = db.collection("apothegm");
  let apos = await collection.find({}).toArray();

  return {
    status: 200,
    headers: { 'content-type': 'application/json' },
    body: { apos }
  };
}
復制代碼

清單2返回一個充滿從數(shù)據存儲中檢索的apothegms的主體，即從apothegm數(shù)據庫和apothegm集合中檢索。這個方法主要依賴于從lib/mongo導入的clientPromise 對象。讓我們看看清單3中該模塊的相關部分。

清單3.MongoDB幫助器/lib/mongo.js

import 'dotenv/config';
import { MongoClient } from 'mongodb';

const uri = process.env["MONGODB_URI"];
const options = {
    useUnifiedTopology: true,
    useNewUrlParser: true,
}

let client;
let clientPromise;

if (!uri) {
    throw new Error('Please set Mongo URI')
}

if (process.env['NODE_ENV'] === 'development') {
    if (!global._mongoClientPromise) {
        client = new MongoClient(uri, options)
        global._mongoClientPromise = client.connect()
    }
    clientPromise = global._mongoClientPromise
} else {

    client = new MongoClient(uri, options)
    clientPromise = client.connect()
}

export default clientPromise
復制代碼

清單3通過MONGODB_URI 環(huán)境變量創(chuàng)建一個與MongoDB實例的連接來完成其工作。這個變量是通過調用process.env["MONGODB_URI"] 從環(huán)境中提取的。

注意這個文件的第一行是調用導入'dotenv/config' 。這個導入導致dotenv庫自我啟動。dotenv的目的是為應用程序從配置文件中加載環(huán)境變量（以一種與操作系統(tǒng)無關的方式）。更多相關信息請點擊這里。

對于我們的應用程序，我們想在開發(fā)期間將該變量設置為本地URI，并在生產期間將其設置為遠程MongoDB Atlas URL。我們可以通過提供一個.env文件來做到這一點，dotenv在本地開發(fā)時可以找到這個文件，但在生產時則不能。為了達到這個目的，我們不將該文件納入版本控制--我們將其添加到.gitignore。清單4中顯示了這兩個文件的相關部分。

清單4.添加到.env和.gitignore中

// .env
MONGODB_URI="mongodb://localhost:27017
復制代碼

// .gitignore
.env
.env.*
復制代碼

這意味著在開發(fā)過程中，我們的應用程序將擊中本地MongoDB的安裝。在這一點上，你可以用npm run dev 來啟動該應用程序，一切都應該正常。

Vercel-MongoDB的生產設置

現(xiàn)在，開發(fā)已經啟動并運行，我們將把注意力轉向設置生產，或者我們稱之為prod。在現(xiàn)實世界中，你將實施測試和暫存步驟，然后從暫存推廣到生產。

在任何情況下，你都需要Vercel和MongoDB Atlas的賬戶。這兩項服務都提供了免費的業(yè)余級別的賬戶，設置起來快速而簡單。MongoDB注冊，Vercel注冊。

將項目導入Vercel

一旦你有了賬戶，你就可以登錄Vercel，創(chuàng)建一個新項目，并導入項目的代碼。

一旦導入完成，Vercel將自動構建和部署該項目。(松了一口氣：沒有額外的基礎設施工作。) 構建將成功，但當你查看該項目時將顯示一個錯誤。這是因為沒有可用的數(shù)據存儲。

創(chuàng)建一個MongoDB Atlas集群

現(xiàn)在你想在MongoDB Atlas中創(chuàng)建一個集群，作為你的生產數(shù)據的家。在你的MongoDB控制臺，很容易創(chuàng)建一個免費的集群（說明在這里）。你還會在這一過程中創(chuàng)建一個數(shù)據庫用戶。

回到Vercel來添加集成

一旦你有一個可使用的集群，下一步是將MongoDB集成添加到你的Vercel用戶賬戶。(在企業(yè)設置中，你可以把它添加到你的Vercel團隊中。) 導航到vercel.com/integration…，點擊頂部的 "添加集成 "按鈕。你會看到一個包含下拉菜單的模式，你想使用的賬戶應該出現(xiàn)在那里，如下圖屏幕1。