NextJS Docker 이미지를 어떻게 90% 축소했습니까?

안녕하세요 여러분!

최근에 우리 팀은 레거시 NextJS 프로젝트(swc 빌드가 없는 다음 v10 등)에서 작업하고 있었습니다. 인프라에서 AWS ECR 및 Kubernetes를 사용하므로 애플리케이션의 Docker 이미지를 구축합니다.

하지만... 뭔가 잘못되었습니다.

이 이미지를 보세요.



이 프로젝트는 1.37gb size!!로 도커 이미지를 구축했습니다.

CircleCI 제작 워크플로( deploy )는 최소한 8 minutes !! 지속되었습니다.



이 문제를 어떻게 해결했습니까?

먼저 왜 이런 일이 발생했는지 IDENTIFY 확인해야 합니다.

문제가 확인되면...

도커 이미지가 1gb?보다 커지는 이유

R: 모든 프로젝트 파일을 도커에 복사하고 있었기 때문입니다. DockerFile 에서 COPY . . 를 사용하고 있었습니다. Docker, you must copy all of the project to docker imag, okay? And "Docker" says: Yes, sir. 와 같습니다.

내 이전 DockerFile.

이 프로젝트에는 .dockerignore 파일도 없었습니다. :(

FROM node:14-alpine

WORKDIR /usr/src/app

COPY / .

EXPOSE 3000
CMD [ "yarn", "start" ]

이 문제를 어떻게 해결했습니까?

이에 대한 몇 가지 솔루션에 대해 조사하기 시작했습니다BIG PROBLEM!!.

이 문제를 해결하기 위한 저의 사고방식 흐름을 설명하겠습니다.

NextJS를 최신 버전으로 업데이트
이전에 말했듯이 이 프로젝트는 nextjs 10을 사용하고 있었습니다! nextjs 12용으로 업데이트했습니다.

stackoverflow/github 문제에 대한 해결책 찾기
즉시 해결 방법을 모르는 모든 문제에 대해 이를 수행해야 합니다.

Nextjs 문서/github에서 솔루션을 찾으십시오.
시작합니다...

Nextjs 출력 독립형

Next 12부터 Next.JS에 output standalone 옵션이 있습니다. 무엇입니까?
From NextJS website
Next.js는 node_modules의 선택 파일을 포함하여 프로덕션 배포에 필요한 파일만 복사하는 독립형 폴더를 자동으로 생성할 수 있습니다.

이 자동 복사를 활용하려면 next.config.js에서 활성화할 수 있습니다.

module.exports = {
  output: 'standalone'
}

이렇게 하면 node_modules를 설치하지 않고 자체적으로 배포할 수 있는 .next/standalone에 폴더가 생성됩니다.

실습

.dockerignore 파일을 추가했습니다.
프로젝트 실행에 필요하지 않은 폴더를 추가했습니다. (.github 폴더, storybook, mocks, models, jest 등, ...)

수정된 NextJS 구성output: 'standalone'를 next.config.js 파일에 추가했습니다. 이제 next는 독립 실행형 모드에서 빌드하고 프로젝트 실행에 필요한 파일만 있는 폴더를 만듭니다.

수정된 DockerFile
내DockerFile가 전체 프로젝트를 도커 이미지에 복사하기 전에 프로젝트를 변경했으며 이제 이미지에 필요한 파일만 복사하고 있습니다. 아래를 보십시오.

FROM node:14-alpine

WORKDIR /usr/src/app

// copying the `.next/standalone`, where's the necessary files for the production environment
COPY .next/standalone .

// copying static files, like (images, javascript chunks, etc)

COPY .next/static ./.next/static

// copying public assets (images, fonts, etc)
COPY public ./public

ENV NODE_ENV production
EXPOSE 3000

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

결과

이러한 변경 이전에는 도커 이미지 크기가 1.3gb 에 가까웠지만 지금은...



이러한 변경 이전에는 배포 파이프라인이 지속되었습니다8 to 10minutes.

유용한 링크

https://nextjs.org/docs/advanced-features/output-file-tracing
- https://github.com/vercel/next.js/tree/canary/examples/with-docker

내 github: https://github.com/joaovsa7
링크드인: