Vercel에 빠르고 간단한 NestJS 앱 배포-JS 튜토리얼-php.cn

Vercel에 빠르고 간단한 NestJS 앱 배포

Mary-Kate Olsen

풀어 주다： 2024-11-29 06:23:10

원래의

169명이 탐색했습니다.

이 기사는 내 블로그(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 앱을 배포할 수 있는 편리한 기능을 제공합니다.

API에서 Express 앱 개체를 노출합니다.
수신되는 모든 트래픽을 이 단일 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;

로그인 후 복사