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

この記事は私のブログでもご覧いただけます: 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 アプリをデプロイするための便利な機能を提供します。

1. API で Express アプリ オブジェクトを公開します。

2. すべての受信トラフィックをこの 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;

ステップ 6 - 追加 vercel.json ファイル

Vercel を構成するには、プロジェクトのルート ディレクトリに vercel.json という名前のファイルを作成します。ここで、Express アプリを使用してすべての受信トラフィックを処理するための Vercel の書き換えルールを定義します (ドキュメント)。

API ディレクトリにある tsconfig.json ファイルを使用して Vercel の TypeScript コンパイラを構成することもできます。 "Path Mappings" と "Project References" を除くほとんどのオプションがサポートされています。

nest new my-app

ステップ 7 - Vercel でプロジェクトを作成する

おめでとうございます?!ほぼ完了です。次に、git リポジトリを作成し、ソース コードをそこにプッシュします。次に、Vercel アカウントに移動し、新しいプロジェクトを作成し、git リポジトリをインポートします。この記事のサンプル GitHub リポジトリを使用することもできます。

以上がVercel での高速かつシンプルな NestJS アプリのデプロイメントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。