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 #nuxtmeetup
Search
LINE Developers
PRO
August 26, 2019
Programming
9
2.1k
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.5k
Java 21 Overview
line_developers
PRO
6
810
Code Review Challenge: An example of a solution
line_developers
PRO
1
840
KARTEのAPIサーバ化
line_developers
PRO
1
370
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
PRO
5
1.8k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
PRO
3
1.7k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
PRO
9
2.4k
A/B Testing at LINE NEWS
line_developers
PRO
2
630
LINEのサポートバージョンの考え方
line_developers
PRO
2
800
Other Decks in Programming
See All in Programming
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
110
Elm Form Validation
bkuhlmann
0
510
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
420
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
GitHub Copilotのススメ
marcy731
1
220
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
The Invisible Side of Design
smashingmag
294
49k
Docker and Python
trallard
35
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Web development in the modern age
philhawksworth
203
10k
YesSQL, Process and Tooling at Scale
rocio
165
13k
GitHub's CSS Performance
jonrohan
1025
450k
It's Worth the Effort
3n
180
27k
Embracing the Ebb and Flow
colly
80
4.2k
The Invisible Customer
myddelton
114
12k
Become a Pro
speakerdeck
PRO
13
4.6k
Building Adaptive Systems
keathley
32
1.9k
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 ෛՙ͕ͭΒ͍͠……