Vercel에 Node.js + TypeScript 앱 배포

Vercel은 프런트엔드 애플리케이션을 배포할 수 있는 놀라운 플랫폼입니다. 하지만 이를 사용하여 Node.js 서버를 배포할 수도 있다는 사실을 알고 계셨나요?

이 튜토리얼에서는 Express.js + TypeScript에서 최소 API를 생성하고 Vercel에 배포합니다.

가장 먼저 해야 할 일은 프로젝트를 포함할 폴더를 만들고 그 안에 새 노드 패키지를 시작하는 것입니다npm init -y.

이렇게 하면 루트 디렉터리에 다음과 같은 package.json 파일이 생성됩니다.

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

이 프로젝트에서는 루트 디렉토리에 src 폴더를 만들어 애플리케이션의 모든 소스 코드를 포함합니다. 그 안에 index.ts 파일을 생성합니다.

.
├── src/
│   └── index.ts
└── package.json

이제 다음 패키지를 설치해 보겠습니다.

npm install express @types/express @types/node nodemon typescript

TypeScript 컴파일러 옵션

TypeScript 컴파일러 옵션을 설정하기 위해 루트 디렉토리에 tsconfig.json 파일을 생성해 보겠습니다.

.
├── node_modules
├── src/
│   └── index.ts
├── package.json
└── tsconfig.json // 👈

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

TypeScript를 사용하고 있으므로 package.json 파일을 다음과 같이 수정해야 합니다.

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts", // 👈 Point our index.ts file
  "scripts": {
    "start": "npx tsc -w", // 👈 Create a start script
    "dev": "npx nodemon" // 👈 Create a dev script
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^16.11.10",
    "express": "^4.17.1",
    "nodemon": "^2.0.15",
    "typescript": "^4.5.2"
  }
}

노드몬

nodemon을 설정하려면 루트 디렉터리에 nodemon.json 파일을 생성해야 합니다.

.
├── node_modules
├── src/
│   └── index.ts
├── nodemon.json // 👈
├── package.json
└── tsconfig.json

노드몬.json:

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/index.ts"
}

Express.js + TypeScript 서버

다음은 최소한의 Express.js + TypeScript 앱입니다.

index.ts:

import express, { Application, Request, Response } from "express";

const app: Application = express();

app.set("port", process.env.PORT || 3000);

app.get("/", (_req: Request, res: Response) => {
  res.json({ message: "Hello world!" });
});

app.listen(app.get("port"), () => {
  console.log(`Server on http://localhost:${app.get("port")}/`);
});

Vercel 설정

루트 디렉터리에 vercel.json 파일을 만듭니다.

.
├── node_modules
├── src/
│   └── index.ts
├── nodemon.json
├── package.json
├── tsconfig.json
└── vercel.json // 👈

vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "src/index.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/index.ts",
      "methods": ["GET", "POST", "PUT", "DELETE"]
    }
  ]
}

배포

Vercel에 앱을 배포하려면 먼저 프로젝트를 GitHub에 업로드해야 합니다.
.gitignore 폴더를 무시하려면 루트 디렉토리에 node_modules 파일을 추가하는 것을 잊지 마십시오.

.
├── node_modules
├── src/
│   └── index.ts
├── .gitignore
├── nodemon.json
├── package.json
├── tsconfig.json
└── vercel.json

.gitignore:

node_modules

저장소hello-world를 생성하고 내 프로젝트를 여기에 업로드했습니다.



그런 다음 Vercel에서 새 프로젝트를 만들고 저장소를 가져옵니다.



클릭deploy :



축하합니다! 이제 Node.js + TypeScript 앱을 Vercel 🚀에 성공적으로 배포했습니다.