Penerapan Apl NestJS yang Pantas dan Mudah pada Vercel

Artikel ini juga tersedia di blog saya: https://hamidreza.tech/nestjs-on-vercel.

Panduan ini bermanfaat jika anda menggunakan penyesuai Express. Untuk aplikasi NestJS yang menggunakan penyesuai Fastify, pautan ini mungkin membantu:

• https://fastify.dev/docs/latest/Guides/Serverless/#vercel

• https://github.com/vercel/examples/tree/main/starter/fastify

? Anda boleh mengakses kod sumber lengkap yang dibincangkan dalam artikel ini di repositori GitHub ini: https://github.com/mahdavipanah/nestjs-on-vercel

Sokongan Vercel untuk Apl Ekspres

Vercel menawarkan ciri mudah untuk menggunakan apl Express anda dengan:

1. Mendedahkan objek apl Express dalam API.

2. Mentakrifkan peraturan tulis semula yang mengarahkan semua trafik masuk ke API tunggal ini.

Saya mengikuti panduan rasmi Vercel untuk menggunakan Express untuk menggunakan NestJS dengan mendedahkan objek apl Express asas NestJS yang sama.

Langkah 1 - buat apl NestJS

Langkau langkah ini jika anda sudah menyediakan apl NestJS.

Pasang NestJS dan buat apl baharu:

nest new my-app

Langkah 2 - Pasang Pakej NPM yang Diperlukan

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

Langkah 3 - Buat fail src/AppFactory.ts

Fail ini berfungsi sebagai modul tunggal yang mengurus semua pemasangan but apl NestJS yang diperlukan dan mengeksport kedua-dua apl NestJS dan objek apl Express asasnya.

Buat fail bernama AppFactory.ts di dalam direktori src dalam akar projek anda:

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

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) => {
        // You can add all required app configurations here

        /**
         * Enable cross-origin resource sharing (CORS) to allow resources to be requested from another domain.
         * @see {@link https://docs.nestjs.com/security/cors}
         */
        app.enableCors({
          exposedHeaders: '*',
        });

        app.init();
      })
      .catch((err) => {
        throw err;
      });

    // IMPORTANT This express application-level middleware makes sure the NestJS app is fully initialized
    expressApp.use((req: Request, res: Response, next) => {
      appPromise
        .then(async (app) => {
          await app.init();
          next();
        })
        .catch((err) => next(err));
    });

    return { appPromise, expressApp };
  }
}

Langkah 4 - Ubah suai Fail src/main.ts

Secara lalai, NestJS mempunyai fail src/main.ts yang berfungsi sebagai titik masuk aplikasi, termasuk semua konfigurasi dan bootstrapping. Ubah suai fail ini untuk mengalihkan segala-galanya ke fail AppFactory.ts, hanya mengekalkan seruan kaedah dengar:

import { AppFactory } from './AppFactory.js';

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

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

Langkah 5 - Tambah Fail api/index.ts

Secara lalai, masa jalan Vercel membina dan menyediakan sebarang fungsi yang dibuat dalam direktori /api projek kepada Vercel (doc). Memandangkan Vercel memahami dan mengendalikan objek aplikasi Express, buat fungsi dalam direktori ini yang mengeksport objek aplikasi Express:

/**
 * This file exports Express instance for specifically for the deployment of the app on Vercel.
 */

import { AppFactory } from '../src/AppFactory.js';

export default AppFactory.create().expressApp;

Langkah 6 - Tambah Fail vercel.json

Buat fail bernama vercel.json dalam direktori akar projek untuk mengkonfigurasi Vercel. Di sini, tentukan peraturan tulis semula untuk Vercel menggunakan apl Express untuk menyampaikan semua trafik masuk (dokumen).

Anda juga boleh menggunakan fail tsconfig.json pada direktori api untuk mengkonfigurasi pengkompil TypeScript Vercel. Kebanyakan pilihan disokong selain daripada "Pemetaan Laluan" dan "PrRujukan Ojeks".

nest new my-app

Langkah 7 - Buat Projek di Vercel

Tahniah?! Kami hampir selesai. Sekarang, buat repositori git dan tolak kod sumber anda kepadanya. Kemudian, pergi ke akaun Vercel anda, buat projek baharu dan import repositori git. Anda juga boleh menggunakan contoh repositori GitHub artikel ini.

Atas ialah kandungan terperinci Penerapan Apl NestJS yang Pantas dan Mudah pada Vercel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!