codingstairs
노트에듀라이프연락
⌕검색⌘K
koen

Navigation

  • Intro
  • Blog
  • Life

연락하기

로그인 없이도 보낼 수 있어요. 답변이 필요하면 이메일을 함께 적어 주세요.

  • 익명 폼으로 의견 남기기 →
  • ✉ warragon112@gmail.com
  • 카카오톡 오픈채팅 ↗

© 2026 codingstairs

  • 노트
  • 에듀
  • 검색
  • 라이프
  • 연락
  • 약관
  • RSS
  • GitHub
에듀›Next.js 16 으로 첫 풀스택 앱 만들기›4단계

4단계

4단계 — 배포 (Vercel · Fly.io · Docker)

0회 조회

4단계 — 배포 (Vercel · Fly.io · Docker)

배포는 갈래가 많습니다. Next.js 풀스택에 실용적인 세 가지 길.

1. 세 가지 선택지

방식 장점 단점
Vercel 가장 쉬움 · git push 자동 · 무료 티어 서버리스 제약 · 장시간 작업 어려움
Fly.io Dockerfile 그대로 · Postgres 번들 · 상시 실행 약간 복잡
자체 서버 + Docker + Caddy 완전 제어 · 비용 최소 운영 부담

초보자는 Vercel · 고급은 Fly.io · 포트폴리오용 자체 서버도 교육적.

2. Vercel — git push 배포

  1. vercel.com 가입 (GitHub 로그인)
  2. Add New... → Project
  3. GitHub 저장소 선택
  4. Framework → Next.js 자동 감지
  5. Environment Variables 에 DATABASE_URL 등 추가
  6. Deploy

main 브랜치 push → 자동 재배포. PR → preview URL.

Vercel 제약

  • API route 타임아웃 10 초 (Pro 60초 · Enterprise 900초)
  • 서버리스 함수 · 상시 연결 어려움
  • PostgreSQL 은 Vercel Postgres 또는 외부 (Supabase · Neon)

3. Fly.io — Docker 기반

standalone 빌드 설정

next.config.ts:

import type { NextConfig } from "next";
const config: NextConfig = {
  output: "standalone",
};
export default config;

standalone 모드는 .next/standalone/ 에 서버 + 필요한 모듈만 담긴 경량 빌드를 만듭니다.

Dockerfile

프로젝트 루트에 생성:

FROM node:20-alpine AS base
RUN corepack enable && corepack prepare pnpm@10.33.0 --activate

# ---- deps ----
FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# ---- builder ----
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build

# ---- runner ----
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
ENV PORT=3000

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

USER node
EXPOSE 3000
CMD ["node", "server.js"]

.dockerignore:

node_modules
.next
.git
.env.local
Dockerfile
README.md

이미지 크기 줄이는 핵심 파일.

Fly.io CLI

# 설치
brew install flyctl                  # macOS
# 또는 winget install flyctl (Windows)

fly auth signup

배포

cd my-fullstack
fly launch                           # fly.toml 자동 생성 · 지역 선택
fly postgres create                  # DB 생성
fly postgres attach <app-name>       # DATABASE_URL 자동 주입
fly deploy

배포 완료 후 https://<app>.fly.dev 에서 확인.

주요 fly 명령

fly status          # 앱 상태
fly logs            # 실시간 로그
fly ssh console     # 앱 컨테이너 접속
fly secrets set KEY=VALUE
fly scale count 2   # 인스턴스 개수
fly deploy          # 재배포

4. 자체 서버 + Caddy

VPS (Hetzner · Contabo · Vultr 등) 에 Docker 로 직접.

docker-compose.yml

services:
  web:
    build: .
    env_file: .env.prod
    ports: ["127.0.0.1:3000:3000"]     # 외부 노출 X · Caddy 경유
    depends_on: [postgres]

  postgres:
    image: postgres:16-alpine
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_DB: my_app
    volumes:
      - pg-data:/var/lib/postgresql/data
    ports: ["127.0.0.1:5432:5432"]

  caddy:
    image: caddy:2-alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy-data:/data

