페이지 1: 프로젝트 구조화 및 설정

1. 프로젝트 구조화 및 설정

Next.js와 Express.js로 구성된 풀스택 애플리케이션을 Vercel에 배포하려면 신중한 프로젝트 구조화가 필요합니다. 여기서는 간소화를 위해 주로 모노레포 설정을 다룹니다.

1.1. 모노레포 구조 예시

일반적인 설정은 프론트엔드(Next.js)와 백엔드(Express.js)를 동일한 저장소에 유지하는 것입니다. Vercel은 Next.js 프로젝트를 자동으로 감지하며, Express.js는 서버리스 API로 구성합니다.

my-fullstack-app/
├── nextjs-frontend/
│   ├── pages/
│   ├── public/
│   ├── package.json
│   └── next.config.js
├── api/
│   ├── index.js # Express.js 진입점
│   └── package.json
├── .gitignore
└── vercel.json # Vercel 설정 파일

1.2. 'api' 디렉토리에 Express.js 설정

api/ 디렉토리 내에 Express.js 진입점으로 사용할 index.js 파일을 생성합니다. 이 파일은 Vercel 서버리스 함수로 취급됩니다.

// api/index.js
const express = require('express');
const app = express();
app.use(express.json());
app.get('/api/hello', (req, res) => {
  res.status(200).send('Express.js API에서 안녕하세요!');
});
app.listen(3001, () => console.log('Express API가 3001 포트에서 수신 중입니다.'));
module.exports = app; // Vercel 서버리스 함수에 중요합니다.

api/에 package.json을 생성합니다.

// api/package.json
{
  "name": "express-api",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1"
  }
}