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

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

🔔🔔🔔 بخاطر باگ‌های زیاد ویرگول در نمایش کد در مقاله، پیشنهاد میکنم مطلب رو از اینجا مطالعه کنید: لینک مقاله در وبلاگ yavarjs.ir

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

🚀 شما می‌توانید کد کامل مطرح‌شده در این مقاله را در این مخزن 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 و ایجاد اپ جدید:

nest new my-app

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

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

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

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

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

import { ExpressAdapter } from &quot@nestjs/platform-express&quot
import { NestFactory } from &quot@nestjs/core&quot
import express, { Request, Response } from &quotexpress&quot
import { Express } from &quotexpress&quot
import { INestApplication } from &quot@nestjs/common&quot
import { AppModule } from &quot./app.module.js&quot

export class AppFactory {
  static create(): {
    appPromise: Promise<INestApplication<any>>
    expressApp: Express
  } {
    const expressApp = express()
    const adapter = new ExpressAdapter(expressApp)
   const appPromise = NestFactory.create(AppModule, adapter)
    appPromise
      .then((app) => {
        app.enableCors({
          exposedHeaders: &quot*&quot,
        })
        app.init()
      })
      .catch((err) => {
        throw err
      })
    expressApp.use((req: Request, res: Response, next) => {
      appPromise
        .then(async (app) => {
          await app.init()
         next()
    })
        .catch((err) => next(err))
    })
    return { appPromise, expressApp }
  }
}

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

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

import { AppFactory } from &quot./AppFactory.js&quot

async function bootstrap() {
  const { appPromise } = AppFactory.create()
  const app = await appPromise

  await app.listen(process.env.PORT ?? 3000)
}
bootstrap()

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

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

/**
 * This file exports Express instance for specifically for the deployment of the app on Vercel. */
import { AppFactory } from &quot../src/AppFactory.js&quot
export default AppFactory.create().expressApp

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

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

{
  &quotversion&quot: 2,
  &quotbuildCommand&quot: &quotnpm run build&quot,
  &quotoutputDirectory&quot: &quot.&quot,
  &quotrewrites&quot: [
    {
      &quotsource&quot: &quot/(.*)&quot,
      &quotdestination&quot: &quot/api&quot
    }
  ]
}

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

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