Docker multi stage build on Nuxt.js Application 2019.08.26 #nuxtmeetup @potato4d(Takuma HANATANI)

Profile • potato4d (Takuma HANATANI) • Senior Front-End Engineer at LINE Corp. • Nuxt.js Beginners Guide Author • Nuxt.js contributor (v2.4 new feature)

Nuxt.js ʹ͓͚Δ Docker ӡ༻

Έͳ͞ΜͲΕͰ΍ͬͯ·͔͢ʁ

Nuxt.js on Docker 1. ։ൃ؀ڥ͚ͩ Docker Խ 2. ຊ൪؀ڥ͚ͩ Docker Խ 3. ։ൃɾຊ൪ͱ΋ʹ Docker Խ

Nuxt.js on Docker 1. ։ൃ؀ڥ͚ͩ Docker Խ 2. ຊ൪؀ڥ͚ͩ Docker Խ 3. ։ൃɾຊ൪ͱ΋ʹ Docker Խ

։ൃ / ຊ൪ڞ༗ Docker ͭΒ͍࿩

1.ΧΦεԽ͢Δ Docker पΓͷઃఆϑΝΠϧ

2. ҰͭͷϑΝΠϧʹ·ͱΊΑ͏ͱͨ݁͠ՌͷṖ shell

Multi stage build ͕ศར ✨ ͦΜͳͱ͖͸

What's Docker multi stage build • Docker 17.05(2೥લ) ͔Β௥Ճ͞Εͨػೳ • 1ຕͷ Dockerfile ಺Ͱෳ਺ͷΠϝʔδΛੜ੒Ͱ͖Δ • ੜ੒ͨ͠ΠϝʔδؒͰͷσʔλڞ༗͕Ͱ͖Δ • ओʹϏϧυͱ࣮ߦΛ෼ׂ͢Δ͜ͱʹΑͬͯΠϝʔδαΠζΛ࡟ݮ͢ ΔͨΊʹར༻͞ΕΔ

Docker multi stage build on Nuxt.js • ࣮͸ Nuxt.js ͷΑ͏ͳ։ൃɾຊ൪Ͱڍಈ͕େ͖͘ҧ͏΋ͷͰ΋ศར • ։ൃ؀ڥͰ͸։ൃ؀ڥ޲͚ͷϏϧυεςʔδͰ࡞ۀ • ຊ൪޲͚Ϗϧυ͸ઐ༻ͷϏϧυεςʔδʹด͡ࠐΊͯॲཧ • ຊ൪؀ڥ͸͞ΒʹผͷεςʔδͰॲཧ • ίʔυ͕෼཭Ͱ͖ͯخ͍͠ʂʂʂʂ

Dockerfile 1. # ։ൃ؀ڥ޲͚ 2. FROM node:10.16.1-alpine as dev-env # as Λ͚ͭΔ͜ͱͰϏϧυ؀ڥʹ໋໊Λ௥Ճ 3. WORKDIR /app 4. COPY . /app 5. RUN apk update 6. RUN yarn 7. CMD ["yarn", "dev"] 8. 9. # Ϗϧυ؀ڥ޲͚ 10. FROM node:10.16.1-alpine as build-env # as Λ͚ͭΔ͜ͱͰϏϧυ؀ڥʹ໋໊Λ௥Ճ 11. WORKDIR /app 12. COPY . /app 13. RUN apk update 14. RUN yarn 15. RUN yarn build 16. # ৔߹ʹΑͬͯ͸੒Ռ෺ͷ S3 ΞοϓϩʔυͳͲ

Dockerfile 16. # ຊ൪؀ڥ޲͚ 17. FROM node:10.16.1-alpine # ϝΠϯͷΠϝʔδ͸ಛʹԿ΋͚ͭͳͯ͘ྑ͍ 18. WORKDIR /app 19. COPY . /app 20. COPY --from=build-env /app/.nuxt /app/.nuxt # ผͷϏϧυ͔Β੒Ռ෺ΛίϐʔՄೳ 21. RUN yarn 22. CMD ["yarn", "start"]

docker-compose.yml 1. version: '3.4' 2. services: 3. nuxt: 4. build: 5. context: . 6. target: dev-env # docker-compose Ͱ͸ target ΛࢦఆՄೳ 7. volumes: 8. - .:/app 9. ports: 10. - '3000:3000' 11. command: 'env HOST=0.0.0.0 yarn dev'

