Next 및 React를 EC2로 배포하기 (feat. Docker)

기본 환경 설정

도커 설치

도커 설치 방법은 아래 글 참조

https://jhchoi1182.tistory.com/282

EC2로 Docker를 이용해 배포하기 (feat. Mysql)

 

노드 설치

https://nodejs.org/en/download/package-manager

// Node Version Manager 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

// nvm 명령어를 사용할 수 있도록 쉘 환경을 다시 로드
source ~/.bashrc

// Node.js 다운
nvm install 20

// 확인
node -v
npm -v

이후 ec2에 프로젝트를 클론해온다.

 

https 설정

외부 서버로 인증서 발급받고 리버스 프록시 구성

상세 방법은 아래글 참조

// studysync.store과 www.studysync.store에 대해 인증서를 발급받고
// server_name에 대한 요청들을 https://www.studysync.store로 리다이렉트 시킴
// server_name www.studysync.store studysync.store; 처럼 합쳐도 됨
server {
    listen 80;
    server_name studysync.store;
    return 301 https://www.studysync.store$request_uri;
}
server {
    listen 80;
    server_name www.studysync.store;
    return 301 https://www.studysync.store$request_uri;
}

server {
        listen 443 ssl;
        server_name www.studysync.store;

        ssl_certificate /etc/letsencrypt/live/www.studysync.store/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/www.studysync.store/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }

// https://www.studysync.store/api로 시작하는 요청은 8080으로 연결
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }


}

https://jhchoi1182.tistory.com/283

스프링 부트 서버에 https 설정

Next에 도커 이용한 방법

https://nextjs.org/docs/app/building-your-application/deploying#docker-image

공식 문서에 친절히도 예제 코드와 방법이 제시되어 있다.

 

1. 먼저 루트 경로에 Dockerfile을 생성한 뒤 아래 코드를 붙여넣는다.

코드는 여러 환경에서 전부 배포될 수 있도록 구성되어있다.

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD HOSTNAME="0.0.0.0" node server.js

2. 컨테이너 빌드

docker build -t nextjs-docker .

3. 컨테이너 실행

docker run -p 3000:3000 nextjs-docker

근데 도커 이미지 용량이 상당히 크다.

도커 없이 배포

그냥 로컬처럼 패키지 설치 (npm install 등) 후 빌드해서 실행하면 된다.

다만 사용중인 ec2 터미널을 종료하면 실행이 종료되니 백그라운드에서 실행시켜줄 필요가 있다.

 

screen 사용하기

터미널 멀티플렉서로, 사용자가 여러 터미널 세션을 생성하고 관리할 수 있게 해준다.

 

설치

// Debian/Ubuntu 기반 시스템
sudo apt update
sudo apt install screen

// CentOS/RHEL 기반 시스템
sudo yum install screen

screen 명령어들

// 새로운 세션 시작
screen

// 종료
Ctrl-A 다음 D

// 세션 목록 확인
screen -list

There are several suitable screens on:	// screen -r 결과
        560354.pts-0.ip-172-31-43-29    (Detached)
        559890.pts-0.ip-172-31-43-29    (Detached)

// 세션 재접속
screen -r 560354

// 세션 종료
screen -S 560354 -X quit

// 모든 세션 종료
screen -ls | grep 'Attached\|Detached' | cut -d. -f1 | awk '{print $1}' | xargs -I {} screen -S {} -X quit
// screen -ls | grep 'Attached\|Detached': 실행 중인 모든 screen 세션을 리스트업
// cut -d. -f1 | awk '{print $1}': 세션 ID만 추출
// xargs -I {} screen -S {} -X quit: 추출된 각 세션 ID에 대해 screen 세션을 종료

세션 접속 후 프로젝트 경로로 들어가 실행시키면 된다.