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
530
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.1k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2.1k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.5k
A/B Testing at LINE NEWS
line_developers
3
970
LINEのサポートバージョンの考え方
line_developers
2
1.3k
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
460
VS Code Update for GitHub Copilot
74th
1
340
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
930
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
GoのGenericsによるslice操作との付き合い方
syumai
3
680
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Team operations that are not burdened by SRE
kazatohiei
1
200
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
5つのアンチパターンから学ぶLT設計
narihara
1
110
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
850
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Become a Pro
speakerdeck
PRO
28
5.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Visualization
eitanlees
146
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Side Projects
sachag
455
42k
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 ෛՙ͕ͭΒ͍͠……