다른 호스팅 플랫폼에 배포하기

Next.js 애플리케이션의 공식적인 권장 배포 플랫폼은 Vercel입니다. Vercel은 Next.js 개발팀에서 직접 만들었기 때문에 가장 최적화된 성능과 기능을 제공합니다. 하지만 특정 요구사항이나 기존 인프라와의 통합을 위해 다른 호스팅 플랫폼에 Next.js 앱을 배포해야 하는 경우도 있습니다.

이 절에서는 Next.js 애플리케이션을 Vercel 외의 다른 인기 있는 호스팅 플랫폼에 배포하는 주요 방법과 각 플랫폼의 특징 및 고려사항에 대해 알아보겠습니다.

다양한 호스팅 옵션

Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트(Serverless Functions) 등 다양한 렌더링 방식을 지원합니다. 따라서 선택하는 호스팅 플랫폼은 이러한 Next.js의 기능을 얼마나 잘 지원하는지에 따라 달라집니다.

주요 호스팅 플랫폼 유형

서버리스 플랫폼: Vercel과 유사하게 서버리스 함수 형태로 Next.js의 모든 기능을 지원합니다. (예: Netlify, AWS Amplify)
Node.js 호스팅 플랫폼: 전통적인 Node.js 서버 환경을 제공하여 next start 명령어를 직접 실행합니다. (예: AWS EC2, Google Cloud Run, Azure App Service, Heroku, DigitalOcean Droplets)
정적 웹사이트 호스팅: SSG로 빌드된 정적 파일만 호스팅하는 경우. (예: GitHub Pages, Netlify, AWS S3 + CloudFront)

Netlify에 배포하기

Netlify는 Vercel과 유사한 기능을 제공하는 인기 있는 서버리스 기반 배포 플랫폼입니다. CI/CD 통합, 글로벌 CDN, 자동 SSL 등이 강점입니다.

Netlify CLI 설치 및 프로젝트 설정

npm install -g netlify-cli
# 또는
yarn global add netlify-cli

프로젝트 루트에서 Netlify에 로그인하고 프로젝트를 초기화합니다.

netlify login
netlify init

netlify init 명령은 Netlify 프로젝트를 설정하고, netlify.toml 파일을 생성하여 빌드 설정, 배포 설정 등을 정의할 수 있도록 돕습니다.

`netlify.toml` 설정 (Next.js)

Next.js 애플리케이션의 경우, netlify.toml 파일을 통해 빌드 명령과 배포 디렉토리를 지정해야 합니다. Netlify는 Next.js 빌드 시 생성되는 .next/standalone 디렉토리와 서버리스 함수를 자동으로 감지합니다.

# netlify.toml
[build]
  command = "npm run build" # 또는 "yarn build"
  publish = ".next" # Next.js 12.x 이상에서는 .next/standalone을 권장

# Next.js 12 이후 버전에서 서버리스 함수 및 SSR을 지원하기 위한 설정
[[plugins]]
  package = "@netlify/plugin-nextjs"

# 만약 Next.js의 이미지 최적화(next/image)를 사용한다면
# Netlify Edge Functions를 위한 설정이 필요할 수 있습니다.
# [functions]
#   node_bundler = "esbuild"
#   external_node_modules = ["next"]

배포하기

Netlify 대시보드를 통해 Git 리포지토리를 연동하여 자동 배포를 설정하거나, CLI를 통해 수동으로 배포할 수 있습니다.

Git 연동 (권장)

Netlify 대시보드에서 "Add new site" -> "Import an existing project" 를 선택합니다.
GitHub, GitLab, Bitbucket 등 Git 서비스 제공자를 선택하고, Next.js 프로젝트 리포지토리를 연결합니다.
Netlify가 프로젝트를 분석하고 빌드 설정을 제안하면 확인 후 배포합니다. netlify.toml 파일이 있다면 해당 설정이 우선 적용됩니다.

CLI를 통한 수동 배포

