Vercel での高速かつシンプルな NestJS アプリのデプロイメント-jsチュートリアル-php.cn

Vercel での高速かつシンプルな NestJS アプリのデプロイメント

Mary-Kate Olsen

リリース： 2024-11-29 06:23:10

オリジナル

170 人が閲覧しました

この記事は私のブログでもご覧いただけます: 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 アプリオブジェクトを公開します。
すべての受信トラフィックをこの 1 つの API に送信する書き換えルールを定義します。

Express をデプロイするための Vercel の公式ガイドに従い、NestJS の基盤となる Express アプリオブジェクトを同様に公開して NestJS をデプロイしました。

ステップ 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 ファイルに移動し、listen メソッドの呼び出しのみを保持します:

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 に提供します (ドキュメント)。 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;

ログイン後にコピー