نحوه استقرار با Vercel و MongoDB Atlas بدون حتی تلاش

اکنون می توانید برنامه وب خود را در Vercel مستقر کنید و به طور خودکار از یک کلاستر MongoDB Atlas به عنوان ذخیره داده استفاده کنید. در اینجا نحوه

یکی از جالب ترین MongoDB World 2022 اعلان‌ها انتشار ادغام Vercel-MongoDB است. آنچه در اینجا می بینیم ساده سازی و استانداردسازی تدریجی ادغام اجزای زیرساخت بزرگ است. شما می‌توانید از قدرت زیادی در ذخیره‌سازی داده و میزبان خود با حداقل سر و صداهای معماری استفاده کنید.

مشاهده کمتر با معماری به معنای زمان بیشتری برای کار روی اهداف اصلی شماست. بیایید نگاهی به ادغام ساده جدید بیندازیم.

استفاده از MongoDB و Vercel با هم از قبل نسبتا آسان بود. با این حال، ادغام رسمی جدید یک رویکرد منسوب را ارائه می دهد که استاندارد است و چندین ویژگی خوب را به همراه دارد. بیایید از این پروژه استفاده کنیم که قبلاً یکپارچه سازی Vercel-MongoDB را نمایش می دادم تا ببینم کارها چگونه کار می کنند .

لولا بین زیرساخت اطلس Vercel و MongoDB شما به متغیر محیطی MONGODB_URI می رسد. ادغام رسمی این را تعریف می کند و آن را برای شما به اشتراک می گذارد، همراه با مجوزهای لازم.

برای نسخه‌ی نمایشی ما در اینجا، چیزی که می‌خواهیم به آن برسیم یک برنامه مبتنی بر SvelteKit است که به صورت محلی، با یک فروشگاه داده MongoDB محلی توسعه می‌دهیم. سپس می‌خواهیم این برنامه را در Vercel مستقر کنیم و به‌طور خودکار از یک خوشه MongoDB Atlas به عنوان ذخیره داده‌اش استفاده کنیم. این یک تنظیم بسیار رایج است. اتفاقاً بسیاری از این موارد برای React/Next یا Vue/Nuxt یکسان عمل می‌کنند. تنظیمات اولیه در شکل ۱ نشان داده شده است.

شکل ۱. معماری های Dev و Prod برای برنامه Vercel-MongoDB

برنامه نمایشی SvelteKit

برنامه آزمایشی ما یک برنامه SvelteKit است که امکان ایجاد یک سند ساده، یک آپوتگم، با یک متن و یک فیلد نویسنده را فراهم می کند و لیستی از آپوتگم ها را در پایگاه داده نمایش می دهد. برای متن اسناد خود، از برخی از ابهامات صریح استفاده خواهیم کرد.

SvelteKit یک چارچوب تمام پشته است، بنابراین ما از روش بارگذاری در نمای خود برای ضربه زدن به انتهای صفحه و بارگیری هر گونه آپوتگم موجود، مانند فهرست ۱، استفاده خواهیم کرد.

فهرست ۱. روش load() SvelteKit

 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 get شبیه فهرست ۲ است.

فهرست ۲. بازیابی آپوتگم ها از قسمت پشتی

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 }
  };
}

فهرست ۲ بدنه ای پر از آپوتگم های بازیابی شده از ذخیره داده، یعنی از پایگاه داده آپوتگم و مجموعه آپوتگم ها را برمی گرداند. این روش تا حد زیادی به شی clientPromise وارد شده از lib/mongo متکی است. بیایید به بیت های مربوط به آن ماژول در لیست ۳ نگاه کنیم.

فهرست ۳. کمک کننده 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

فهرست ۳ کار خود را با ایجاد اتصال به یک نمونه MongoDB از طریق متغیر محیطی MONGODB_URI انجام می دهد. این متغیر با فراخوانی process.env["MONGODB_URI"] از محیط بیرون کشیده می شود.

