(/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
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, 접근 제어, 코드 스플리팅·이미지 최적화, 배포 체크리스트)을 정리합니다.
답글 남기기