Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Docker multi stage build on Nuxt.js Application...
Search
LINE Developers
PRO
August 26, 2019
Programming
9
2.2k
Docker multi stage build on Nuxt.js Application #nuxtmeetup
2019/8/26に行われたNuxtMeetUpでの登壇資料です。
LINE Developers
PRO
August 26, 2019
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
LINEスタンプのSREing事例集:大きなスパイクアクセスを捌くためのSREing
line_developers
PRO
1
1.9k
Java 21 Overview
line_developers
PRO
6
970
Code Review Challenge: An example of a solution
line_developers
PRO
1
1.1k
KARTEのAPIサーバ化
line_developers
PRO
1
420
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
PRO
5
2k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
PRO
3
1.9k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
PRO
9
2.9k
A/B Testing at LINE NEWS
line_developers
PRO
3
800
LINEのサポートバージョンの考え方
line_developers
PRO
2
1k
Other Decks in Programming
See All in Programming
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
920
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
280
CSC509 Lecture 03
javiergs
PRO
0
140
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
530
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
180
データサイエンスのフルサイクル開発を実現する機械学習パイプライン
xcnkx
2
500
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
230
Quarto Clean Theme
nicetak
0
220
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.2k
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
180
How to debug Xdebug... or any other weird bug in PHP
dunglas
1
840
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Why Our Code Smells
bkeepers
PRO
334
57k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
Become a Pro
speakerdeck
PRO
24
4.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Reviewing Like a Champion
maltzj
519
39k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Navigating Team Friction
lara
183
14k
Atom: Resistance is Futile
akmur
261
25k
Transcript
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 ෛՙ͕ͭΒ͍͠……