Docker multi stage build on Nuxt.js Application #nuxtmeetup

2019/8/26に行われたNuxtMeetUpでの登壇資料です。

Transcript

1. Docker multi stage build on Nuxt.js Application 2019.08.26 #nuxtmeetup @potato4d(Takuma HANATANI)
2. Profile • potato4d (Takuma HANATANI) • Senior Front-End Engineer at LINE Corp. • Nuxt.js Beginners Guide Author • Nuxt.js contributor (v2.4 new feature)
3. Nuxt.js ʹ͓͚Δ Docker ӡ༻
4. Έͳ͞ΜͲΕͰ΍ͬͯ·͔͢ʁ
5. Nuxt.js on Docker 1. ։ൃ؀ڥ͚ͩ Docker Խ 2. ຊ൪؀ڥ͚ͩ Docker Խ 3. ։ൃɾຊ൪ͱ΋ʹ Docker Խ
6. Nuxt.js on Docker 1. ։ൃ؀ڥ͚ͩ Docker Խ 2. ຊ൪؀ڥ͚ͩ Docker Խ 3. ։ൃɾຊ൪ͱ΋ʹ Docker Խ
7. ։ൃ / ຊ൪ڞ༗ Docker ͭΒ͍࿩
8. 1.ΧΦεԽ͢Δ Docker पΓͷઃఆϑΝΠϧ
9. 2. ҰͭͷϑΝΠϧʹ·ͱΊΑ͏ͱͨ݁͠ՌͷṖ shell
10. Multi stage build ͕ศར ✨ ͦΜͳͱ͖͸
11. What's Docker multi stage build • Docker 17.05(2೥લ) ͔Β௥Ճ͞Εͨػೳ • 1ຕͷ Dockerfile ಺Ͱෳ਺ͷΠϝʔδΛੜ੒Ͱ͖Δ • ੜ੒ͨ͠ΠϝʔδؒͰͷσʔλڞ༗͕Ͱ͖Δ • ओʹϏϧυͱ࣮ߦΛ෼ׂ͢Δ͜ͱʹΑͬͯΠϝʔδαΠζΛ࡟ݮ͢ ΔͨΊʹར༻͞ΕΔ
12. Docker multi stage build on Nuxt.js • ࣮͸ Nuxt.js ͷΑ͏ͳ։ൃɾຊ൪Ͱڍಈ͕େ͖͘ҧ͏΋ͷͰ΋ศར • ։ൃ؀ڥͰ͸։ൃ؀ڥ޲͚ͷϏϧυεςʔδͰ࡞ۀ • ຊ൪޲͚Ϗϧυ͸ઐ༻ͷϏϧυεςʔδʹด͡ࠐΊͯॲཧ • ຊ൪؀ڥ͸͞ΒʹผͷεςʔδͰॲཧ • ίʔυ͕෼཭Ͱ͖ͯخ͍͠ʂʂʂʂ
13. 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 ΞοϓϩʔυͳͲ
14. 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"]
15. 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'
16. 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 Λ͢΂࣮ͯߦ͢Δ
17. ϑΝΠϧҰຕͣͭʹऩ·ͬͯεοΩϦ
18. Docker-compose ͚ͩͰ։ൃઐ༻ͷ؀ڥͷߏங͕όονϦ
19. Multi stage build ·ͱΊ
20. 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
21. ΈΜͳ Multi stage build ͔͓ͭ͏
22. ຊ౰ʹʁ
23. ͦ΋ͦ΋։ൃ؀ڥʹ Docker ཁΓ·͔͢
24. ։ൃ؀ڥͷ Docker ԽͰخ͍͜͠ͱ • OS΍ϓϥοτϑΥʔϜɺ؀ڥʹґଘ͢Δίʔυʹڧ͍ • ݴޠϥϯλΠϜҎ֎ʹඞཁͳύοέʔδͷ؀ڥߏங͕༰қ • ໘౗ͳखॱॻͳͲΛඞཁͱͤͣىಈ͢Δ͚ͩͰ։ൃ͕Ͱ͖Δ
25. ຊ౰ʁ
26. ։ൃ؀ڥͷ Docker ԽͰخ͍͜͠ͱ • OS΍ϓϥοτϑΥʔϜɺ؀ڥʹґଘ͢Δίʔυʹڧ͍ • Nuxt.js ʹ Native Extension ೖΕͳ͘ͳ͍ʁ(node-gyp / node-sass Ҏ֎) • ݴޠϥϯλΠϜҎ֎ʹඞཁͳύοέʔδͷ؀ڥߏங͕༰қ • Nuxt.js ʹ Native Extension ೖΕͳ͘ͳ͍ʁ • ໘౗ͳखॱॻͳͲΛඞཁͱͤͣىಈ͢Δ͚ͩͰ։ൃ͕Ͱ͖Δ • yarn && yarn dev Ҏ্ʹͳʹ͔ඞཁͳ͜ͱ͸ك
27. ରͯ͠خ͘͠ͳ͍͜ͱ
28. ։ൃ؀ڥͷ Docker ԽͰخ͘͠ͳ͍͜ͱ • લड़ͷΑ͏ͳϏϧυ؀ڥ΁ͷ౤ࢿ͕ඞཁ • ৗʹτϥϯεύΠϧ͕ඞཁͳ SPA ͷ؀ڥͰ͸ϑΝΠϧ I/O ͕ॏ͍ • ຊ൪؀ڥͷӡ༻͚ͩʹ໨Λ޲͚ΒΕΔͷͰྑ͍
29. ·ͱΊ
30. ·ͱΊ • Nuxt.js Ͱͷ Docker ؀ڥڞ༗͸ multi stage build ͕خ͍͠ • ϑϩϯτΤϯυ͸ͦΕͧΕͷ؀ڥͰ΍Δ͜ͱ͕ҧ͏ • multi stage build ͳΒҰͭͷϑΝΠϧͰ͏·͘෼͚ΒΕΔ • ຊདྷͷ༻్Ͱ͋ΔϑΝΠϧαΠζ࡟ݮతʹ΋΢ϨγΠ • Ͱ΋ͿͬͪΌ͚։ൃ؀ڥ͸ Docker Խ͠ͳͯ͘Α͘Ͷʁ • ͳʹΑΓτϥϯεύΠϧͷϑΝΠϧ I/O ෛՙ͕ͭΒ͍͠……