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
August 26, 2019
Programming
9
2.3k
Docker multi stage build on Nuxt.js Application #nuxtmeetup
2019/8/26に行われたNuxtMeetUpでの登壇資料です。
LINE Developers
August 26, 2019
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
LINEスタンプのSREing事例集:大きなスパイクアクセスを捌くためのSREing
line_developers
1
2.3k
Java 21 Overview
line_developers
6
1.2k
Code Review Challenge: An example of a solution
line_developers
1
1.3k
KARTEのAPIサーバ化
line_developers
1
540
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.2k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2.1k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.5k
A/B Testing at LINE NEWS
line_developers
3
980
LINEのサポートバージョンの考え方
line_developers
2
1.3k
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
860
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
930
PicoRuby on Rails
makicamel
2
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
440
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
0
130
Hack Claude Code with Claude Code
choplin
5
2.3k
型で語るカタ
irof
0
200
VS Code Update for GitHub Copilot
74th
2
660
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
740
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Making Projects Easy
brettharned
116
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
For a Future-Friendly Web
brad_frost
179
9.8k
Docker and Python
trallard
44
3.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing for humans not robots
tammielis
253
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Music & Morning Musume
bryan
46
6.6k
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 ෛՙ͕ͭΒ͍͠……