Vercel 上快速、簡單的 NestJS 應用程式部署-js教程-PHP中文網

Vercel 上快速、簡單的 NestJS 應用程式部署

Mary-Kate Olsen

發布： 2024-11-29 06:23:10

原創

192 人瀏覽過

這篇文章也可以在我的部落格上找到：https://hamidreza.tech/nestjs-on-vercel。

如果您使用 Express 轉接器，本指南會很有幫助。對於使用 Fastify 適配器的 NestJS 應用程序，這些連結可能會有所幫助：

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

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

？您可以在此 GitHub 儲存庫中存取本文中討論的完整原始程式碼：https://github.com/mahdavipanah/nestjs-on-vercel

Vercel 對 Express 應用程式的支持

Vercel 提供了一項便捷的功能，用於透過以下方式部署 Express 應用程式：

在 API 中公開 Express 應用程式物件。
定義一個重寫規則，將所有傳入流量導向此單一 API。

我依照 Vercel 的官方 Express 部署指南部署 NestJS，方法類似地公開 NestJS 的底層 Express 應用程式物件。

第 1 步 - 建立一個 NestJS 應用程式

如果您已經設定了 NestJS 應用，請跳過此步驟。

安裝 NestJS 並建立一個新應用程式：

nest new my-app

登入後複製

第 2 步 - 安裝必要的 NPM 軟體包

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

登入後複製

步驟 3 - 建立 src/AppFactory.ts 文件

此檔案用作管理所有必要的 NestJS 應用程式引導的單一模組，並匯出 NestJS 應用程式及其底層 Express 應用程式物件。

在專案根目錄的 src 目錄中建立一個名為 AppFactory.ts 的檔案：

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

登入後複製

第 4 步 - 修改 src/main.ts 文件

預設情況下，NestJS 有一個 src/main.ts 檔案作為應用程式的入口點，包括所有配置和引導。修改此檔案以將所有內容移至 AppFactory.ts 檔案中，僅保留監聽方法的呼叫：

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

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

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

登入後複製

第 5 步 - 新增 api/index.ts 文件

預設情況下，Vercel 執行階段會建置專案的 /api 目錄中建立的任何函數並將其提供給 Vercel (doc)。由於 Vercel 理解並處理 Express 應用程式對象，因此在此目錄中建立一個導出 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;

登入後複製