Terminal 1. # For development 2. $ docker-compose up # ։ൃ࣌͸ docker-compose ͚ͩͰ OK 3. 4. # For CI 5. $ docker build —-target build-env # Docker file Λ build-env ·Ͱ࣮ߦ͢Δ 6. 7. # For CD(push to container registry) 8. $ docker build . # Dockerfile Λ͢΂࣮ͯߦ͢Δ

ϑΝΠϧҰຕͣͭʹऩ·ͬͯεοΩϦ

Docker-compose ͚ͩͰ։ൃઐ༻ͷ؀ڥͷߏங͕όονϦ

Multi stage build ·ͱΊ

Docker multi stage build on Nuxt.js • ΠϝʔδαΠζ࡟ݮͰ࢖ΘΕΔ multi stage build ͸ Nuxt.js Ͱ΋خ͍͠ • ͢΂ͯ Docker Խ͢Δͱ͖ͷṖͷ৚݅෼ذ͕ݮΔ • nuxt build ͷ͋ͱʹྫ͑͹ S3 ΞοϓϩʔυͳͲ͕͋Δ৔߹΋ SDK ΍ CLI Λ ด͡ࠐΊͯΠϝʔδαΠζ࡟ݮ΋Ͱ͖Δ • devDeps Λ஄͘͜ͱʹΑΓ ESLint ΍ Jest Λফͯ͠΋αΠζΛ࡟ݮ΋Ͱ͖Δ • αϯϓϧ: https://github.com/potato4d/docker-multi-stage-build-on-nuxt

ΈΜͳ Multi stage build ͔͓ͭ͏

ຊ౰ʹʁ

ͦ΋ͦ΋։ൃ؀ڥʹ Docker ཁΓ·͔͢

։ൃ؀ڥͷ Docker ԽͰخ͍͜͠ͱ • OS΍ϓϥοτϑΥʔϜɺ؀ڥʹґଘ͢Δίʔυʹڧ͍ • ݴޠϥϯλΠϜҎ֎ʹඞཁͳύοέʔδͷ؀ڥߏங͕༰қ • ໘౗ͳखॱॻͳͲΛඞཁͱͤͣىಈ͢Δ͚ͩͰ։ൃ͕Ͱ͖Δ

ຊ౰ʁ

։ൃ؀ڥͷ Docker ԽͰخ͍͜͠ͱ • OS΍ϓϥοτϑΥʔϜɺ؀ڥʹґଘ͢Δίʔυʹڧ͍ • Nuxt.js ʹ Native Extension ೖΕͳ͘ͳ͍ʁ(node-gyp / node-sass Ҏ֎) • ݴޠϥϯλΠϜҎ֎ʹඞཁͳύοέʔδͷ؀ڥߏங͕༰қ • Nuxt.js ʹ Native Extension ೖΕͳ͘ͳ͍ʁ • ໘౗ͳखॱॻͳͲΛඞཁͱͤͣىಈ͢Δ͚ͩͰ։ൃ͕Ͱ͖Δ • yarn && yarn dev Ҏ্ʹͳʹ͔ඞཁͳ͜ͱ͸ك

ରͯ͠خ͘͠ͳ͍͜ͱ

։ൃ؀ڥͷ Docker ԽͰخ͘͠ͳ͍͜ͱ • લड़ͷΑ͏ͳϏϧυ؀ڥ΁ͷ౤ࢿ͕ඞཁ • ৗʹτϥϯεύΠϧ͕ඞཁͳ SPA ͷ؀ڥͰ͸ϑΝΠϧ I/O ͕ॏ͍ • ຊ൪؀ڥͷӡ༻͚ͩʹ໨Λ޲͚ΒΕΔͷͰྑ͍

·ͱΊ

·ͱΊ • Nuxt.js Ͱͷ Docker ؀ڥڞ༗͸ multi stage build ͕خ͍͠ • ϑϩϯτΤϯυ͸ͦΕͧΕͷ؀ڥͰ΍Δ͜ͱ͕ҧ͏ • multi stage build ͳΒҰͭͷϑΝΠϧͰ͏·͘෼͚ΒΕΔ • ຊདྷͷ༻్Ͱ͋ΔϑΝΠϧαΠζ࡟ݮతʹ΋΢ϨγΠ • Ͱ΋ͿͬͪΌ͚։ൃ؀ڥ͸ Docker Խ͠ͳͯ͘Α͘Ͷʁ • ͳʹΑΓτϥϯεύΠϧͷϑΝΠϧ I/O ෛՙ͕ͭΒ͍͠……