用Vercel和MongoDB Atlas進(jìn)行部署

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

Web應(yīng)用程序部署到Vercel

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

2022年MongoDB世界大會(huì)最有趣的公告之一是Vercel-MongoDB集成的發(fā)布。我們?cè)谶@里看到的是整合大型基礎(chǔ)設(shè)施組件的逐步簡(jiǎn)化和標(biāo)準(zhǔn)化。你能夠利用你的數(shù)據(jù)存儲(chǔ)和主機(jī)中的大量力量，而不需要在架構(gòu)上大費(fèi)周章。

減少對(duì)架構(gòu)的糾結(jié)意味著有更多的時(shí)間來(lái)實(shí)現(xiàn)你的核心目標(biāo)。讓我們來(lái)看看新的精簡(jiǎn)的集成。

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

在一起使用MongoDB和Vercel已經(jīng)相當(dāng)容易。然而，新的官方集成提供了一種標(biāo)準(zhǔn)的、帶來(lái)若干好處的規(guī)定方法。讓我們?cè)谖抑坝脕?lái)演示Vercel-MongoDB集成的這個(gè)項(xiàng)目上，看看事情是如何進(jìn)行的。

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

• 對(duì)于我們這里的演示，我們想要實(shí)現(xiàn)的是一個(gè)基于SvelteKit的應(yīng)用程序，我們?cè)诒镜亻_(kāi)發(fā)，有一個(gè)本地MongoDB數(shù)據(jù)存儲(chǔ)。
• 然后我們想把這個(gè)應(yīng)用部署到Vercel，讓它自動(dòng)使用MongoDB Atlas集群作為其數(shù)據(jù)存儲(chǔ)。這是一個(gè)非常常見(jiàn)的設(shè)置。順便說(shuō)一句，這對(duì)React/Next或Vue/Nuxt來(lái)說(shuō)，大部分工作都是一樣的?；驹O(shè)置見(jiàn)圖1。

Vercel-MongoDB 應(yīng)用程序的開(kāi)發(fā)和生產(chǎn)架構(gòu)

SvelteKit 演示應(yīng)用程序

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

SvelteKit是一個(gè)全?？蚣?，所以我們將使用視圖中的load方法來(lái)訪問(wèn)后端并加載任何現(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()
      }
    };
  }
復(fù)制代碼

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

在后端，/apothegm獲取方法看起來(lái)像清單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 }
  };
}
復(fù)制代碼

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

清單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
復(fù)制代碼

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

注意這個(gè)文件的第一行是調(diào)用導(dǎo)入'dotenv/config' 。這個(gè)導(dǎo)入導(dǎo)致dotenv庫(kù)自我啟動(dòng)。dotenv的目的是為應(yīng)用程序從配置文件中加載環(huán)境變量（以一種與操作系統(tǒng)無(wú)關(guān)的方式）。更多相關(guān)信息請(qǐng)點(diǎn)擊這里。

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

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

// .env
MONGODB_URI="mongodb://localhost:27017
復(fù)制代碼

// .gitignore
.env
.env.*
復(fù)制代碼

這意味著在開(kāi)發(fā)過(guò)程中，我們的應(yīng)用程序?qū)糁斜镜豈ongoDB的安裝。在這一點(diǎn)上，你可以用npm run dev 來(lái)啟動(dòng)該應(yīng)用程序，一切都應(yīng)該正常。

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

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

在任何情況下，你都需要Vercel和MongoDB Atlas的賬戶。這兩項(xiàng)服務(wù)都提供了免費(fèi)的業(yè)余級(jí)別的賬戶，設(shè)置起來(lái)快速而簡(jiǎn)單。MongoDB注冊(cè)，Vercel注冊(cè)。

將項(xiàng)目導(dǎo)入Vercel

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

一旦導(dǎo)入完成，Vercel將自動(dòng)構(gòu)建和部署該項(xiàng)目。(松了一口氣：沒(méi)有額外的基礎(chǔ)設(shè)施工作。) 構(gòu)建將成功，但當(dāng)你查看該項(xiàng)目時(shí)將顯示一個(gè)錯(cuò)誤。這是因?yàn)闆](méi)有可用的數(shù)據(jù)存儲(chǔ)。

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

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

回到Vercel來(lái)添加集成

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

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

接下來(lái)，你可以選擇將集成添加到所有項(xiàng)目或特定項(xiàng)目中。為了這個(gè)演示，讓我們選擇 "添加到所有 "并點(diǎn)擊繼續(xù)。

暫時(shí)回到MongoDB Atlas中

添加集成將在另一個(gè)窗口中啟動(dòng)一個(gè)MongoDB注冊(cè)頁(yè)面。如果你還沒(méi)有一個(gè)MongoDB賬戶，你可以設(shè)置一個(gè)。否則，請(qǐng)登錄到你現(xiàn)有的賬戶。

接下來(lái)，一個(gè)對(duì)話框?qū)⒃儐?wèn)將集成添加到哪個(gè)MongoDB Atlas組織。使用你為你的用戶設(shè)置的默認(rèn)值即可。

最后，在最后一個(gè)屏幕上點(diǎn)擊確認(rèn)按鈕，接受你必須手動(dòng)卸載集成，如果你想刪除它，如屏幕2所示。

屏幕2.在MongoDB Atlas中確認(rèn)組織權(quán)限

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

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

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

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

回到Vercel進(jìn)行測(cè)試

回到Vercel中，你會(huì)在集成標(biāo)簽中看到MongoDB Atlas集成，如屏幕4。

屏幕4.Vercel中的MongoDB Atlas集成

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

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

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

如果你點(diǎn)擊變量中的眼睛圖標(biāo)，你可以看到值，它應(yīng)該指向你的MongoDB Atlas集群。這驗(yàn)證了環(huán)境變量在部署時(shí)對(duì)應(yīng)用程序是可用的。

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

屏幕6.在prod中運(yùn)行的Vercel-MongoDB Atlas集成

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

總的來(lái)說(shuō)，這種整合允許用一種更標(biāo)準(zhǔn)化的方法來(lái)利用全球 "擴(kuò)展到零 "的基礎(chǔ)設(shè)施，而不需要太多麻煩。

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

最新評(píng)論