توجه داشته باشید که خط اول این فایل فراخوانی برای وارد کردن 'dotenv/config' است. این واردات باعث می شود که کتابخانه dotenv خود را بوت استرپ کند. هدف dotenv بارگذاری متغیرهای محیطی برای برنامه از فایل های پیکربندی (به روشی OS-agnostic) است. اطلاعات بیشتر در مورد آن اینجا.

برای برنامه‌مان، می‌خواهیم آن متغیر را در حین توسعه روی یک URI محلی تنظیم کنیم و در حین تولید آن را روی یک URL اطلس از راه دور MongoDB تنظیم کنیم. ما می‌توانیم این کار را با ارائه یک فایل .env انجام دهیم که dotenv در طول توسعه محلی پیدا می‌کند اما نه در prod. برای انجام این کار، ما فایل را در کنترل نسخه بررسی نمی کنیم – ما آن را به gitignore. اضافه می کنیم. بیت های مربوطه از هر دو فایل در فهرست ۴ نشان داده شده است.

فهرست ۴. به .env و .gitignore می افزاید

// .env
MONGODB_URI="mongodb://localhost:27017

// .gitignore
.env
.env.*

این بدان معناست که در طول توسعه، برنامه ما به نصب MongoDB محلی ضربه می‌زند. در این مرحله، می‌توانید برنامه را با npm run dev راه‌اندازی کنید و همه چیز باید کار کند.

تنظیمات تولید Vercel-MongoDB

اکنون که برنامه‌نویس راه‌اندازی شده است، توجه خود را به راه‌اندازی prod یا چیزی که prod می‌گوییم معطوف خواهیم کرد. در یک موقعیت واقعی، شما مراحل تست و مرحله‌بندی را اجرا می‌کنید و سپس از مرحله به مرحله تولید ارتقا می‌دهید.

در هر صورت، به حساب‌هایی در Vercel و MongoDB Atlas نیاز دارید. هر دو سرویس حساب‌های رایگان سطح سرگرمی را ارائه می‌کنند که راه‌اندازی سریع و آسانی دارند: ثبت‌نام MongoDB , ثبت نام در Vercel.

پروژه را به Vercel وارد کنید

هنگامی که حساب های خود را دارید، می توانید وارد Vercel شوید، یک پروژه جدید ایجاد کنید و کد پروژه را وارد کنید. دوباره آن پروژه GitHub: https://github.com/MTyson/sveltekit-vercel-mongo.

اکنون می‌خواهید یک خوشه در MongoDB Atlas ایجاد کنید تا به عنوان خانه برای داده‌های تولید شما خدمت کند. در کنسول MongoDB خود، ایجاد یک خوشه رایگان آسان است (دستورالعمل‌ها اینجا). همچنین در طول مسیر یک کاربر پایگاه داده ایجاد خواهید کرد.

برای افزودن یکپارچه سازی به Vercel برگردید

هنگامی که یک خوشه برای استفاده در دسترس دارید، گام بعدی این است که یکپارچه سازی MongoDB را به حساب کاربری Vercel خود اضافه کنید. (در یک تنظیمات سازمانی، می توانید این را به تیم Vercel خود اضافه کنید.) به https://vercel.com/integrations بروید /mongodbatlas و روی دکمه “Add Integration” در بالا کلیک کنید. یک مدال حاوی یک منوی کشویی به شما نمایش داده می شود و حسابی که می خواهید استفاده کنید باید در آنجا ظاهر شود، مانند صفحه ۱ زیر.

صفحه ۱. ادغام MongoDB Atlas را به Vercel اضافه کنید

در مرحله بعد به شما این امکان داده می شود که یکپارچه سازی را به همه پروژه ها یا به یک پروژه خاص اضافه کنید. به خاطر این نسخه نمایشی، بیایید «افزودن به همه» را انتخاب کرده و ادامه را بزنید.

به طور موقت به MongoDB Atlas بازگشته است

