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.2k
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.1k
Java 21 Overview
line_developers
6
1.1k
Code Review Challenge: An example of a solution
line_developers
1
1.2k
KARTEのAPIサーバ化
line_developers
1
480
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.1k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.2k
A/B Testing at LINE NEWS
line_developers
3
910
LINEのサポートバージョンの考え方
line_developers
2
1.2k
Other Decks in Programming
See All in Programming
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
320
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
180
バッチを作らなきゃとなったときに考えること
irof
2
550
Jasprが凄い話
hyshu
0
180
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.2k
TCAを用いたAmebaのリアーキテクチャ
dazy
0
220
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
170
コードを読んで理解するko build
bells17
1
110
楽しく向き合う例外対応
okutsu
0
730
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
950
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
428
65k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Practical Orchestrator
shlominoach
186
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
BBQ
matthewcrist
87
9.5k
Documentation Writing (for coders)
carmenintech
68
4.6k
Embracing the Ebb and Flow
colly
84
4.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
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 ෛՙ͕ͭΒ͍͠……