월 십억 자동 수익(워드)

처음 시작

—

제공

kaja
안

코멘트

“처음 시작” 에 하나의 답글

  1. kaja 아바타
    kaja

     

    🚀 도메인 연결 A to Z: Next.js 앱을 `kajajuni.store`에 배포하기! Docker Compose, Nginx, 그리고 DNS 설정을 활용하여 Next.js 프로젝트를 실제 도메인에 연결하는 가장 구체적인 방법을 단계별로 안내합니다. 여러분의 웹 서비스를 이제 전 세계에 공개할 시간입니다!

    안녕하세요! Next.js로 만든 멋진 웹 애플리케이션을 완성하고, 이제는 실제 도메인에 연결해서 서비스하고 싶으시죠? 특히 Docker Compose 환경에서 Nginx를 리버스 프록시로 사용하고 계시다면, ‘아, 이걸 어떻게 연결해야 할까?’ 하는 고민이 있으실 거예요. 저도 그랬습니다! 하지만 걱정 마세요. 오늘은 여러분의 Next.js 프로젝트, 예를 들어 `kajajuni.store` 도메인에 연결하는 과정을 정말 구체적으로, 단계별로 설명해 드릴게요. 따라만 오시면 충분히 가능합니다! 😊

     

    사전 준비물 확인: 우리의 개발 환경! 🛠️

    시작하기 전에, 현재 여러분의 환경이 제가 가정하는 환경과 동일한지 확인하는 것이 중요합니다.

    • 서버 OS: Ubuntu (Docker 및 Docker Compose 설치 완료)
    • Next.js 프로젝트: `~/NodeServer/nextjs/kaja` 경로에 위치하며, `package.json` 파일이 존재함. (프로젝트명: `kaja`)
    • Docker Compose: `docker-compose.yml` 파일이 서버 어딘가에 존재하며, Next.js, Nginx, MySQL, phpMyAdmin 서비스가 정의되어 있음.
    • 도메인: `kajajuni.store` (이미 구매 완료 및 DNS 관리 페이지 접근 가능)
    • SSH 접속: 서버에 SSH로 접속하여 명령어를 실행할 수 있음.

    자, 이 환경을 기준으로 하나씩 차근차근 진행해봅시다!

     

    1단계: Next.js 애플리케이션 프로덕션 빌드 📦

    Next.js 앱을 서비스하려면, 개발 모드 대신 최적화된 프로덕션 빌드를 해야 합니다. 이 과정에서 `.next` 폴더가 생성되고, 이 폴더 안의 파일들이 실제 서비스에 사용됩니다.

    터미널 명령어:

    먼저 서버에서 Next.js 프로젝트 디렉토리로 이동하세요.

    cd ~/NodeServer/nextjs/kaja

    프로젝트 의존성(npm packages)을 설치합니다. 이미 설치되어 있어도 안전을 위해 다시 실행하는 것을 권장합니다.

    npm install

    이제 Next.js 앱을 빌드합니다. 이 명령어가 `.next` 폴더를 생성합니다.

    npm run build

    빌드가 완료되면, `~/NodeServer/nextjs/kaja/.next` 디렉토리가 생성되었는지 확인해보세요.

    혹시 빌드 과정에서 에러가 발생하면, `package.json`의 `scripts` 부분에 `build` 스크립트가 `next build`로 제대로 정의되어 있는지, 그리고 필요한 의존성들이 모두 설치되었는지 확인해보세요.

     

    2단계: Dockerfile 및 Docker Compose 설정 갱신 🐳

    이제 Docker 환경에서 Next.js 앱과 Nginx가 서로 통신할 수 있도록 설정 파일을 수정할 차례입니다.

    Next.js 컨테이너용 `Dockerfile` 생성/수정

    `~/NodeServer/nextjs/kaja/Dockerfile` 파일을 아래 내용으로 생성하거나, 이미 있다면 수정해주세요. 이 파일은 Next.js 앱을 도커 이미지로 만드는 방법을 정의합니다.

    # 빌드 단계: Node.js 20 버전 alpine 이미지를 사용
FROM node:20-alpine AS builder

# 작업 디렉토리 설정 (컨테이너 내부)
WORKDIR /app

# package.json 및 package-lock.json 복사 (캐싱 활용을 위해 먼저 복사)
COPY package*.json ./

# 의존성 설치
RUN npm install

