Docker 파일 기반의 CI/CD 프로세스 최적화

docker 파일을 셋팅하고 최적화 작업을 한 내용을 기록용

FROM node:20.5.1-alpine3.17 AS base

FROM base AS deps

FROM base AS images

FROM base AS builder

FROM base AS runner

• 최적화에서 가장 중요한 과정 중에 하나인 멀티스테이지 구성이다
• 각 환경을 분리해서 각 환경에서 필요한 파일만을 이용해 이미지를 구성하는 방법이다
• 일반적으로는 build 시와 실제 runtime에서 필요한 파일을 나누고 있다

• 각 스테이지의 기준은 Next.js의 예시파일 을 기반으로 비슷하게 구성하였다

• 노드

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

• 대부분은 Next.js의 템플릿 을 그대로 사용하였다.
• 예시 파일에서는 패키지 종류에 따라 다른 명령어를 쓰도록 분기처리 되어있었다
• 스튜디오 차원에서 패키지매니저는 pnpm 만 쓰고 있어 조건문을 수정하였다

• 위에서 언급한대로 게임 어드민 특성상 image 리소스가 많아 별도의 스테이지로 분리해두었다

FROM base AS images
WORKDIR /app
COPY ./public/res ./public/res

• github 캐시 사용

• 게임 어드민 특성상 이미지가 많아 image 관련 스테이지만 추가하였다
• 이미지 크기를 최소화하기 위해 alpine (가장 경량화) 버전 사용
• 각 환경별 용량 차이는 꽤 큰 편이다 (링크)
• 기본, slim, alpine, onBuild 버전의 차이는 Docker Hub 에서 확인 가능

FROM node:20-alpine AS base

• alpine 문서를 보면 가장 큰 차이는 glibc대신 musl libc를 사용하는 것으로 보인다. (리눅스 시스템에서 표준 C 라이브러리 - GNU Library C)
• glibc이 필요한 경우 버전변경이 필요할수도 있다고 하니 glibc, musl libc 키워드에 대해 주의해야 겠다 (경량화 버전 사용으로 문제 발생 시 에러 메세지에 언급될 수 있으므로;;)

This variant is useful when final image size being as small as possible is your primary concern. The main caveat to note is that it does use musl libc⁠ instead of glibc and friends⁠, so software will often run into issues depending on the depth of their libc requirements/assumptions. See this Hacker News comment thread⁠ for more discussion of the issues that might arise and some pro/con comparisons of using Alpine-based images.

• 추가로 프로젝트에서 .npmrc 파일을 사용하고 있어 복사해 주었다
• pnpm i 을 할 때 --frozen-lockfile 옵션은 처음 알게 되었다
  • pnpm-lock.yaml을 절대 변경하지 않고 오로지 lockfile에 명시된 버전 그대로 의존성을 설치하도록 강제하는 옵션이라고 한다
  • lockfile 수정이 필요하면 에러가 발생한다고 하니 CI/CD과정에 잘 맞는 옵션이기도 하고 가끔 개발 환경별 문제가 발생할 때에도 유용하게 사용할 수 있을 것 같다.

COPY package.json pnpm-lock.yaml* ./

• 혹시, 다른 패키지 매니저에 대한 부분도 고려해야 하지않을까 고민이 들기도 했지만
• package.json에 명시되어 있으므로 큰 문제는 없을 듯하다

// package.json
// ...
"packageManager": "pnpm@8.0.0",
"pnpm": {
  "peerDependencyRules": {
    "allowedVersions": {
      "react": "^18",
      "react-dom": "^18"
    }
  },
 // ...

• Next.js에서 빌드시 .next/cache에 이전 빌드 데이터가 캐싱되게 된다

next.config.js Options: output

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/pages/api-reference/config/next-config-js/output

• remote 환경(github action)에서의 활용을 위해 actions/cache를 사용하였다

# ci.yaml
- name: Next.js cache
  uses: actions/cache@v3
  with:
	  path: ${{ github.workspace }}/.next/cache
		key: ${{ runner.os }}-${{ runner.node }}-${{ hashFiles('**/pnpm-lock.yaml') }}-nextjs

• 분리 된 Docker 환경에서의 활용을 위해 내보내는 로직을 작성해 주었다

# ci.yaml
- name: export Next.js cache
	uses: docker/build-push-action@v5
	with:
		context: .
		file: ./Dockerfile
		target: cache
		outputs: type=local,dest=.

• Docker 환경에도 .next/cache가 존재하여 COPY 명령어를 통해 복사해서 사용할 수 있다

# Dockerfile
COPY .next/cache ./.next/cache

• telemetry 비활성화

• 서버 실행에 필요한 모듈과 파일만 포함하도록 하는 standalone 옵션 사용
• .next/standalone에 생성 된 최적화 된 빌드파일을 사용하도록 설정

• 디렉티브는 어떤 문법으로 파싱해야 하는지 알려주는 역할이다
• 반드시 첫번째 줄에 적어야한다

# syntax=docker/dockerfile:1.4

Dockerfile reference

Find all the available commands you can use in a Dockerfile and learn how to use them, including COPY, ARG, ENTRYPOINT, and more.

https://docs.docker.com/reference/dockerfile/#syntax

• 기본적으로는 Next.js에서 제공하는 Dockerfile을 템플릿을 참고하였다
• node 환경별 구체적인 차이
• 멀티스테이지
• github action cache 활용
• docker의 기본 명령어

• vercel에서 수집하는 통계데이터인 telemetry가 수집되지 않도록 비활성화
• 최적화보다는 어드민의 특성상 보안을 위해 비활성화하였다

Next.js by Vercel - The React Framework

Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

https://nextjs.org/telemetry

ENV NEXT_TELEMETRY_DISABLED 1

next.config.js Options: output

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/pages/api-reference/config/next-config-js/output

const nextConfig = getConfig({
  // ...
  output: 'standalone',
  // ...
});

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

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

https://jaynote2022.tistory.com/entry/README-19

https://patrick-f.tistory.com/59

https://kyoung-jnn.com/posts/nextjs-build-optimization-in-ci

https://jadon.tistory.com/46