Vercel로 간편하게 빠르게 NestJS 앱 배포하는 방법

NestJS란 무엇인가?

NestJS는 Node.js를 기반으로 한 서버 측 애플리케이션 개발 프레임워크로, 현대적이고 효율적인 서버를 구축하기 위한 강력한 도구입니다. 특히 TypeScript와의 강력한 통합이 특징이며, 다양한 모듈 시스템을 통해 확장성과 유지보수성을 제공합니다.

Vercel: 간편한 클라우드 호스팅 플랫폼

Vercel은 서버 없이 웹 애플리케이션을 쉽게 배포, 관리할 수 있는 플랫폼으로 유명합니다. 특히 프론트엔드와 백엔드 모두 안정적으로 호스팅하며 자동으로 CI/CD 파이프라인을 제공합니다. Express 서버를 기반으로 한 애플리케이션의 경우, Vercel에서는 별도의 설정 없이 손쉽게 배포할 수 있습니다.

NestJS Express 앱을 Vercel에 배포하기

NestJS 애플리케이션은 기본적으로 Express를 기반으로 하여 작동하기 때문에, Vercel과의 호환이 용이합니다. 이 가이드에서는 NestJS Express 애플리케이션을 Vercel에 배포하는 과정을 단계별로 설명합니다.

Step 1: NestJS 앱 생성하기

먼저 NestJS CLI를 통해 새로운 애플리케이션을 생성해야 합니다. 명령줄에서 다음 명령어를 통해 새로운 NestJS 프로젝트를 시작할 수 있습니다.

nest new my-app

Step 2: 필수 NPM 패키지 설치하기

Express와 관련된 패키지를 설치해야 Vercel 환경에서 정상 작동합니다. 다음 커맨드를 실행하세요:

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

Step 3: src/AppFactory.ts 파일 생성하기

이 단계에서는 Express 앱의 인스턴스를 생성하고 NestJS와 연결합니다. 이 파일은 Express 인스턴스를 내보내어 Vercel 배포가 가능하도록 합니다.

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) => {
        app.enableCors({
          exposedHeaders: '*',
        });

        app.init();
      })
      .catch((err) => {
        throw err;
      });

    expressApp.use((req: Request, res: Response, next) => {
      appPromise
        .then(async (app) => {
          await app.init();
          next();
        })
        .catch((err) => next(err));
    });

    return { appPromise, expressApp };
  }
}

Step 4: src/main.ts 파일 수정하기

이 파일의 주요 역할은 애플리케이션을 시작하는 것입니다. 이제 모든 코드를 AppFactory로 이동하고, 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();

Step 5: api/index.ts 파일 추가하기

Vercel은 /api 디렉토리에 있는 모든 기능을 빌드하고 제공합니다. Express 인스턴스를 내보내는 함수를 추가하세요.

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

export default AppFactory.create().expressApp;

Step 6: vercel.json 파일 추가하기

Vercel 설정 파일을 생성합니다. 이 파일에는 Rewrite 규칙이 포함되어 있어야 하며, 모든 트래픽을 Express 애플리케이션으로 리다이렉트합니다.

{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": ".",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api"
    }
  ]
}

Step 7: Vercel에서 프로젝트 생성

Vercel에서 새 프로젝트를 생성하고, Git 리포지토리를 가져옵니다. 이 단계에서 모든 설정이 완료되면, Vercel이 자동으로 배포를 시작합니다.

총평 및 마무리

NestJS 애플리케이션을 Vercel에 배포하는 것은 비교적 간단하며, 이 가이드를 통해 충분히 자동화된 배포 파이프라인을 구축할 수 있습니다. 지금 바로 시작해보세요!

추가로 도움 될 만한 링크

• NestJS 공식 문서
• Vercel 공식 문서
• Express와 NestJS 통합 가이드

위 링크들을 통해 추가적인 정보를 얻을 수 있으며, 보다 심화된 학습을 할 수 있습니다.