استقرار سریع و ساده اپلیکیشن NestJS روی Vercel

بر اساس راهنمای رسمی Vercel و روش به‌روز

این راهنما برای کسانی که از Express adapter استفاده می‌کنند مفید است. برای اپلیکیشن‌های NestJS که از Fastify adapter استفاده می‌کنند، لینک‌های زیر ممکن است کمک‌کننده باشد:

• Fastify Guide for Serverless on Vercel
• Fastify Examples on GitHub

🚀 شما می‌توانید کد کامل مطرح‌شده در این مقاله را در این مخزن GitHub پیدا کنید: nestjs-on-vercel

پشتیبانی Vercel از Express Apps 🔗

Vercel ویژگی مناسبی برای استقرار Express app ارائه می‌دهد که شامل مراحل زیر است:

1. expose کردن شیء Express app در یک API.
2. تعریف یک rewrite rule که تمام ترافیک ورودی را به این API هدایت کند.

من برای استقرار NestJS از راهنمای رسمی Vercel برای Express استفاده کردم، به این صورت که شیء Express app زیربنایی NestJS را اکسپوز کردم.

مرحله ۱ - ساخت یک اپلیکیشن NestJS 🔗

اگر قبلاً یک اپ NestJS دارید، می‌توانید این مرحله را رد کنید.

نصب NestJS و ایجاد اپ جدید:

1nest new my-app

مرحله ۲ - نصب بسته‌های NPM موردنیاز 🔗

1npm install express @nestjs/platform-express
2npm install -D @types/express

مرحله ۳ - ساخت فایل src/AppFactory.ts 🔗

این فایل به‌عنوان یک ماژول واحد عمل می‌کند که تمامی پیکربندی‌های ضروری اپلیکیشن NestJS را مدیریت کرده و هم NestJS app و هم شیء Express app زیربنایی آن را اکسپورت می‌کند.

ساخت فایل AppFactory.ts در پوشه src:

 1import { ExpressAdapter } from "@nestjs/platform-express"
 2import { NestFactory } from "@nestjs/core"
 3import express, { Request, Response } from "express"
 4import { Express } from "express"
 5import { INestApplication } from "@nestjs/common"
 6import { AppModule } from "./app.module.js"
 7
 8export class AppFactory {
 9  static create(): {
10    appPromise: Promise<INestApplication<any>>
11    expressApp: Express
12  } {
13    const expressApp = express()
14    const adapter = new ExpressAdapter(expressApp)
15    const appPromise = NestFactory.create(AppModule, adapter)
16
17    appPromise
18      .then((app) => {
19        app.enableCors({
20          exposedHeaders: "*",
21        })
22
23        app.init()
24      })
25      .catch((err) => {
26        throw err
27      })
28
29    expressApp.use((req: Request, res: Response, next) => {
30      appPromise
31        .then(async (app) => {
32          await app.init()
33          next()
34        })
35        .catch((err) => next(err))
36    })
37
38    return { appPromise, expressApp }
39  }
40}

مرحله ۴ - ویرایش فایل src/main.ts 🔗

به‌طور پیش‌فرض، فایل src/main.ts نقطه ورودی اپلیکیشن است. این فایل را تغییر دهید تا تنها متد listen را فراخوانی کند:

1import { AppFactory } from "./AppFactory.js"
2
3async function bootstrap() {
4  const { appPromise } = AppFactory.create()
5  const app = await appPromise
6
7  await app.listen(process.env.PORT ?? 3000)
8}
9bootstrap()

مرحله ۵ - افزودن فایل api/index.ts 🔗

Vercel به‌طور پیش‌فرض هر فانکشنی که در پوشه api قرار دارد را اجرا می‌کند. بنابراین، یک فایل در این پوشه ایجاد کنید که شیء Express app را اکسپورت کند:

1/**
2 * This file exports Express instance for specifically for the deployment of the app on Vercel.
3 */
4
5import { AppFactory } from "../src/AppFactory.js"
6
7export default AppFactory.create().expressApp

مرحله ۶ - افزودن فایل vercel.json 🔗

در دایرکتوری روت پروژه یک فایل vercel.json ایجاد کنید تا Vercel را پیکربندی کنید:

 1{
 2  "version": 2,
 3  "buildCommand": "npm run build",
 4  "outputDirectory": ".",
 5  "rewrites": [
 6    {
 7      "source": "/(.*)",
 8      "destination": "/api"
 9    }
10  ]
11}

مرحله ۷ - ایجاد پروژه روی Vercel 🔗

تبریک 🎉! تقریباً تمام شد. حالا یک مخزن Git ایجاد کنید و کدتان را در آن push کنید. سپس وارد حساب Vercel خود شوید، یک پروژه جدید ایجاد کنید و مخزن Git را ایمپورت کنید. همچنین می‌توانید از مخزن GitHub مثال این مقاله استفاده کنید.

منبع: Fast and Simple NestJS App Deployment on Vercel از وبلاگ Software Alchemist