Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Docker multi stage build on Nuxt.js Application...

Docker multi stage build on Nuxt.js Application #nuxtmeetup

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

LINE Developers

August 26, 2019
Tweet

More Decks by LINE Developers

Other Decks in Programming

Transcript

  1. Profile • potato4d (Takuma HANATANI) • Senior Front-End Engineer at

    LINE Corp. • Nuxt.js Beginners Guide Author • Nuxt.js contributor (v2.4 new feature)
  2. What's Docker multi stage build • Docker 17.05(2೥લ) ͔Β௥Ճ͞Εͨػೳ •

    1ຕͷ Dockerfile ಺Ͱෳ਺ͷΠϝʔδΛੜ੒Ͱ͖Δ • ੜ੒ͨ͠ΠϝʔδؒͰͷσʔλڞ༗͕Ͱ͖Δ • ओʹϏϧυͱ࣮ߦΛ෼ׂ͢Δ͜ͱʹΑͬͯΠϝʔδαΠζΛ࡟ݮ͢ ΔͨΊʹར༻͞ΕΔ
  3. Docker multi stage build on Nuxt.js • ࣮͸ Nuxt.js ͷΑ͏ͳ։ൃɾຊ൪Ͱڍಈ͕େ͖͘ҧ͏΋ͷͰ΋ศར

    • ։ൃ؀ڥͰ͸։ൃ؀ڥ޲͚ͷϏϧυεςʔδͰ࡞ۀ • ຊ൪޲͚Ϗϧυ͸ઐ༻ͷϏϧυεςʔδʹด͡ࠐΊͯॲཧ • ຊ൪؀ڥ͸͞ΒʹผͷεςʔδͰॲཧ • ίʔυ͕෼཭Ͱ͖ͯخ͍͠ʂʂʂʂ
  4. 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 ΞοϓϩʔυͳͲ
  5. 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"]
  6. 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'
  7. 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 Λ͢΂࣮ͯߦ͢Δ
  8. 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
  9. ։ൃ؀ڥͷ Docker ԽͰخ͍͜͠ͱ • OS΍ϓϥοτϑΥʔϜɺ؀ڥʹґଘ͢Δίʔυʹڧ͍ • Nuxt.js ʹ Native Extension

    ೖΕͳ͘ͳ͍ʁ(node-gyp / node-sass Ҏ֎) • ݴޠϥϯλΠϜҎ֎ʹඞཁͳύοέʔδͷ؀ڥߏங͕༰қ • Nuxt.js ʹ Native Extension ೖΕͳ͘ͳ͍ʁ • ໘౗ͳखॱॻͳͲΛඞཁͱͤͣىಈ͢Δ͚ͩͰ։ൃ͕Ͱ͖Δ • yarn && yarn dev Ҏ্ʹͳʹ͔ඞཁͳ͜ͱ͸ك
  10. ·ͱΊ • Nuxt.js Ͱͷ Docker ؀ڥڞ༗͸ multi stage build ͕خ͍͠

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