Vercel+MongoDB Atlas部署詳細指南

2022-08-01 18:06:50

用Vercel和MongoDB Atlas進行部署

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

Web應用程式部署到Vercel

你現在可以將你的Web應用程式部署到Vercel，並讓它自動使用MongoDB Atlas叢集作為資料儲存。具體方法如下：

2022年MongoDB世界大會最有趣的公告之一是Vercel-MongoDB整合的釋出。我們在這裡看到的是整合大型基礎設施元件的逐步簡化和標準化。你能夠利用你的資料儲存和主機中的大量力量，而不需要在架構上大費周章。

減少對架構的糾結意味著有更多的時間來實現你的核心目標。讓我們來看看新的精簡的整合。

[也在InfoWorld上：2022年軟體開發的方向]

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

你的Vercel和MongoDB Atlas基礎設施之間的鉸鏈是MONGODB_URI 環境變數。官方整合處理定義這個變數，併為你分享它，以及必要的許可權。

對於我們這裡的演示，我們想要實現的是一個基於SvelteKit的應用程式，我們在本地開發，有一個本地MongoDB資料儲存。
然後我們想把這個應用部署到Vercel，讓它自動使用MongoDB Atlas叢集作為其資料儲存。這是一個非常常見的設定。順便說一句，這對React/Next或Vue/Nuxt來說，大部分工作都是一樣的。基本設定見圖1。

Vercel-MongoDB 應用程式的開發和生產架構

SvelteKit 演示應用程式

我們的演示應用程式是一個 SvelteKit 應用程式，它允許建立一個簡單的檔案，即 apothegm，帶有一個文字和作者欄位，並顯示資料庫中的 apothegms 列表。對於我們的檔案的文字，我們將使用一些精煉的神諭。

SvelteKit是一個全棧框架，所以我們將使用檢視中的load方法來存取後端並載入任何現有的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 欄位中。該欄位也暴露在一個普通的指令碼元素中，因此頁面可以存取它，行數為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返回一個充滿從資料儲存中檢索的apothegms的主體，即從apothegm資料庫和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 環境變數建立一個與MongoDB範例的連線來完成其工作。這個變數是通過呼叫process.env["MONGODB_URI"] 從環境中提取的。

注意這個檔案的第一行是呼叫匯入'dotenv/config' 。這個匯入導致dotenv庫自我啟動。dotenv的目的是為應用程式從組態檔中載入環境變數（以一種與作業系統無關的方式）。更多相關資訊請點選這裡。

對於我們的應用程式，我們想在開發期間將該變數設定為本地URI，並在生產期間將其設定為遠端MongoDB Atlas URL。我們可以通過提供一個.env檔案來做到這一點，dotenv在本地開發時可以找到這個檔案，但在生產時則不能。為了達到這個目的，我們不將該檔案納入版本控制--我們將其新增到.gitignore。清單4中顯示了這兩個檔案的相關部分。

清單4.新增到.env和.gitignore中

// .env
MONGODB_URI="mongodb://localhost:27017
複製程式碼

// .gitignore
.env
.env.*
複製程式碼

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

Vercel-MongoDB的生產設定

現在，開發已經啟動並執行，我們將把注意力轉向設定生產，或者我們稱之為prod。在現實世界中，你將實施測試和暫存步驟，然後從暫存推廣到生產。

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

將專案匯入Vercel

一旦你有了賬戶，你就可以登入Vercel，建立一個新專案，並匯入專案的程式碼。

一旦匯入完成，Vercel將自動構建和部署該專案。(鬆了一口氣：沒有額外的基礎設施工作。) 構建將成功，但當你檢視該專案時將顯示一個錯誤。這是因為沒有可用的資料儲存。

建立一個MongoDB Atlas叢集

現在你想在MongoDB Atlas中建立一個叢集，作為你的生產資料的家。在你的MongoDB控制檯，很容易建立一個免費的叢集（說明在這裡）。你還會在這一過程中建立一個資料庫使用者。

回到Vercel來新增整合

一旦你有一個可使用的叢集，下一步是將MongoDB整合新增到你的Vercel使用者賬戶。(在企業設定中，你可以把它新增到你的Vercel團隊中。) 導航到vercel.com/integration…，點選頂部的 "新增整合 "按鈕。你會看到一個包含下拉式選單的模式，你想使用的賬戶應該出現在那裡，如下圖螢幕1。