Synology Docker로 Next.js 실행하기 (리버스 프록시)

DSM 7.x + Container Manager 이용하기

DSM 7.x 이상

서비스 : Synology Container (Docker)

폴더위치 : /volume1/docker/nextjs-dashboard

 

운영방법 : Next.js 컨테이너를 3000으로 띄우고, DSM에서 리버스 프록시로 붙임.

-> Docker 없이 직접 Node로 실행 가능하나 패키지 충돌 및 장애 대응이 어려워 비추천

 

외부 https (80, 443) -> 내부 http (3000포트) 구조임.

(리버스 프록시 설정시 헤더 문자를 추가해야 함.)

 

https:// 는 Synology 에 제공하는 무료 Let's Encrypt 로 발급받음.

 

도메인 DNS 는 cloudflare.com 에서 세팅하고 Synology 고정IP 로 포워딩 시킨다.

 

작성된 코드를 컨테이너화 시키기 때문에 코드 수정시 다시 빌드해야 함.

 

NAS 폴더 구조

/volume1/docker/nextjs-dashboard/
  app/                  # Next.js 소스 (Dockerfile 포함)
  compose/              # docker-compose.yml
  env/                  # .env.production 등
  data/
    uploads/             # 업로드 영구 보관(필요 시)
  logs/                  # 로그(선택)

 

Container Manager에서 사용할 docker-compose.yml 파일 작성

 

/volume1/docker/nextjs-dashboard/docker-compose.yml 

services:
  nextjs:
    container_name: nextjs-dashboard
    build:
      context: ..
      dockerfile: Dockerfile
    restart: unless-stopped
    environment:
      - NODE_ENV=production
      # 도메인 운영 시 필수(예시)
      - NEXTAUTH_URL=https://example.com
      - NEXTAUTH_SECRET=
      - AUTH_TRUST_HOST=true
    ports:
      # 중요: 127.0.0.1로만 바인딩해서 외부에서 3000 접근 불가
      - "127.0.0.1:3000:3000"
    volumes:
      - ../data/uploads:/app/uploads
      - ../logs:/app/logs

 

NEXTAUTH_SECRET 키 생성방법

# macOS
openssl rand -base64 32
# Windows can use https://generate-secret.vercel.app/32

 

Dockerfile (standalone)

FROM node:20-alpine AS builder
WORKDIR /app

# pnpm 설치
RUN corepack enable && corepack prepare pnpm@latest --activate

COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

COPY . .
RUN pnpm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production

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

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

 

next.config.js

const nextConfig = {
  output: "standalone",
};

module.exports = nextConfig;

 

 

---

Synology 서버 세팅 방법

 

1. Github 에서 작성한 코드를 Synology Server 에 다운받는다.

폴더위치 : /volume1/docker/

git clone https://github.com/ssh521/nextjs-dashboard.git

주의사항 : .env 파일에 mysql 생성된 계정을 추가하고 app/seed/route.ts 파일을 참조해서 DB에 table 을 미리 만들어 두어야 한다. 그렇지 않으면, 컨테이너 빌드시 에러가 발생한다.

2. Synology Container Manager 를 실행시킨다.

프로젝트 탭에서 생성하기 버튼을 클릭한다.

 

3. 프로젝트 폴더에서 docker-compose.yml 파일을 연다.

/volume1/docker/nextjs-dashboard/docker-compose.yml 

 

4. 기존 docker-compose.yml 을 이용하여 프로젝트 만들기 선택

 

리버스 프록시 사용할려면 Web Station를 체크하지 않는다.

 

docker-compose.yml 파일을 이용해서 컨테이너를 완성했다.

 

4. 역방향 프록시를 세팅한다.

DSM -> 로그인 포털 -> 고급

 

 

사용자 지정 머리글 세팅

 

 

주의사항 : 

 

URL 을 지정하지 않으면, 로그인시 localhost:3000 으로 이동한다.

NEXTAUTH_URL=https://example.com
AUTH_TRUST_HOST=true

 

Test 사이트 : https://next.doker.co.kr/ 

Github : https://github.com/ssh521/nextjs-dashboard