Next.jsの開発環境をDocker with Multi Stage Build

tl;dr

  • Multi Stage Buildを利用することで147MBほど減った。
  • 今回は開発環境のDocker化が目的。production環境ではSSG or SSRだと思うのでまた別の対応が必要になりそう。

Example Project

github.com

完成形

gist.github.com

Multi Stage Buildを利用しないケース

$ docker build -f Dockerfile_dev .
Sending build context to Docker daemon  139.6MB
Step 1/9 : FROM node:12.18.2-alpine as builder
 ---> 057fa4cc38c2
Step 2/9 : WORKDIR /app
 ---> Running in f53a1b123569
Removing intermediate container f53a1b123569
 ---> 485a44f0ebd3
Step 3/9 : COPY package.json .
 ---> 5b58fb396840
Step 4/9 : COPY yarn.lock .
 ---> 8fbd886ebe49
Step 5/9 : COPY tsconfig.json .
 ---> dd9ea9f86d64
Step 6/9 : RUN yarn install --production
 ---> Running in 997d0a1b080d
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 39.21s.
Removing intermediate container 997d0a1b080d
 ---> df1be46b2ed3
Step 7/9 : COPY . .
 ---> d91d29256d71
Step 8/9 : EXPOSE 3000
 ---> Running in f6db73858185
Removing intermediate container f6db73858185
 ---> ef8b3ac6a59f
Step 9/9 : CMD [ "yarn", "dev" ]
 ---> Running in 003480d5135e
Removing intermediate container 003480d5135e
 ---> f9590e7cb54e
Successfully built f9590e7cb54e
$ docker image ls | grep f9590e7cb54e
<none>                             <none>              f9590e7cb54e        16 seconds ago      431MB

431MB

Multi Stage Buildを利用するケース

$ docker build -f Dockerfile_dev .
Sending build context to Docker daemon  139.6MB
Step 1/11 : FROM node:12.18.2-alpine as builder
 ---> 057fa4cc38c2
Step 2/11 : WORKDIR /app
 ---> Using cache
 ---> 485a44f0ebd3
Step 3/11 : COPY package.json .
 ---> Using cache
 ---> 5b58fb396840
Step 4/11 : COPY yarn.lock .
 ---> Using cache
 ---> 8fbd886ebe49
Step 5/11 : COPY tsconfig.json .
 ---> Using cache
 ---> dd9ea9f86d64
Step 6/11 : RUN yarn install --production
 ---> Using cache
 ---> df1be46b2ed3
Step 7/11 : FROM node:12.18.2-alpine
 ---> 057fa4cc38c2
Step 8/11 : COPY --from=builder /app/node_modules /app/node_modules
 ---> fd4d5616ed40
Step 9/11 : COPY . .
 ---> 8964cefa6942
Step 10/11 : EXPOSE 3000
 ---> Running in 16526606b919
Removing intermediate container 16526606b919
 ---> e5a03c34f700
Step 11/11 : CMD [ "yarn", "dev" ]
 ---> Running in a74809ecc5d4
Removing intermediate container a74809ecc5d4
 ---> 5ca7bf661d87
Successfully built 5ca7bf661d87
$ docker image ls | grep 5ca7bf661d87
<none>                             <none>              5ca7bf661d87        28 seconds ago      284MB

まとめ

  • Multi Stage Buildを利用することでイメージの容量がだいぶ減るので利用しない手はない。

ref

tech.plaid.co.jp docs.docker.com