با ترکیب Vercel، SvelteKit و MongoDB Atlas چه چیزی به دست می آورید؟ یک پشته توسعه قدرتمند بدون سرور که به شدت افزایش می یابد.
ابر به سمت درجات بالاتر انتزاع به تکامل خود ادامه می دهد. پلتفرم‌های استقرار و میزبانی خودکار، فریم‌ورک‌های فرانت‌اند، و پایگاه‌های داده پشتیبان به طور فزاینده‌ای قدرتمند و پیچیده‌تر می‌شوند و یکپارچه‌سازی آنها آسان‌تر از همیشه است. این مقاله به شما نشان می‌دهد که چگونه می‌توانید Vercel، SvelteKit و MongoDB را برای توسعه بدون سرور فول استک ادغام کنید. هر یک از این فناوری ها در حوزه خود پیشرو هستند. با استفاده از آنها در کنار هم، توسعه دهندگان می توانند با کمی کار به قابلیت های چشمگیری دست یابند.
بیت‌های با اندازه: نمونه برنامه
برای این نمایش، ما قصد داریم یک برنامه کاربردی بسازیم که یک موجودیت دو فیلدی ایجاد می کند تا در یک پایگاه داده ذخیره شود. از دیدگاه کاربر، برنامه فرمی را با دو فیلد ارائه می‌کند که یکی حاوی آخرالزمان و دیگری نویسنده آن است. (یک آفتگم کمی خرد است.)
تمرکز ما در اینجا این است که عناصر این پازل قدرتمند – Vercel، SvelteKit و MongoDB – را گرد هم بیاوریم تا نمونه برنامه را از توسعه تا تولید طی کنیم.
برای شروع، از SvelteKit برای ایجاد نمای جلویی در Svelte استفاده می کنیم. این نما درخواست ها را به یک نقطه پایانی ارسال می کند. مشابه Express.js، SvelteKit نقاط پایانی را به عنوان انتزاعی از زمینه درخواست-پاسخ در نظر می گیرد.
انتزاع، استقرار در Vercel را به عنوان یک زمینه بدون سرور آسان می کند. نقطه پایانی Vercel به سادگی داده های دریافتی را در مجموعه ای در MongoDB Atlas، یک پایگاه داده بومی ابری به عنوان یک سرویس، قرار می دهد.
این راه‌اندازی برای نیازهای توسعه ما به خوبی کار می‌کند. هنگامی که صفحه اصلی را داشته باشیم، یک مخزن در GitHub ایجاد می کنیم و پروژه را بررسی می کنیم. سپس، می‌توانیم از Vercel برای وارد کردن پروژه خود و استقرار آن در یک IP عمومی استفاده کنیم.
توسعه کامل پشته: SvelteKit
بیایید با محیط توسعه خود، SvelteKit شروع کنیم. همانطور که در اسناد چارچوب توضیح داده شده است، می توانید یک برنامه Svelte را از خط فرمان SvelteKit شروع کنید. هنگامی که برنامه به صورت محلی اجرا می شود، می توانید از آن بازدید کرده و صفحه خوش آمدگویی SvelteKit را ببینید.
برای شروع، اجازه دهید صفحه اصلی برنامه را طوری تغییر دهیم که یک فرم ساده را شامل شود. /src/routes/index.svelte را با تغییرات مشاهده شده در فهرست ۱ ویرایش کنید.
<script context="module">
// export const prerender = true; Comment this out - this is now a dynamic page
</script>
<script>
import Counter from '$lib/Counter.svelte';
async function onSubmit(e) {
const formData = new FormData(e.target);
const data = {};
for (let field of formData) {
const [key, value] = field;
data[key] = value;
}
console.log("formData: " + formData);
const res = await fetch('/', {
method: 'POST',
body: JSON.stringify(data)
})
const json = await res.json()
result = JSON.stringify(json)
}
</script>
<svelte:head>
<title>Home</title>
</svelte:head>
<section>
<h1>
<!-- remains the same ... -->
</h1>
<form on:submit|preventDefault={onSubmit}>
<label for="apothegm">Apothegm</label>
<input type="text" name="apothegm" id="apothegm"/>
<label for="author">Author</label>
<input type="text" name="author" id="author"/>
<button type="submit">Submit</button>
</form>
<h2>
try editing <strong>src/routes/index.svelte</strong>
<!-- rest is the same ... -->
بسیاری از index.svelte ثابت می ماند. توجه داشته باشید که من صادرات ماژول را در سر صفحه کامنت گذاشتم تا دیگر از قبل رندر نشده باشد. (یکی از ابرقدرت های SvelteKit توانایی آن در پیش رندر کردن کامل صفحاتی است که به بک اند نمی آیند. ما باید این عملکرد را غیرفعال کنیم زیرا صفحه ما به انتهای صفحه نمایش داده می شود.)
بررسی عملکرد پست
تماس POST API در قسمت پشتی توسط src/routes/index.js، توسط هر تابعی که تحت نام “پست” قرار دارد، مدیریت می شود. اکنون به آن بپردازیم. فهرست ۲ بدنه index.js را نشان می دهد.
import clientPromise from '../lib/mongo';
export async function post ({request}) {
const dbConnection = await clientPromise;
const db = dbConnection.db();
const collection = db.collection('apothegm');
let apothegm = await request.json();
const dbApothegm = await collection.insertOne(apothegm);
return { status: 200, body: { dbApothegm } }
}
اولین چیزی که در فهرست ۲ می بینیم، وارد کردن به یک کتابخانه کمکی است که در یک لحظه آن را کاوش خواهیم کرد. بعد خود تابع post است که از طریق ساختارشکنی از چارچوب SvelteKit یک آرگومان درخواست را می گیرد. این آبجکت درخواست هر چیزی را که برای رسیدگی به درخواست HTTP نیاز داریم را در خود جای می دهد.
در مورد ما، یک اتصال پایگاه داده را با استفاده از Helper پایگاه داده باز می کنیم، یک اشاره گر به مجموعه “apothegm” می گیریم، سپس محتویات بدنه جلویی را از طریق await request.json() روش.
در نهایت، این روش بدنه درخواست را در مجموعه پایگاه داده قرار می دهد و وضعیت "همه خوب" ۲۰۰ را برمی گرداند.
اتصال MongoDB
اکنون، اجازه دهید به فایل /src/lib/mongo.js که در لیست ۳ نشان داده شده است، نگاهی بیندازیم و از آن برای ضربه زدن به پایگاه داده استفاده می کنیم. این تا حد زیادی کمک کننده متعارفی است که توسط مستندات MongoDB ارائه شده است، با یک تغییر جزئی. همچنین توجه داشته باشید که برای هدف نمایش، من URL پایگاه داده را مستقیماً در فایل قرار دادم. این کار را در زندگی واقعی انجام ندهید! این یک حفره امنیتی آشکار است. برای یک برنامه دنیای واقعی، باید URL را به یک متغیر محیطی خارجی تبدیل کنید.
import dotenv from 'dotenv';
dotenv.config();
import { MongoClient } from 'mongodb';
//const uri = process.env['MONGODB_URI'];
// **Don’t do this in real life**:
const uri = "mongodb+srv://<username>:<password>@cluster0.foobar.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
const options = {
useUnifiedTopology: true,
useNewUrlParser: true,
}
let client
let clientPromise
if (!uri) {
throw new Error('Please add your Mongo URI to .env.local')
}
if (process.env['NODE_ENV'] === 'development') {
// In development mode, use a global variable
// so that the value is preserved across module reloads
// caused by HMR (Hot Module Replacement).
if (!global._mongoClientPromise) {
client = new MongoClient(uri, options)
global._mongoClientPromise = client.connect()
}
clientPromise = global._mongoClientPromise
} else {
// In production mode, it's best to
// not use a global variable.
client = new MongoClient(uri, options)
clientPromise = client.connect()
}
// Export a module-scoped MongoClient promise.
// By doing this in a separate module,
// the client can be shared across functions.
export default clientPromise;
این کمک کننده بسیار ساده است. بزرگترین پیچیدگی در مدیریت توسعه در مقابل محیط های تولید است. بیایید به راه اندازی پایگاه داده ادامه دهیم.
MongoDB Atlas: پایگاه داده به عنوان یک سرویس
MongoDB یک پایگاه داده سند محور، یکی از اولین و برجسته ترین ذخیره سازهای داده NoSQL است. Atlas سرویس ابری مدیریت شده MongoDB یا پایگاه داده به عنوان سرویس (DBaaS) است. MongoDB Atlas به شما امکان می دهد به یک پایگاه داده میزبانی شده توسط MongoDB دسترسی داشته باشید و از طریق یک API از آن استفاده کنید.
توجه داشته باشید که برای این مرحله بعدی، باید یک حساب رایگان MongoDB Atlas راه اندازی کنید. ثبت نام ساده و سریع است. هنگامی که یک حساب کاربری جدید دارید، به داشبورد هدایت خواهید شد، جایی که با فشار دادن دکمه پروژه جدید، پروژه جدیدی ایجاد خواهید کرد.
در مرحله بعد، از شما خواسته می‌شود که نام پروژه جدید را که من آن را apothegm-foundry گذاشته‌ام، نام ببرید. همچنین به شما این امکان داده می شود که کاربران و مجوزها را اضافه کنید، اما می توانید این پیشنهاد را نادیده بگیرید زیرا به صورت خودکار اضافه شده اید. پروژه را با فشار دادن ایجاد پروژه تأیید کنید.
یک پایگاه داده اضافه کنید
یک پروژه یک سطل برای پایگاه داده است. اکنون، بیایید با کلیک کردن روی ساخت پایگاه داده یک پایگاه داده اضافه کنیم. در اینجا، به شما یک انتخاب سطح داده می شود. استفاده از یک پایگاه داده رایگان و مشترک برای اهداف ما کار می کند. وقتی آماده شدید، ایجاد را فشار دهید.
در مرحله بعد، مجموعه ای از انتخاب ها برای ارائه دهندگان و مناطق ابری به شما ارائه می شود. فعلاً می‌توانید پیش‌فرض را بپذیرید، اما خوشحالیم که می‌توانیم از بین خدمات وب آمازون (AWS)، پلتفرم ابری Google (GCP) یا Microsoft Azure انتخاب کنیم. روی ایجاد خوشه کلیک کنید.
در مرحله بعد، از شما دعوت شده است که یک کاربر برای پایگاه داده ایجاد کنید. می توانید یک ترکیب نام کاربری-رمز عبور یا یک کاربر مبتنی بر گواهی ایجاد کنید. ما نام کاربری و رمز عبور را برای سهولت در نظر خواهیم گرفت. ترکیبی را انتخاب کنید که به خاطر بسپارید و Create User را بزنید. این نام کاربری و رمز عبوری است که در mongo.js قرار می دهید.
اکنون، به از کجا می‌خواهید متصل شوید به پایین بروید. شما می توانید از آدرس IP محلی خود استفاده کنید اما برای این نسخه ی نمایشی فقط می توانید ۰.۰.۰.۰/۰ را وارد کنید. باز هم، ما در اینجا همه چیز را ساده نگه می داریم، اما شما یک آدرس IP تصادفی را برای یک برنامه کاربردی واقعی وارد نمی کنید. شما باید آدرس IP واقعی یا محدوده آدرس های IP را وارد کنید.
از کنسول اصلی MongoDB Atlas، همیشه می توانید رشته اتصال خود را با کلیک بر روی پایگاه داده و زدن دکمه اتصال پیدا کنید. با انجام این کار یک پاپ آپ برای شما ایجاد می شود که در آن می توانید گزینه اتصال با برنامه را انتخاب کنید. این گزینه رشته ای از فرم را ارائه می دهد:
mongodb+srv://<username>:<password>@cluster0.foobar.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
نام کاربری و رمز عبوری را که انتخاب کرده اید اضافه کنید، سپس به فایل mongo.js برگردید و رشته را در آنجا اضافه کنید. اکنون، وقتی از فرم در برنامه Svelte استفاده می‌کنید و ارسال را فشار می‌دهید، باید بتوانید به کنسول MongoDB Atlas بروید و دکمه مرور مجموعه را ببینید.
شما باید ورودیی را مشاهده کنید که منعکس کننده آنچه در فرم وارد کرده اید، مشابه آنچه من در فهرست ۴ دارم.
۱. _id:6228f438e294d2c79754b64f
۲. apothegm:"Form and emptiness are one"
۳. author:"Unknown"
بنابراین، محیط توسعه کار می کند. مرحله بعدی استقرار است.
برنامه را مستقر کنید: GitHub و Vercel
قبل از اینکه بتوانیم برنامه را با Vercel مستقر کنیم، باید یک مخزن منبع در GitHub ایجاد کنیم. به یک حساب GitHub رایگان نیاز دارید. با فرض داشتن آن، مراحل ایجاد یک مخزن جدید را دنبال کنید. سپس به خط فرمان بازگردید و مخزن را با کد برنامه خود پر کنید. (توجه داشته باشید که شروع کننده SvelteKit قبلاً یک فایل .gitignore اضافه کرده است.) پس از بررسی منبع برنامه در شعبه اصلی، آماده بازدید از Vercel هستید.
Vercel ثبت نام برای یک حساب رایگان "Hobby" را آسان می کند. من از حساب GitHub خود برای دسترسی SSO (یک ورود) به Vercel استفاده کردم. هنگامی که یک حساب کاربری دارید، مراحل را برای اتصال حساب GitHub خود و دادن مجوز به Vercel دنبال کنید.
همچنین باید به Vercel در داخل GitHub برای یک مخزن خاص یا همه مخازن که کد میزبانی می‌کنید، مجوز بدهید. فقط منوی کشویی نمایه حساب خود را باز کنید و روی تنظیمات ضربه بزنید، سپس به سمت چپ گزینه Integrations -> Applications بروید و روی آن کلیک کنید. اکنون در صفحه اصلی به سمت پایین به بخش دسترسی به مخزن بروید. در آنجا، می توانید به Vercel به مخزن خاص (همانطور که در شکل ۱ نشان داده شده است) یا همه آنها دسترسی داشته باشید.
شکل ۱. اعطای دسترسی به Vercel از طریق GitHub.
بعد، به Vercel بروید و مخزن را وارد کنید. توجه کنید که Vercel چگونه برنامه را به عنوان یک برنامه SvelteKit تشخیص می دهد. باید به طور یکپارچه برنامه را وارد و اجرا کند.
اکنون، به Vercel بروید و باید برنامه خود را در داشبورد ببینید. روی آن کلیک کنید و خلاصه باز می شود، که باید شبیه به صفحه در شکل ۲ باشد.
شکل ۲. نمای کلی برنامه در Vercel.
می‌توانید برنامه در حال اجرا را در یک URL مانند sveltekit-vercel-mongo.vercel.app کلیک کرده و باز کنید.
اگر اشتباه و نویسنده جدیدی وارد کنید، باید بتوانید کنسول را با استفاده از نمای مجموعه پایگاه داده MongoDB Atlas بارگیری مجدد کنید و آن را در آنجا منعکس کنید. برنامه تولید شما اکنون آماده است و در برابر یک پایگاه داده کار می کند.
نتیجه گیری
سه جزء در این پشته وجود دارد، و همه آنها به طور نسبتاً یکپارچه با هم کار می کنند. ورسل کارهای زیادی در پشت صحنه انجام داد تا استقرار تولید اتفاق بیفتد. در میان چیزهای دیگر، توجه داشته باشید که می‌توان آن را طوری پیکربندی کرد که به‌طور خودکار فشارهای جدید را در شاخه اصلی مستقر کند.
همچنین توجه داشته باشید که گزارش‌های ساخت و همچنین گزارش‌های برنامه در حال اجرا در دسترس هستند. بخش پشتیبان برنامه SvelteKit به عنوان یک عملکرد بدون سرور مستقر شد، بنابراین گزارش‌های آن با کلیک کردن روی Deployments –> Functions در دسترس هستند.
بدیهی است که کار باید انجام شود تا این برنامه آزمایشی را به چیزی تبدیل کنید که واقعاً بتوانید از آن استفاده کنید (به عنوان مثال، شما می خواهید پایگاه داده های مختلفی را برای توسعه و تولید می خواهید). نکته جالب این است که شما در حال حاضر یک چارچوب قدرتمند تمام پشته (SvelteKit)، خط لوله استقرار (Vercel) و ذخیره داده (MongoDB) دارید. و همه چیز بر روی زیرساختی اجرا می‌شود که می‌تواند در مقیاس انبوه باشد.
پست های مرتبط
با Vercel، SvelteKit و MongoDB بدون سرور بروید
با Vercel، SvelteKit و MongoDB بدون سرور بروید
با Vercel، SvelteKit و MongoDB بدون سرور بروید