naver.HOW data lake by AI

[카테고리:] 미분류

  • 5/6 — 배포 최적화 & Nginx 서브패스

    (/admin-demo) + HTTPS + PM2 (포트 7401)


    목표: Next.js 앱을 7401 포트에서 실행하고, Nginx로 https://도메인/admin-demo/ 로 안정 프록시.
    포인트: basePath 없이 운영(정적자산은 /_next/* 별도 프록시).

    0) 사전 상태

    • 서버: Ubuntu (Node 22 + pnpm)
    • 포트: 7401
    • 도메인: 예시로 naver.how (이미 HTTPS 인증서가 있다면 그대로 사용)
    • 앱 루트: /var/www/naver.how/naver.how_f/p/admin-demo

    1) 앱 메타(브랜드) — 탭 제목을 naverhow로

    // src/app/layout.tsx
export const metadata = {
  title: "naverhow",
  description: "naverhow admin",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

    파비콘은 src/app/icon.png에 두면 자동 반영됩니다.

    2) Next 설정 — basePath 쓰지 않기

    // next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  // basePath: "/admin-demo",  // 사용하지 않습니다 (주석/삭제)
};
export default nextConfig;

    3) 프로덕션 빌드 & 실행 (포트 7401)

    cd /var/www/naver.how/naver.how_f/p/admin-demo
pnpm approve-builds           # (처음 한 번)
pnpm build
pnpm start -p 7401

    계속 실행하려면 PM2 권장 (아래 5단계 참고)

    4) Nginx 프록시 (서브패스 /admin-demo)

    핵심: HTML 요청은 /admin-demo/ → 127.0.0.1:7401/ 로 prefix 제거 프록시,
    정적자산은 절대경로 /_next/* → 127.0.0.1:7401/_next/* 로 별도 프록시.

    # /etc/nginx/sites-available/naver.how (기존 443 server 블록 안)

# ① 페이지: /admin-demo/* → 127.0.0.1:7401/*
location ^~ /admin-demo/ {
    proxy_pass         http://127.0.0.1:7401/;   # 슬래시 있음 → /admin-demo/ 접두사 제거
    proxy_http_version 1.1;

    # (개발/HMR 겸용—프로덕션에도 문제 없음)
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection "upgrade";

    proxy_set_header   Host $host;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;

    proxy_read_timeout  300s;
    proxy_send_timeout  300s;
}

# ② 정적자산: /_next/* → 127.0.0.1:7401/_next/*
location /_next/ {
    proxy_pass         http://127.0.0.1:7401/_next/;
    proxy_http_version 1.1;
    proxy_set_header   Host $host;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
    proxy_read_timeout 300s;
    proxy_send_timeout 300s;

    # 캐시(선택)
    expires 7d;
    add_header Cache-Control "public, max-age=604800, immutable";
}

    적용:

    sudo nginx -t && sudo systemctl reload nginx

    접속: https://naver.how/admin-demo/

    5) PM2로 상시 구동

    sudo pnpm add -g pm2
cd /var/www/naver.how/naver.how_f/p/admin-demo
pm2 start "pnpm start -p 7401" --name naverhow-admin
pm2 save
pm2 startup systemd   # 부팅 시 자동 시작

    유지보수:

    pm2 logs naverhow-admin
pm2 restart naverhow-admin
pm2 status

    6) HTTPS (이미 있다면 건너뜀)

    Let’s Encrypt로 빠르게:

    sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d naver.how -d www.naver.how

    자동 갱신은 데몬이 관리. 수동 점검: sudo certbot renew --dry-run

    7) 성능/보안 옵션(선택)

    Gzip/Brotli

    # /etc/nginx/nginx.conf 혹은 http{} 영역
gzip on;
gzip_types text/plain text/css application/json application/javascript application/xml+rss image/svg+xml;
gzip_min_length 1024;

# Brotli 모듈이 있다면
# brotli on;
# brotli_comp_level 5;
# brotli_types text/plain text/css application/json application/javascript application/xml+rss image/svg+xml;

    보안 헤더(간단 버전)

    add_header X-Frame-Options "SAMEORIGIN";
add_header X-Content-Type-Options "nosniff";
add_header Referrer-Policy "strict-origin-when-cross-origin";

    8) 점검 체크리스트

    • 무한 리다이렉트 → /admin-demo/ 블록의 proxy_pass 뒤에 슬래시가 있어야 접두사가 제거됨.
    • 404(페이지는 뜨는데 스타일 없음) → /_next/ 프록시 누락.
    • Create Next App 제목 → layout.tsx의 metadata.title이 naverhow인지 확인.
    • 서버가 중단됨 → PM2 미설정. pm2 start … && pm2 save && pm2 startup
    • 빌드가 이상함 → pnpm approve-builds(Tailwind/oxide), rm -rf .next && pnpm build
    • 포트 충돌 → ss -ltnp | grep 7401 로 점유 확인 후 조정.

    9) 롤백 전략(한 줄 요약)

    • Nginx: 새 location만 추가했으니, 문제시 해당 블록 주석 처리 후 nginx -t && reload.
    • 앱: PM2 restart로 즉시 되돌리고, 필요시 이전 태그/커밋으로 git checkout.

    여기까지 하면 naverhow 관리자 앱을 /admin-demo 경로에서 HTTPS로 안정 운영할 수 있습니다.
    다음 편(6/6)에서는 운영 편의 기능(에러 로깅/모니터링, 토스트/로딩 UX, 접근 제어, 코드 스플리팅·이미지 최적화, 배포 체크리스트)을 정리합니다.