volumes:
  pg-data:
  caddy-data:

Caddyfile

example.com {
  reverse_proxy web:3000
}

Caddy 가 자동 HTTPS · 인증서 갱신. Nginx 대비 설정이 극히 단순.

배포

scp -r . user@server:/opt/my-fullstack
ssh user@server
cd /opt/my-fullstack
docker compose up -d

5. 환경변수 분리

변수 용도
DATABASE_URL 프로덕션 DB
NEXT_PUBLIC_SITE_URL 클라이언트 노출 URL
NEXTAUTH_SECRET · JWT_SECRET 세션
외부 API 키 STRIPE_* · RESEND_* 등

Vercel → Dashboard · Fly.io → fly secrets · 자체 서버 → .env.prod 파일.

6. 도메인 연결

Vercel · Fly.io 모두 커스텀 도메인 지원.

  • Vercel → Project Settings → Domains → 추가 → DNS 설정 지시대로
  • Fly.io → fly certs add example.com → DNS A/AAAA · CNAME

DuckDNS 같은 무료 서브도메인도 학습용으로 충분.

7. HTTPS

  • Vercel / Fly.io — 자동
  • Caddy — 자동 (Let's Encrypt 통합)
  • Nginx + certbot — 수동 · 갱신 설정 필요

HTTPS 없이 운영은 지양. 쿠키 · OAuth 대부분이 HTTPS 요구.

8. 관측 · 로그

배포 후 반드시 로그 확인.

fly logs                              # Fly
vercel logs                           # Vercel CLI
docker compose logs -f web            # 자체

에러가 지속되면 Sentry 같은 관측 도구 도입.

9. CI/CD

GitHub Actions 로 main 브랜치 push 시 자동 배포.

# .github/workflows/deploy.yml
name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: superfly/flyctl-actions/setup-flyctl@master
      - run: flyctl deploy --remote-only
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Vercel 은 git 연동만으로 자동 · 별도 액션 불필요.

10. 자주 걸리는 자리

  • 빌드 실패 — .env.local 이 빠졌거나 DATABASE_URL 접근 불가. 환경변수 빌드 타임 필요 여부 확인
  • 마이그레이션 미적용 — 배포 후 fly ssh console 로 pnpm drizzle-kit migrate 수동
  • 이미지 너무 큼 — output: "standalone" 확인 · .dockerignore 세분화
  • HTTPS 인증서 실패 — DNS 선반영 필수 · Caddy 는 80 포트 열려 있어야

11. 비용

옵션 무료 유료 시작
Vercel Hobby 플랜 (개인 · 비상업) $20/월 Pro
Fly.io $5 크레딧 · 소형 앱 2~3 개 인스턴스 요금
VPS 없음 $4~10/월 (Hetzner)

학습 · 포트폴리오는 Vercel / Fly.io 무료 티어로 충분.

12. 배포 후 체크리스트

  • /api/health · 메인 페이지 200 응답
  • HTTPS 인증서 유효
  • DB 마이그레이션 반영
  • 환경변수 누락 없음
  • 로그 · 에러 모니터링 설정
  • 프로덕션 시크릿 · 테스트 키 분리

하고픈 말

"첫 배포 성공" 이 풀스택 학습의 큰 이정표. Vercel 로 5 분 안에 경험하고, 이후 Fly.io · 자체 서버로 단계 확장이 자연스럽습니다. 배포한 적 있는 코드가 진짜 학습한 코드.

🎉 풀스택 사이클 완주.

Next

  • devops-cloud 또는 security-foundations

Vercel 공식 · Fly.io 공식 · Caddy 를 참고합니다.

← 3단계

3단계 — API Route + Drizzle ORM

🎉 Next.js 16 으로 첫 풀스택 앱 만들기 완주를 축하해요

이어서 어떤 걸 배워 볼까요?

다음: Spring Boot 4 로 시작하는 백엔드 →전체 강좌 둘러보기