Amplify to EKS를 위한 Docker 작업기

1. 프로젝트 전역에 Dockerfile , .dockerignore 생성

2. Dockerfile 작성

# 프로젝트 노드 환경
FROM node:18-alpine AS base

# 프로젝트 패키지 매니저가 pnpm, 전역에 설치
RUN npm install -g pnpm

# First Layer
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /

# 필요한 모듈 설치
COPY package.json pnpm-lock.yaml ./
RUN pnpm install

# Second Layer
FROM base AS builder
WORKDIR /
COPY --from=deps /node_modules ./node_modules
COPY . .
COPY /environments/.env.stg ./

# 필요한 파일들을 전부 복사했는데 왜 여기서 다시 pnpm install을 해줘야 실행이 되는지..?
RUN pnpm install

# stg 환경 배포
RUN pnpm build:stg

# Third Layer
FROM base AS runner
WORKDIR /

ENV NODE_ENV=production

# stg 환경변수 세팅
COPY --from=builder /environments/.env.stg ./
ENV $(cat /environments/.env.stg)

# nodejs, nextjs 권한 부여
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /node_modules ./node_modules
COPY / ./
COPY --from=builder /public ./public
COPY --from=builder --chown=nextjs:nodejs /.next ./.next

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["pnpm", "start:stg"]

1. next.config.ts standalone 옵션 추가

// 빌드 과정에서 import, require 구문들을 분석하여 필요한 파일들만 standalone에 세팅해줌
module.exports  = {
  output: 'standalone',
}

Issue

• standalone
• 빌드 과정에서 해당 폴더를 만든다.
• 코드에서 사용한 import request 코드들을 분석해서 필요한 것들만 해당 폴더에 넣은 뒤 빌드한다.

Advanced Features: Output File Tracing | Next.js

Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.

https://nextjs.org/docs/advanced-features/output-file-tracing

// package.json
{
  "type": "module"
}

RUN npm install -g pnpm

Tasks

1. docker build -t <이미지명>

2. docker run -p 3000:3000 <이미지명>

Result

• 삽질했던 이유는 도커 이미지에 필요한 파일들이 잘 이동하지 않았기 때문이다.

• 모든 파일들을 COPY해서 이미지로 보냈더니 잘 실행이됨.

• 이미지 용량은 2.6GB 가량, .dockerignore 세팅을 해주니 1.2GB까지 줄일 수 있었다.

Reference

Next.js 도커 이미지를 만들어서 CI/CD를 통해 NCloud 배포 (1)

프로젝트를 시작하는 단계에서 먼저 작업할만한게 뭐가 좋을까 생각하다가 배포 자동화를 만드는게 좋겠다고 생각해서 진행하게 되었습니다. 이건 제가 자진해서 해보겠다고 했는데 왜냐면 재밌어보이니까요.

https://velog.io/@ckstn0777/Next.js-도커-이미지를-만들어서-CICD를-통해-NCloud-배포-1

next.js/Dockerfile at canary · vercel/next.js

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

🚢 Next.js 도커 이미지 크기 줄이기

다음은 next.js 공식 코드베이스에 공개되어 있는 Dockerfile 이다. dependency 설치, 빌드, 실행 스테이지로 나누고 node:alpine를 베이스 이미지로 사용한 모범적인 모습이다. 하지만 조금이라도 컨테이너 이미지 크기를 줄여보려면 다음의 코드 두 줄을 next build 이후에 추가할 수 있다. 간단한 next.js 앱으로 before & after 를 비교해보면 572.15MB vs 250.39.MB 로 두 배 이상의 극적인 이미지 크기 축소를 볼 수 있다.

https://taeho.io/pages/8013f2c9-2602-48a9-abf4-053c9ea1dbb2

Next.js Docker 컨테이너 배포하는 방법 (Using Docker with Next.js)

최근 회사에서 AWS Elastic Beanstalk 기반에서 AWS ECS + Fargate 조합으로 배포 방식을 변경함으로써 도커를 활용하게 되었습니다. 단순히 도커 이미지를 빌드하고, 컨테이너 배포하는 과정은 굉장히 간단하지만, AWS ECS, ECR 그리고 파게이트(Fargate)를 활용해서 웹서비스를 구성하는 과정은 생각보다 까다롭고 부차적으로 공부해야 될 부분이 굉장히 많습니다. 도커를 활용해서 이미지를 빌드하고 배포하는 간단한 과정부터 시작해서 AWS ECS + Fargate를 활용해서 웹서비스를 생성해보고, Github Actions와 AWS Codedeploy를 활용한 무중단 배포(Blue/Green) 자동화 과정까지 다뤄보도록 하겠습니다. Next.js + Docker 세팅 Next.j..

https://webruden.tistory.com/1060