# 나머지 애플리케이션 코드 복사 (빌드된 .next 폴더도 포함)
COPY . .

# Next.js 애플리케이션 빌드
# 이 단계에서 .next 폴더가 /app/.next 경로에 생성됩니다.
RUN npm run build

# 프로덕션 단계: 더 가벼운 Node.js 20 버전 alpine 이미지를 사용
FROM node:20-alpine

# 작업 디렉토리 설정
WORKDIR /app

# 빌드 단계에서 생성된 필요한 파일들만 복사
# .next 폴더 (빌드 결과물)
COPY --from=builder /app/.next ./.next
# node_modules (런타임에 필요한 의존성)
COPY --from=builder /app/node_modules ./node_modules
# package.json (npm start 명령 실행을 위해 필요)
COPY --from=builder /app/package.json ./package.json
# public 폴더 (정적 파일)
COPY --from=builder /app/public ./public

# Next.js 앱이 내부적으로 사용할 포트 (Nginx가 이 포트로 접근)
EXPOSE 3000

# 프로덕션 환경 변수 설정
ENV NODE_ENV production

# Next.js 애플리케이션 실행 명령어
CMD ["npm", "start"]

    `docker-compose.yml` 파일 수정

    여러분 서버의 `docker-compose.yml` 파일 (예: `/home/wowkaja/NodeServer/docker-compose.yml` 또는 프로젝트 루트)을 열어 아래와 같이 Next.js 서비스와 Nginx 서비스 부분을 확인하거나 수정합니다.

    version: '3.8'

services:
  # Next.js 애플리케이션 서비스 정의
  nextjs-app: # 이 이름이 Nginx 설정에서 'proxy_pass'에 사용될 서비스 이름입니다!
    build:
      context: ./nextjs/kaja # Dockerfile이 있는 Next.js 프로젝트의 상대 경로
      dockerfile: Dockerfile
    # ports:
    #  - "3000:3000" # 외부 노출은 Nginx가 담당하므로, 필요에 따라 주석 처리 가능
    restart: always
    environment:
      - NODE_ENV=production
    networks:
      - app-network # Nginx와 동일한 네트워크에 속해야 함

  # Nginx 웹 서버 서비스 정의
  nginx:
    image: nginx:latest
    ports:
      - "80:80"   # HTTP 요청을 80번 포트로 받음
      - "443:443" # HTTPS 요청을 443번 포트로 받음 (SSL/TLS 설정 시)
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro # 전역 Nginx 설정 (옵션)
      - ./nginx/conf.d:/etc/nginx/conf.d:ro         # 사이트별 설정 파일 디렉토리
      # 만약 Next.js의 static 파일을 Nginx가 직접 서빙하고 싶다면, Next.js 빌드 결과물 볼륨 마운트
      # - ./nextjs/kaja/.next/static:/app/.next/static:ro # 컨테이너 내부 경로와 일치
      # - ./nextjs/kaja/public:/app/public:ro # public 폴더도 필요 시
    depends_on:
      - nextjs-app # nextjs-app이 먼저 시작되도록 의존성 설정
    restart: always
    networks:
      - app-network # nextjs-app과 동일한 네트워크에 속해야 함

  # MySQL 데이터베이스 서비스 (기존 설정 유지)
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: your_root_password # 실제 비밀번호로 변경
      MYSQL_DATABASE: your_database_name # 사용할 데이터베이스 이름
      MYSQL_USER: your_user # 사용할 사용자 이름
      MYSQL_PASSWORD: your_password # 사용할 사용자 비밀번호
    volumes:
      - mysql_data:/var/lib/mysql # 데이터 지속성을 위한 볼륨
    networks:
      - app-network

  # phpMyAdmin 서비스 (기존 설정 유지)
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    ports:
      - "8080:80" # 외부에서 8080 포트로 접속
    environment:
      PMA_HOST: mysql # MySQL 서비스 이름
      MYSQL_ROOT_PASSWORD: your_root_password # MySQL root 비밀번호와 일치
    depends_on:
      - mysql
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  mysql_data: # MySQL 데이터 볼륨 정의

    여기서 가장 중요한 부분은 `nextjs-app` 서비스의 `build.context` 경로가 실제 `kajajuni.store` 프로젝트 폴더(`~/NodeServer/nextjs/kaja`)와 일치해야 한다는 점입니다. 그리고 Nginx와 Next.js가 `app-network`라는 동일한 네트워크에 속해 있는지 확인해야 합니다.

    Nginx 사이트 설정 파일 (`nginx/conf.d/kajajuni.store.conf`)

    `docker-compose.yml` 파일이 있는 디렉토리에 `nginx` 폴더를 만들고, 그 안에 `conf.d` 폴더를 만든 다음, `kajajuni.store.conf` 파일을 아래 내용으로 생성하세요. 이 파일은 Nginx가 `kajajuni.store` 도메인으로 들어오는 요청을 어떻게 처리할지 정의합니다. 

    # HTTP (80 포트) 요청 처리