افزودن ادغام، صفحه ثبت نام MongoDB را در پنجره دیگری راه اندازی می کند. اگر قبلاً یک حساب MongoDB ندارید، می توانید آن را راه اندازی کنید. در غیر این صورت، به حساب موجود خود وارد شوید.

در مرحله بعد، یک گفتگو از سازمان MongoDB Atlas می پرسد که ادغام را به کدام سازمان اضافه کند. فقط از پیش فرضی که برای کاربر خود تنظیم کرده اید استفاده کنید.

در نهایت، دکمه تأیید را در صفحه نهایی فشار دهید تا بپذیرید که اگر می‌خواهید ادغام را حذف کنید، همانطور که در صفحه ۲ نشان داده شده است، باید به صورت دستی آن را حذف کنید.

صفحه ۲. تصدیق دسترسی سازمان در MongoDB Atlas

اکنون پروژه MongoDB Atlas را که انتخاب کرده‌اید و خوشه‌های درون آن را می‌بینید. شما یک خوشه را در کادر دراپ سمت چپ به یک یا چند پروژه Vercel در چند انتخابی سمت راست مرتبط خواهید کرد. در مورد ما، می‌خواهیم پروژه Vercel را که قبلاً ایجاد کرده‌ایم به انتخاب سمت راست اضافه کنیم. می توانید این را در صفحه ۳ ببینید.

صفحه ۳. پروژه Vercel را به خوشه MongoDB Atlas مرتبط کنید

مرحله بعدی ایجاد پل بین خوشه MongoDB Atlas و پروژه Vercel است. مطمئن شوید که پروژه درست را در سمت Vercel انتخاب کرده اید!

وقتی این مورد برقرار شد، پروژه Vercel به طور خودکار به متغیر محیطی (MONGODB_URL) دسترسی خواهد داشت که باید به راحتی به ذخیره‌گاه داده متصل شویم.

برای آزمایش به Vercel برگردید

در Vercel، ادغام‌های MongoDB Atlas را مانند صفحه ۴ در برگه Integrations مشاهده خواهید کرد.

صفحه ۴. ادغام MongoDB Atlas در Vercel

از اینجا می‌توانید تغییراتی در سمت Vercel ادغام ایجاد کنید (از جمله حذف نصب در صورت تمایل، با انتخاب Manage -> Uninstall).

بعد بررسی می‌کنیم که پروژه Vercel متغیر محیطی جدیدی را که به نصب MongoDB Atlas اشاره دارد، گرفته است. پروژه Vercel را باز کنید و روی تنظیمات کلیک کنید. در تنظیمات، روی “Environment Variables” در منوی سمت چپ کلیک کنید. سپس باید یک متغیر MONGODB_URI را ببینید که در آنجا فهرست شده است، مانند صفحه ۵.

صفحه ۵. متغیرهای محیطی در پروژه Vercel

اگر روی نماد چشم در متغیر کلیک کنید، می توانید مقداری را ببینید که باید به خوشه MongoDB Atlas شما اشاره کند. این تأیید می کند که متغیر محیط در هنگام استقرار در دسترس برنامه است.

اکنون اگر روی پروژه کلیک کنید تا آن را مشاهده کنید، می‌بینید که مانند صفحه ۶ با داده‌های هدایت‌شده توسط خوشه Atlas اجرا می‌شود.

صفحه نمایش ۶. در حال اجرا در پرود با ادغام Vercel-MongoDB Atlas

خط پایانی این است که ادغام Vercel-MongoDB به ما یک راه ساده برای اتصال برنامه ما همانطور که در Vercel مستقر شده است به فروشگاه داده خود همانطور که در MongoDB Atlas اجرا می شود، می دهد. یک رویکرد مشابه می‌تواند برای مرتبط کردن برنامه‌ها به داده‌ها در محیط‌های مختلف، از آزمایش، مرحله‌بندی، تا تولید استفاده شود.

به طور کلی، ادغام یک رویکرد استانداردتر را برای استفاده از زیرساخت جهانی “مقیاس تا صفر” با حداقل سر و صدا امکان پذیر می کند.