Javascript

NextJS 앱 자체 호스팅: 실제 사례로 알아보는 최적의 방법

드리프트2 2024. 8. 9. 20:22

NextJS 앱 자체 호스팅: 실제 사례로 알아보는 최적의 방법

NextJS는 강력한 React 프레임워크로, 많은 개발자들이 선호하는 도구입니다. 하지만 이를 어떻게 배포하고 호스팅할 것인가는 항상 고민거리입니다. Vercel과 같은 플랫폼도 있지만, 비용이나 커스터마이징 측면에서 자체 호스팅을 고려하는 경우가 많습니다. 이번 글에서는 NextJS 앱을 자체 호스팅하는 다양한 방법을 실제 사례와 함께 상세히 알아보겠습니다.

1. Docker 컨테이너 활용

예시: 중소 규모의 전자상거래 웹사이트 "ShopEasy"

ShopEasy는 5만 명의 월간 활성 사용자를 보유한 전자상거래 플랫폼입니다. 그들은 NextJS로 개발한 웹사이트를 Docker와 Coolify를 사용해 관리하고 있습니다.

구체적인 설정:

DigitalOcean의 4GB RAM, 2 vCPU Droplet에 Coolify 설치

Dockerfile 생성:

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

Coolify 대시보드에서 GitHub 저장소 연동
환경 변수 설정 (예: DATABASE_URL, API_KEY 등)
자동 배포 규칙 설정: main 브랜치에 push 시 자동 배포

장점:

간편한 배포 및 롤백: Coolify 대시보드에서 원클릭으로 가능
일관된 환경: 개발, 스테이징, 프로덕션 환경의 일관성 유지
모니터링 용이: Coolify에서 제공하는 로그 및 리소스 사용량 모니터링

2. 클라우드 서비스 활용

예시: 대규모 소셜 미디어 플랫폼 "ConnectWorld"

ConnectWorld는 일일 활성 사용자 100만 명을 보유한 소셜 미디어 플랫폼입니다. 그들은 Google Cloud Platform의 서비스를 활용하여 NextJS 앱을 호스팅하고 있습니다.

구체적인 설정:

Cloud Build 설정 (cloudbuild.yaml):

steps:
- name: 'gcr.io/cloud-builders/docker'
  args: ['build', '-t', 'gcr.io/$PROJECT_ID/nextjs-app', '.']
- name: 'gcr.io/cloud-builders/docker'
  args: ['push', 'gcr.io/$PROJECT_ID/nextjs-app']
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
  entrypoint: gcloud
  args: ['run', 'deploy', 'nextjs-app', '--image', 'gcr.io/$PROJECT_ID/nextjs-app', '--region', 'us-central1', '--platform', 'managed']

Cloud Run에 배포
Cloud CDN 설정: 정적 자산을 위한 CDN 구성
Cloud SQL: PostgreSQL 데이터베이스 설정

장점:

높은 확장성: 트래픽 증가에 따라 자동으로 인스턴스 확장
글로벌 CDN: 전 세계 사용자에게 빠른 콘텐츠 전달
서버리스: 인프라 관리 부담 최소화

3. VPS와 Nginx, PM2 조합

예시: 개인 블로그 및 포트폴리오 웹사이트 "DevJourney"

프리랜서 개발자 Sarah는 자신의 블로그와 포트폴리오를 NextJS로 개발했습니다. 비용 효율성을 위해 VPS를 직접 관리하고 있습니다.

구체적인 설정:

Linode에서 2GB RAM, 1 vCPU VPS 구매
SSH로 서버 접속: ssh root@your_server_ip

기본 설정:

apt update && apt upgrade -y
adduser sarah
usermod -aG sudo sarah

Node.js 및 npm 설치:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Nginx 설치 및 설정:

sudo apt install nginx
sudo nano /etc/nginx/sites-available/default

Nginx 설정:

server {
    listen 80;
    server_name devjourney.com;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

PM2 설치 및 NextJS 앱 실행:

sudo npm install -g pm2
pm2 start npm --name "next-app" -- start

Let's Encrypt로 SSL 설정:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d devjourney.com

GitHub Actions 설정 (.github/workflows/deploy.yml):

name: Deploy to VPS
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Deploy to VPS
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        script: |
          cd /path/to/your/app
          git pull origin main
          npm install
          npm run build
          pm2 restart next-app

장점:

저렴한 비용: 월 $10 미만의 호스팅 비용
완전한 제어: 서버 설정에 대한 모든 권한
학습 기회: 서버 관리 및 배포 과정에 대한 깊은 이해

4. Kubernetes 활용

예시: 대기업의 마이크로서비스 아키텍처 "EnterpriseApp"

EnterpriseApp은 글로벌 기업의 복잡한 비즈니스 프로세스를 관리하는 대규모 애플리케이션입니다. NextJS로 개발한 프론트엔드를 포함한 여러 마이크로서비스를 Kubernetes로 관리하고 있습니다.

구체적인 설정:

AWS EKS 클러스터 생성:

eksctl create cluster --name enterprise-cluster --region us-west-2 --nodegroup-name standard-workers --node-type t3.medium --nodes 3 --nodes-min 1 --nodes-max 4 --managed

NextJS 앱을 위한 Dockerfile 생성:

FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

Kubernetes 배포 설정 (deployment.yaml):

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nextjs-frontend
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nextjs-frontend
  template:
    metadata:
      labels:
        app: nextjs-frontend
    spec:
      containers:
      - name: nextjs-frontend
        image: your-registry/nextjs-frontend:latest
        ports:
        - containerPort: 3000

서비스 및 인그레스 설정 (service.yaml 및 ingress.yaml):

# service.yaml
apiVersion: v1
kind: Service
metadata:
  name: nextjs-frontend-service
spec:
  selector:
    app: nextjs-frontend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000

# ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: nextjs-frontend-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: "letsencrypt-prod"
spec:
  tls:
  - hosts:
    - frontend.enterpriseapp.com
    secretName: nextjs-frontend-tls
  rules:
  - host: frontend.enterpriseapp.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: nextjs-frontend-service
            port: 
              number: 80

자동 스케일링 설정 (hpa.yaml):

apiVersion: autoscaling/v2beta1
kind: HorizontalPodAutoscaler
metadata:
  name: nextjs-frontend-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: nextjs-frontend
  minReplicas: 3
  maxReplicas: 10
  metrics:
  - type: Resource
    resource:
      name: cpu
      targetAverageUtilization: 50

CI/CD 파이프라인 구축 (예: GitLab CI):

stages:
  - build
  - deploy

build:
  stage: build
  image: docker:latest
  services:
    - docker:dind
  script:
    - docker build -t $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA .
    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA

deploy:
  stage: deploy
  image: bitnami/kubectl:latest
  script:
    - kubectl set image deployment/nextjs-frontend nextjs-frontend=$CI_REGISTRY_IMAGE:$CI_COMMIT_SHA
    - kubectl rollout status deployment/nextjs-frontend

장점:

높은 확장성: 트래픽 증가에 따라 자동으로 Pod 수 조절
무중단 배포: 롤링 업데이트로 다운타임 없는 배포 가능
리소스 효율성: 여러 마이크로서비스를 효율적으로 관리

5. Serverless 접근

예시: 이벤트 기반 웹 애플리케이션 "EventHub"

EventHub는 연간 몇 차례 대규모 이벤트 기간에 트래픽이 급증하는 웹 애플리케이션입니다. NextJS의 정적 생성 기능을 최대한 활용하여 Cloudflare Pages와 Workers를 사용한 서버리스 아키텍처를 채택했습니다.

구체적인 설정:

NextJS 앱 최적화:
- 가능한 많은 페이지를 정적으로 생성
- 동적 콘텐츠는 클라이언트 사이드 렌더링 활용
Cloudflare Pages 설정:
- GitHub 저장소와 Cloudflare 계정 연결
- 빌드 설정:
```
Build command: npm run build && npm run export
Output directory: out
```

동적 기능을 위한 Cloudflare Worker (api/events.js):

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // KV에서 이벤트 데이터 조회
  const events = await EVENT_KV.get('upcoming_events')
  return new Response(events, {
    headers: { 'Content-Type': 'application/json' },
  })
}

Cloudflare KV 설정:
- Cloudflare 대시보드에서 KV 네임스페이스 생성
- Worker에 KV 바인딩

배포 자동화 (.github/workflows/deploy.yml):

name: Deploy to Cloudflare Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Build
        run: |
          npm ci
          npm run build
          npm run export
      - name: Publish
        uses: cloudflare/wrangler-action@1.3.0
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}

장점:

비용 효율성: 사용량 기반 과금으로 유휴 시간 동안 비용 최소화
글로벌 배포: Cloudflare의 글로벌 네트워크로 빠른 콘텐츠 전달
관리 용이성: 서버 관리 불필요, 개발에만 집중 가능

결론

NextJS 앱의 자체 호스팅 방식은 프로젝트의 규모, 복잡성, 예산, 그리고 팀의 기술적 역량에 따라 다양하게 선택할 수 있습니다. 소규모 프로젝트의 경우 VPS와 Nginx, PM2 조합이 비용 효율적이면서도 충분한 제어권을 제공합니다. 중간 규모의 프로젝트에서는 Docker와 클라우드 서비스 조합이 확장성과 관리 용이성을 제공할 수 있습니다. 대규모 프로젝트나 복잡한 마이크로서비스 아키텍처를 가진 경우 Kubernetes가 적합할 수 있으며, 트래픽 변동이 큰 프로젝트에는 서버리스 아키텍처가 좋은 선택이 될 수 있습니다.

각 방식의 장단점을 요약하면 다음과 같습니다:

Docker 컨테이너 활용
- 장점: 환경 일관성, 쉬운 배포 및 확장
- 단점: 컨테이너 관리 학습 곡선
클라우드 서비스 활용
- 장점: 높은 확장성, 관리형 서비스로 운영 부담 감소
- 단점: 비용이 높을 수 있음, 특정 클라우드 제공업체에 종속
VPS와 Nginx, PM2 조합
- 장점: 저렴한 비용, 완전한 제어권
- 단점: 서버 관리 지식 필요, 수동 확장
Kubernetes 활용
- 장점: 높은 확장성, 복잡한 아키텍처 관리에 적합
- 단점: 높은 학습 곡선, 소규모 프로젝트에는 과도할 수 있음
Serverless 접근
- 장점: 자동 확장, 관리 부담 최소화, 사용량 기반 과금
- 단점: 콜드 스타트 문제, 특정 서비스에 종속될 수 있음

프로젝트를 시작할 때는 현재의 요구사항뿐만 아니라 미래의 성장 가능성도 고려해야 합니다. 초기에는 간단한 VPS 설정으로 시작하고, 필요에 따라 Docker나 클라우드 서비스로 마이그레이션하는 전략도 좋은 방법입니다. 또는 처음부터 확장성을 고려해 Kubernetes나 서버리스 아키텍처를 채택할 수도 있습니다.

중요한 것은 선택한 방식에 대한 깊은 이해와 지속적인 학습입니다. NextJS의 유연성을 최대한 활용하면서, 프로젝트의 요구사항에 가장 적합한 호스팅 솔루션을 선택하는 것이 핵심입니다. 각 방식의 장단점을 잘 파악하고, 필요에 따라 여러 방식을 혼합해 사용하는 것도 좋은 전략이 될 수 있습니다.

마지막으로, 어떤 방식을 선택하든 보안, 성능 모니터링, 백업 전략 등의 기본적인 운영 관리 사항을 고려해야 합니다. 이러한 요소들이 잘 갖춰져 있을 때, NextJS 앱의 안정적이고 효율적인 운영이 가능해집니다.

NextJS 앱 자체 호스팅은 단순히 기술적인 선택을 넘어, 프로젝트의 성공을 위한 전략적 결정입니다. 각 프로젝트의 고유한 요구사항과 제약 조건을 고려하여, 가장 적합한 호스팅 전략을 수립하시기 바랍니다. 이를 통해 효율적이고 확장 가능한 NextJS 애플리케이션을 구축하고 운영할 수 있을 것입니다.

'Javascript' 카테고리의 다른 글

TypeScript로 불필요한 변수 선언 없애기: `satisfies` 활용법 (0)	2024.08.24
TypeScript로 타입을 강화하는 방법: satisfies와 Uppercase<T> 활용하기 (0)	2024.08.24
JavaScript 학습의 어려움과 해결 방법 (0)	2024.08.05
TypeScript 5.6 Beta: 빛의 속도로 타입 검사 가능, 대규모 파일도 문제없어 (0)	2024.08.05
TanStack/React-Query를 전역 상태 관리자로 사용 가능한가? (0)	2024.08.04

현재글NextJS 앱 자체 호스팅: 실제 사례로 알아보는 최적의 방법

드리프트의 뉴 코딩 이야기