server {
    listen 80; # 80번 포트로 들어오는 요청을 수신
    server_name kajajuni.store www.kajajuni.store; # 여러분의 도메인 이름과 www 서브도메인

    # Next.js 애플리케이션으로 요청을 프록시
    location / {
        # `nextjs-app`은 docker-compose.yml에 정의된 Next.js 서비스 이름
        # `3000`은 Next.js 앱이 컨테이너 내부에서 실행되는 포트
        proxy_pass http://nextjs-app:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host; # 원본 요청의 Host 헤더를 전달
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr; # 클라이언트의 실제 IP 주소 전달
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 프록시를 거친 IP 주소 전달
        proxy_set_header X-Forwarded-Proto $scheme; # 요청 프로토콜 (http/https) 전달
    }

    # 다음 주석 처리된 부분은 선택 사항이지만, Nginx가 Next.js 정적 파일을 직접 서빙하도록 설정하여 성능을 향상시킬 수 있습니다.
    # 이를 사용하려면 docker-compose.yml의 nginx volumes에 해당 경로를 마운트해야 합니다.
    # location /_next/static/ {
    #     alias /app/.next/static/; # Next.js 빌드 결과물의 정적 파일 경로 (컨테이너 내부)
    #     expires 1y; # 1년 동안 캐싱
    #     access_log off;
    #     add_header Cache-Control "public, immutable";
    # }

    # location /favicon.ico {
    #    alias /app/public/favicon.ico; # public 폴더의 favicon.ico 경로
    #    expires 1d;
    #    access_log off;
    #    add_header Cache-Control "public";
    # }

    # 에러 발생 시 보여줄 페이지 설정 (옵션)
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html; # Nginx 기본 html 폴더에 50x.html 파일이 있다고 가정
    }
}

    Nginx 설정에서 가장 중요한 `proxy_pass http://nextjs-app:3000;` 부분은 Nginx가 `kajajuni.store`로 들어온 모든 웹 요청을 `nextjs-app`이라는 이름의 Docker 서비스(즉, Next.js 컨테이너)의 3000번 포트로 전달하라는 의미입니다.

    Docker Compose 재시작 및 변경 사항 적용

    Dockerfile과 `docker-compose.yml`, Nginx 설정 파일을 모두 수정했다면, 이제 Docker Compose를 다시 시작하여 변경 사항을 적용합니다. 

    # docker-compose.yml 파일이 있는 디렉토리로 이동합니다.
cd /path/to/your/docker-compose-file-directory # 예: cd ~/NodeServer

# 현재 실행 중인 컨테이너들을 종료하고 제거합니다.
docker-compose down