npm run build # 로컬에서 Next.js 빌드
netlify deploy --prod # 프로덕션 환경으로 배포 (이전에 netlify init으로 프로젝트 연결 필요)

AWS에 배포하기 (Amplify 또는 EC2)

AWS는 다양한 배포 서비스를 제공하며, Next.js 애플리케이션의 규모와 복잡성에 따라 선택지가 달라집니다.

AWS Amplify (서버리스 및 간편한 배포)

AWS Amplify는 프론트엔드 웹 및 모바일 앱을 위한 통합 개발 플랫폼입니다. Next.js 앱을 쉽게 호스팅하고, 백엔드 서비스(인증, API, 데이터베이스 등)를 통합할 수 있습니다.

Amplify CLI 설치: npm install -g @aws-amplify/cli
Amplify 초기화: 프로젝트 루트에서 amplify init 실행 후 AWS 계정 연동 및 프로젝트 설정.
호스팅 추가: amplify add hosting 명령어를 통해 호스팅 유형(Amplify Console, S3 + CloudFront 등)을 선택하고, amplify push로 배포합니다.
Amplify Console을 통한 Git 연동: AWS Amplify Console 대시보드에서 Git 리포지토리를 연동하여 CI/CD 파이프라인을 구축하고, 커밋 시 자동 배포를 설정할 수 있습니다. Next.js를 위한 빌드 설정(빌드 명령: npm run build, 출력 디렉토리: .next 또는 .next/out (SSG만 해당))을 지정합니다.

장점: Next.js의 SSR/SSG/API 라우트 기능을 모두 지원하며, 백엔드 통합이 용이합니다. 간편한 CI/CD 파이프라인을 제공합니다. 단점: Vercel/Netlify보다 학습 곡선이 있을 수 있으며, 비용 관리가 더 복잡할 수 있습니다.

AWS EC2 (Traditional Server Hosting)

EC2(Elastic Compute Cloud)는 가상 서버(인스턴스)를 프로비저닝하여 직접 Node.js 서버를 실행하는 방식입니다. Next.js의 모든 기능을 완벽하게 제어할 수 있지만, 인프라 관리 부담이 큽니다.

EC2 인스턴스 생성: 원하는 운영 체제(Ubuntu, Amazon Linux 등)로 EC2 인스턴스를 생성하고 SSH로 접속합니다.
Node.js 및 npm 설치: 인스턴스에 Node.js와 npm(또는 yarn)을 설치합니다.
Next.js 앱 클론 및 빌드: Git 리포지토리에서 Next.js 프로젝트를 클론하고, npm install 후 npm run build를 실행합니다.
애플리케이션 실행: npm start (또는 next start) 명령어로 Next.js 프로덕션 서버를 실행합니다.
프로세스 관리: pm2나 systemd와 같은 도구를 사용하여 Next.js 애플리케이션이 백그라운드에서 지속적으로 실행되도록 관리합니다.
웹 서버 설정 (Nginx/Apache): Nginx 또는 Apache를 사용하여 80/443 포트로 들어오는 요청을 Next.js 서버(기본 3000포트)로 프록시하도록 설정합니다. SSL 인증서(Let's Encrypt 등)도 직접 설정해야 합니다.
CI/CD 구축: Jenkins, AWS CodePipeline, GitHub Actions 등 CI/CD 도구를 사용하여 코드 푸시 시 자동으로 빌드 및 배포되도록 파이프라인을 구축합니다.

장점: 완벽한 제어권, 유연한 인프라 구성, 복잡한 커스텀 설정 가능. 단점: 인프라 설정 및 관리 부담이 큼, 높은 운영 지식 요구, 비용 관리의 복잡성.

Heroku에 배포하기

Heroku는 클라우드 플랫폼으로서 애플리케이션 배포를 간소화하는 PaaS(Platform as a Service)입니다. Next.js 앱을 쉽게 배포할 수 있습니다.

Heroku CLI 설치: npm install -g heroku
Heroku 앱 생성: heroku create your-nextjs-app-name

package.json 수정: start 스크립트를 next start로 지정합니다.

// package.json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start -p $PORT", // Heroku는 PORT 환경 변수를 사용
  "lint": "next lint"
},

