Docker multi stage build on Nuxt.js Application #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 ෛՙ͕ͭΒ͍͠……