🛠️ Next.js에서 커스텀 서버(Custom Server) 구축하기

🛠️ Next.js에서 커스텀 서버(Custom Server) 구축하기

Next.js는 기본적으로 내장 서버를 제공하지만, 특정 요구 사항이나 맞춤형 라우팅이 필요한 경우 커스텀 서버를 직접 구성할 수 있습니다.
커스텀 서버를 통해 Express, Koa, Fastify 등 다양한 Node.js 서버 프레임워크와 연동할 수 있습니다.

---

✅ 커스텀 서버란?

커스텀 서버는 Next.js 애플리케이션을 직접 제어할 수 있는 Node.js 서버입니다.
기본 제공 서버를 대체하여, 더 복잡한 라우팅이나 미들웨어 통합을 구현할 수 있습니다.

커스텀 서버의 활용 예

• 동적 API 라우팅
• 미들웨어 사용 (인증, 로그 등)
• 외부 서비스와의 연동 (OAuth, WebSocket 등)
• 특정 헤더 설정 (보안 헤더 추가)

---

✅ 기본 커스텀 서버 설정

1. 서버 파일 생성

프로젝트 루트에 server.js 파일을 생성합니다.

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(port, () => {
    console.log(`🚀 서버 실행 중: http://localhost:${port}`);
  });
});

2. 스크립트 수정

반응형

package.json 파일에 다음과 같이 스크립트를 추가합니다.

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

---

✅ Express를 사용한 고급 커스텀 서버

1. 설치

npm install express

2. 서버 설정

server.js를 다음과 같이 수정합니다.

const express = require('express');
const next = require('next');

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // 커스텀 라우팅
  server.get('/hello', (req, res) => {
    res.send('안녕하세요! Next.js 커스텀 서버입니다.');
  });

  // Next.js의 기본 핸들러
  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, () => {
    console.log(`🚀 서버 실행 중: http://localhost:${port}`);
  });
});

---

✅ TypeScript로 커스텀 서버 구성

1. 설치

npm install ts-node typescript @types/node

2. 서버 파일 생성

server.ts 파일을 생성하여 다음과 같이 작성합니다.

import express from 'express';
import next from 'next';

const port = parseInt(process.env.PORT || '3000', 10);
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('/greet', (req, res) => {
    res.send('Hello from TypeScript Server!');
  });

  server.all('*', (req, res) => {
    handle(req, res);
  });

  server.listen(port, () => {
    console.log(`🚀 서버 실행 중: http://localhost:${port}`);
  });
});

3. 스크립트 수정

"scripts": {
  "dev": "ts-node server.ts",
  "build": "next build",
  "start": "NODE_ENV=production ts-node server.ts"
}

---

✅ 커스텀 서버 사용 시 주의사항

1. Vercel 미지원
   • Vercel에서는 커스텀 서버를 사용할 수 없습니다.
   • AWS EC2, DigitalOcean, Heroku 등 자체 호스팅 필요
2. 자동 최적화 기능 비활성화
   • 커스텀 서버를 사용하면 Next.js의 일부 최적화 기능이 비활성화될 수 있습니다.
   • 특히, 정적 페이지 최적화와 서버리스 함수 지원이 불가합니다.
3. SSR 및 성능 고려
   • 서버 측에서 직접 라우팅을 처리하므로, 성능 최적화를 위해 캐싱 전략이 필요합니다.
   • 필요한 부분만 SSR로 처리하고 나머지는 정적으로 처리하는 것을 권장합니다.

---

✅ 배포 전략

1. Docker를 활용한 배포

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

CMD ["node", "server.js"]

1. AWS EC2 배포
   • EC2 인스턴스에서 Docker를 사용하여 컨테이너로 실행
   • AWS Load Balancer를 이용하여 트래픽 관리

---

✅ 요약

항목 설명

기본 서버 설정	server.js 파일 생성, Next.js 직접 핸들링
Express 서버 사용	고급 라우팅 및 미들웨어 추가 가능
TypeScript 서버 구성	타입 안전성 보장, ts-node 사용
주의사항	Vercel 미지원, 자체 호스팅 필요
배포 전략	Docker와 AWS EC2를 사용하여 안정적 운영 가능

---

 

Next.js, 커스텀 서버, Express, TypeScript, 서버 구성, Docker 배포, AWS EC2, 미들웨어, 라우팅 설정, Node.js 서버 구축