Procfile 생성: Heroku는 Procfile을 사용하여 애플리케이션 시작 명령을 찾습니다.
```
# Procfile (프로젝트 루트에 생성)
web: npm run start
```

Git 푸시로 배포:

git add .
git commit -m "Initial Heroku deploy"
git push heroku main # 또는 master

환경 변수 설정: heroku config:set API_KEY=YOUR_API_KEY 또는 Heroku 대시보드에서 설정합니다.

장점: 매우 간편한 배포, 관리형 서비스. 단점: 무료 티어가 제한적이며 유료 플랜으로 전환 시 Vercel/Netlify보다 비용이 높을 수 있음, 특정 Next.js 최적화(이미지 최적화 등)에 제약이 있을 수 있음.

정적 웹사이트 호스팅 (SSG 전용)

Next.js의 정적 사이트 생성(SSG) 기능을 사용하여 next export로 빌드된 HTML, CSS, JS 파일만 배포하는 경우입니다. 이 경우 SSR이나 API 라우트 기능은 사용할 수 없습니다.

next.config.js 설정: output: 'export' 옵션을 추가합니다.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // 정적 HTML 파일로 내보내기
  // images: { unoptimized: true } // 정적 배포 시 next/image 최적화 비활성화
};

module.exports = nextConfig;

빌드: npm run build 명령을 실행하면 out 디렉토리에 정적 파일이 생성됩니다.
배포 플랫폼: 생성된 out 디렉토리의 파일을 다음 서비스에 업로드하여 배포합니다.
- GitHub Pages: .github/workflows에 워크플로우를 설정하여 out 디렉토리를 gh-pages 브랜치로 푸시.
- Netlify: publish 디렉토리를 out으로 설정.
- AWS S3 + CloudFront: S3 버킷에 파일을 업로드하고 CloudFront를 통해 CDN으로 배포.

장점: 매우 빠르고 저렴하며, 높은 확장성을 가집니다. 단점: SSR, API 라우트, next/image의 자동 이미지 최적화 등 Next.js의 동적 기능은 사용할 수 없습니다.

환경 변수 및 보안 고려사항

다른 호스팅 플랫폼에 배포할 때도 환경 변수 관리는 매우 중요합니다.

플랫폼별 환경 변수 설정: 각 호스팅 플랫폼은 환경 변수를 설정하는 고유한 방법을 제공합니다 (예: AWS Systems Manager Parameter Store, Heroku Config Vars, Netlify 환경 변수 설정). 해당 플랫폼의 문서를 참조하여 설정해야 합니다.
빌드 시간 vs. 런타임: NEXT_PUBLIC_ 접두사가 없는 환경 변수는 빌드 시점에 서버 코드에 번들링됩니다. 따라서 배포 후 환경 변수를 변경하려면 다시 빌드하고 배포해야 합니다. 런타임에 동적으로 변경되는 환경 변수가 필요하다면, 서버리스 함수 내에서 직접 외부 서비스를 호출하거나, 플랫폼의 고유한 런타임 환경 변수 기능을 활용해야 합니다.
보안: 민감한 정보는 절대로 클라이언트 번들에 노출되지 않도록 NEXT_PUBLIC_ 접두사에 유의하고, 각 플랫폼의 보안 가이드라인을 따릅니다.

Vercel은 Next.js에 최적화된 가장 간편한 배포 경험을 제공하지만, 상황에 따라 다른 플랫폼이 더 적합할 수 있습니다. 각 플랫폼의 장단점과 Next.js 기능 지원 여부를 신중하게 고려하여 최적의 배포 전략을 선택해야 합니다.

다른 호스팅 플랫폼에 배포하기

On this page