用Vercel和MongoDB Atlas進行部署

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

Web應用程序部署到Vercel

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

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

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

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

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

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

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

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

SvelteKit 演示應用程序

我們的演示應用程序是一個 SvelteKit 應用程序，它允許創(chuàng)建一個簡單的文檔，即 apothegm，帶有一個文本和作者字段，并顯示數(shù)據(jù)庫中的 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ù)據(jù)存儲中檢索的apothegms的主體，即從apothegm數(shù)據(jù)庫和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，并在生產(chǎn)期間將其設置為遠程MongoDB Atlas URL。我們可以通過提供一個.env文件來做到這一點，dotenv在本地開發(fā)時可以找到這個文件，但在生產(chǎn)時則不能。為了達到這個目的，我們不將該文件納入版本控制--我們將其添加到.gitignore。清單4中顯示了這兩個文件的相關部分。

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

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

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

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

Vercel-MongoDB的生產(chǎn)設置

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

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

將項目導入Vercel

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

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

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

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

回到Vercel來添加集成

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

屏幕1.添加MongoDB Atlas集成到Vercel

接下來，你可以選擇將集成添加到所有項目或特定項目中。為了這個演示，讓我們選擇 "添加到所有 "并點擊繼續(xù)。

暫時回到MongoDB Atlas中

添加集成將在另一個窗口中啟動一個MongoDB注冊頁面。如果你還沒有一個MongoDB賬戶，你可以設置一個。否則，請登錄到你現(xiàn)有的賬戶。

接下來，一個對話框將詢問將集成添加到哪個MongoDB Atlas組織。使用你為你的用戶設置的默認值即可。

最后，在最后一個屏幕上點擊確認按鈕，接受你必須手動卸載集成，如果你想刪除它，如屏幕2所示。

屏幕2.在MongoDB Atlas中確認組織權限

現(xiàn)在你會看到你選擇的MongoDB Atlas項目和其中的集群。 你將把左側下拉框中的集群與右側多選中的一個或多個Vercel項目聯(lián)系起來。在我們的案例中，我們想把我們之前創(chuàng)建的Vercel項目添加到右側的選擇中。你可以在屏幕3中看到這一點。

屏幕3.將Vercel項目與MongoDB Atlas集群相關聯(lián)

下一步是在MongoDB Atlas集群和Vercel項目之間創(chuàng)建橋梁。確保你在Vercel方面選擇了正確的項目!

一旦這樣做了，Vercel項目將自動訪問我們需要的環(huán)境變量(MONGODB_URL)，以便輕松地連接到數(shù)據(jù)存儲。

回到Vercel進行測試

回到Vercel中，你會在集成標簽中看到MongoDB Atlas集成，如屏幕4。

屏幕4.Vercel中的MongoDB Atlas集成

在這里，你可以對集成的Vercel端進行修改（包括卸載它，如果你愿意，選擇管理->卸載）。

接下來，我們驗證Vercel項目是否已經(jīng)接受了新的環(huán)境變量，該變量指的是MongoDB Atlas的安裝。打開Vercel項目，并點擊設置。在設置中，點擊左側菜單中的 "環(huán)境變量"。然后你應該看到一個MONGODB_URI 變量列在那里，如屏幕5。

屏幕5.Vercel項目中的環(huán)境變量

如果你點擊變量中的眼睛圖標，你可以看到值，它應該指向你的MongoDB Atlas集群。這驗證了環(huán)境變量在部署時對應用程序是可用的。

現(xiàn)在，如果你點擊項目查看，你會看到它正在運行，數(shù)據(jù)由Atlas集群驅動，如屏幕6所示。

屏幕6.在prod中運行的Vercel-MongoDB Atlas集成

最重要的是，Vercel-MongoDB集成給了我們一個簡單的方法來連接我們部署在Vercel中的應用程序和運行在MongoDB Atlas中的數(shù)據(jù)存儲。類似的方法可用于將應用程序與不同環(huán)境中的數(shù)據(jù)聯(lián)系起來，從測試到暫存，再到生產(chǎn)。

總的來說，這種整合允許用一種更標準化的方法來利用全球 "擴展到零 "的基礎設施，而不需要太多麻煩。

以上就是Vercel+MongoDB Atlas部署詳細指南的詳細內(nèi)容，更多關于Vercel MongoDB Atlas部署的資料請關注腳本之家其它相關文章！