NextJS용 Dockerfile 이미지 최적화

NextJS용 Dockerfile 이미지 최적화

NextJS Docker 이미지가 너무 큽니다. 따라서 이 기사에서는 프로덕션을 위해 dockerfile을 최적화하는 방법에 중점을 둘 것입니다. 여기에서는 도커 이미지를 최적화하기 위해 두 가지 방법을 사용합니다.

here의 전체 소스 코드

설정

먼저 nextjs로 프로젝트를 생성해야 합니다. 빨리, 나는 Vercel의 예를 사용하고 here의 프로젝트를 사용합니다.

프로젝트 구조:

.
├── @types
│   └── remark-html.d.ts
├── README.md
├── _posts
│   ├── dynamic-routing.md
│   ├── hello-world.md
│   └── preview.md
├── components
│   ├── alert.tsx
│   ├── avatar.tsx
│   ├── container.tsx
│   ├── cover-image.tsx
│   ├── date-formatter.tsx
│   ├── footer.tsx
│   ├── header.tsx
│   ├── hero-post.tsx
│   ├── intro.tsx
│   ├── layout.tsx
│   ├── markdown-styles.module.css
│   ├── meta.tsx
│   ├── more-stories.tsx
│   ├── post-body.tsx
│   ├── post-header.tsx
│   ├── post-preview.tsx
│   ├── post-title.tsx
│   └── section-separator.tsx
├── interfaces
│   ├── author.ts
│   └── post.ts
├── lib
│   ├── api.ts
│   ├── constants.ts
│   └── markdownToHtml.ts
├── next-env.d.ts
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── index.tsx
│   └── posts
│       └── [slug].tsx
├── postcss.config.js
├── public
│   ├── assets
│   │   └── blog
│   │       ├── authors
│   │       │   ├── jj.jpeg
│   │       │   ├── joe.jpeg
│   │       │   └── tim.jpeg
│   │       ├── dynamic-routing
│   │       │   └── cover.jpg
│   │       ├── hello-world
│   │       │   └── cover.jpg
│   │       └── preview
│   │           └── cover.jpg
│   └── favicon
│       ├── android-chrome-192x192.png
│       ├── android-chrome-512x512.png
│       ├── apple-touch-icon.png
│       ├── browserconfig.xml
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       ├── favicon.ico
│       ├── mstile-150x150.png
│       ├── safari-pinned-tab.svg
│       └── site.webmanifest
├── styles
│   └── index.css
├── next.config.js
├── tailwind.config.js
└── tsconfig.json

그런 다음 이 블로그를 설치하고 구축합니다.

➜  blog-starter git:(master) ✗ yarn
➜  blog-starter git:(master) ✗ yarn build
➜  blog-starter git:(master) ✗ yarn start

귀하의 블로그는 localhost:3000에서 실행 중이어야 합니다.

Docker에서 구축

.dockerignore로 불필요한 파일 무시:

node_modules
*.DS_Store
.next
.gitignore
README.md
.dockerignore
LICENSE
.docker
.gitlab

here에는 3가지 시나리오dockerfile가 있습니다. 먼저 Basic Dockerfile을 사용하겠습니다.

➜  blog-starter git:(master) ✗ docker build -t blog-with-basic-dockerfile -f .docker/basic.dockerfile .

# Check docker images
➜  blog-starter git:(master) ✗ docker images
REPOSITORY                                       TAG                               IMAGE ID       CREATED          SIZE
blog-with-basic-dockerfile                       latest                            b70f75178890   8 seconds ago    370MB

이 시나리오에서는 370MB 크기로 빌드nextjs image했습니다.

다음으로 Multi Stage Docker과 함께 다단계 도커를 사용합니다.

➜  blog-starter git:(master) ✗ docker build -t blog-with-multistage-dockerfile -f .docker/multistage.dockerfile .

# Check docker images
➜  blog-starter git:(master) ✗ docker images
REPOSITORY                                           TAG                               IMAGE ID       CREATED           SIZE
blog-with-multistage-dockerfile                      latest                            07c84ea2173a   38 seconds ago    339MB

이런 식으로 패키지를 설치한 후 BUILD 단계에서 모듈node-prune을 사용합니다. node-prune는 node_modules에서 불필요한 파일을 제거할 수 있습니다.

         files total 43,924
       files removed 12,814
        size removed 28 MB
            duration 866ms

ㅎㅎ 28MB 줄었습니다. 기본 노드 이미지에서 설정하려면 다음guide을 따를 수 있습니다. 그래서 이 이미지는 370MB -> 339MB로 최적화 되었습니다.

마지막으로 다단계 도커로 빌드dockerfile하고 NextJS의 독립형 모드를 활성화합니다. 콘텐츠가 포함된 파일next.config.js 생성:

module.exports = {
    output: "standalone"
}

Nextjs는 node_modules의 선택 파일을 포함하여 프로덕션 배포에 필요한 파일만 복사하는 독립 실행형 폴더를 자동으로 생성할 수 있습니다. 더보기 docs .

Dockerfile부터 시작하겠습니다.

➜  blog-starter git:(master) ✗ docker build -t blog-with-multistage-standalone-dockerfile -f .docker/multistage_standalone.dockerfile .

# Check docker images
➜  blog-starter git:(master) ✗ docker images
REPOSITORY                                                      TAG                     IMAGE ID       CREATED           SIZE
blog-with-multistage-standalone-dockerfile                      latest                  07c84ea2173a   38 seconds ago    119MB

와! 훌륭합니다 ... 이미지 크기는 119MB에 불과합니다.



그래서 이미지 크기를 최적화하는 3가지 방법을 제시했는데... 빌드가 매우 느립니다. 다음 게시물에서는 이미지를 더 빠르게 빌드하는 방법을 보여 드리겠습니다.

읽어주셔서 감사합니다😁😁😁