# 컨테이너를 다시 빌드하고 백그라운드에서 실행합니다.
# `--build` 옵션으로 Dockerfile 변경 사항이 반영되도록 합니다.
docker-compose up -d --build

    `docker-compose up -d –build` 명령어를 실행하면 Docker가 Next.js 이미지를 새로 빌드하고, Nginx를 포함한 모든 서비스를 다시 시작할 것입니다. 모든 컨테이너가 에러 없이 잘 실행되는지 `docker-compose ps` 명령어로 확인해보세요.

     

    3단계: DNS 설정 업데이트 (도메인과 서버 연결) 🔗

    이제 마지막 단계입니다! 구매하신 `kajajuni.store` 도메인이 여러분의 서버 공인 IP 주소를 가리키도록 설정해야 합니다. 이 작업은 도메인 등록 업체(가비아, 카페24, 호스팅케이알 등)의 웹사이트에서 진행합니다.

    📌 DNS 관리 페이지에서 A 레코드 추가/수정

    • A 레코드 추가 (루트 도메인용):
      • 타입: `A`
      • 호스트/이름: `@` 또는 `(비워둠)` (이는 `kajajuni.store` 자체를 의미합니다.)
      • 값/IP 주소: 여러분의 서버 공인 IP 주소
      • TTL: 기본값 (3600초 또는 1시간)
    • CNAME 또는 A 레코드 추가 (www 서브도메인용):
      • 타입: `CNAME` (권장)
      • 호스트/이름: `www`
      • 값/도메인 이름: `kajajuni.store` (루트 도메인으로 연결)

      혹은 `A` 레코드로 `www` 호스트에 서버 공인 IP를 직접 연결할 수도 있습니다.

    변경 사항을 저장하고, DNS 전파가 완료될 때까지 기다립니다.

    DNS 변경 사항은 인터넷 전체에 반영되는 데 시간이 걸릴 수 있습니다. 짧게는 몇 분, 길게는 24~48시간까지 소요될 수 있습니다. 여러분의 로컬 PC 터미널에서 `nslookup kajajuni.store` 명령어를 실행하여 IP 주소가 제대로 반영되었는지 주기적으로 확인해보세요.

     

    4단계: HTTPS (SSL/TLS) 적용하기 (필수 권장!) 🔐

    요즘 웹사이트는 보안을 위해 반드시 HTTPS를 사용해야 합니다. Let’s Encrypt를 이용하면 무료로 SSL 인증서를 발급받고 자동으로 갱신할 수 있습니다. Nginx와 Certbot을 함께 사용하면 아주 편리합니다. 이 과정은 별도의 상세한 단계가 필요하지만, 간략하게 흐름을 설명해 드릴게요.

    • Certbot 설치: 서버에 Certbot을 설치합니다. (예: `sudo apt update && sudo apt install certbot python3-certbot-nginx`)
    • Nginx 설정 수정: Certbot이 Nginx 설정을 자동으로 수정할 수 있도록 Nginx 컨테이너의 80번 포트가 서버의 80번 포트에 잘 연결되어 있어야 합니다.
    • 인증서 발급: `sudo certbot –nginx -d kajajuni.store -d http://www.kajajuni.store` 명령어를 실행하여 인증서를 발급받습니다. Certbot이 Nginx 설정을 자동으로 업데이트해줄 것입니다.
    • Nginx 재시작: `docker-compose restart nginx` 또는 `sudo systemctl reload nginx` (Certbot이 호스트 Nginx에 직접 적용한 경우)로 Nginx를 다시 시작합니다.

    HTTPS 적용은 매우 중요하므로, 이 단계도 꼭 진행하시는 것을 강력히 권장합니다!

    글의 핵심 요약 📝

    지금까지 Next.js 애플리케이션을 Docker Compose 환경에서 `kajajuni.store` 도메인에 연결하는 구체적인 방법을 알아봤습니다. 다시 한번 핵심을 짚어볼까요?

    1. 1단계: Next.js 앱 빌드 (터미널)
      • `cd ~/NodeServer/nextjs/kaja`
      • `npm install`
      • `npm run build`
    2. 2단계: Dockerfile 및 Docker Compose 설정 (파일 수정)
      • `~/NodeServer/nextjs/kaja/Dockerfile` 생성/수정
      • `docker-compose.yml` (Next.js 및 Nginx 서비스) 수정
      • `nginx/conf.d/kajajuni.store.conf` 생성 (Nginx 프록시 설정)
    3. 3단계: Docker Compose 재시작 (터미널)
      • `cd /path/to/your/docker-compose-file-directory`
      • `docker-compose down`
      • `docker-compose up -d –build`
    4. 4단계: DNS 설정 업데이트 (도메인 등록 업체 사이트)
      • `kajajuni.store` 및 `www.kajajuni.store`에 대한 A 레코드 및 CNAME 레코드 추가.
    5. 5단계: HTTPS (SSL/TLS) 적용 (선택, 강력 권장)
      • Certbot을 이용한 Let’s Encrypt 인증서 발급 및 Nginx 적용.

    이 모든 단계를 성공적으로 마치셨다면, 이제 `https://kajajuni.store` 또는 `https://www.kajajuni.store` (HTTPS 적용 시)를 통해 여러분의 멋진 Next.js 애플리케이션에 접속할 수 있을 거예요! 🎉 혹시 과정에서 막히는 부분이 있다면 언제든지 댓글로 질문해주세요. 여러분의 성공적인 배포를 응원합니다!

     

    응답

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다