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

Express 앱에 대한 Vercel의 지원

Vercel은 다음과 같은 방법으로 Express 앱을 배포할 수 있는 편리한 기능을 제공합니다.

1. API에서 Express 앱 개체를 노출합니다.

2. 수신되는 모든 트래픽을 이 단일 API로 전달하는 재작성 규칙 정의

NestJS의 기본 Express 앱 개체를 유사하게 노출하여 NestJS를 배포하기 위해 Express 배포에 대한 Vercel의 공식 가이드를 따랐습니다.

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 파일이 있습니다. Listen 메소드의 호출만 유지하면서 모든 것을 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;

6단계 - 추가 vercel.json 파일

Vercel을 구성하려면 프로젝트의 루트 디렉터리에 vercel.json이라는 파일을 생성하세요. 여기에서는 Vercel이 Express 앱을 사용하여 모든 수신 트래픽(문서)을 처리하도록 재작성 규칙을 정의합니다.

또한 api 디렉터리에 있는 tsconfig.json 파일을 사용하여 Vercel의 TypeScript 컴파일러를 구성할 수도 있습니다. "경로 매핑" 및 "Pr객체 참조"
를 제외한 대부분의 옵션이 지원됩니다.

nest new my-app

7단계 - Vercel에서 프로젝트 생성

축하해요?! 우리는 거의 끝났습니다. 이제 git 저장소를 만들고 소스 코드를 여기에 푸시하세요. 그런 다음 Vercel 계정으로 이동하여 새 프로젝트를 생성하고 git 저장소를 가져옵니다. 이 기사의 예시 GitHub 저장소를 사용할 수도 있습니다.

위 내용은 Vercel에 빠르고 간단한 NestJS 앱 배포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!