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
JavaScript + Dockerの知見 / knowledge-of-docker-in...
Search
odanado
PRO
April 04, 2019
Programming
9
54k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
Meguro.es # 20 @ Drecom
odanado
PRO
April 04, 2019
Tweet
Share
More Decks by odanado
See All by odanado
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
3
4.2k
@nestjs/bull の活用について
odanado
PRO
0
1.4k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.2k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
2k
nuxtjs-axios-error-handling
odanado
PRO
0
350
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
410
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
230
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
500
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.3k
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
860
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Is Xcode slowly dying out in 2025?
uetyo
1
280
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
850
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.6k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
180
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Fireside Chat
paigeccino
37
3.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Automating Front-end Workflow
addyosmani
1370
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Side Projects
sachag
455
42k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Transcript
JavaScript + Dockerの知見 Meguro.es # 20 @ Drecom @odan3240 1
自己紹介 • Twitter: @odan3240 • エンジニア ◦ フロントエンド ◦ AWS
◦ ブロックチェーン • 会社: モバイルファクトリー ◦ チーム: ブロックチェーンチーム ◦ お仕事 ▪ サービスサイト: https://uniqys.net/ja ▪ ブロックチェーンアプリ検索サイト: https://findapps.me/ ▪ ブロックチェーンアプリ開発ツールキット: uniqys/UniqysKit 2
今日話すこと • チームの開発言語は基本的にJavaScript ◦ フロントエンド ▪ vue.js ▪ nuxt.js (StaticSite,
SSR) ▪ JavaScript (TypeScript) ◦ バックエンド ▪ nodejs (ts-node) • 開発環境や本番環境にDockerを使用 ◦ フロントもバックエンドも両方共Dockerの上 ◦ 開発環境はdocker for mac • 入社して約1年やってきた JavaScript + Dockerに関する知見を共有 ◦ 主に開発環境の話 3
Dockerとは • Docker ◦ コンテナ型仮想化を行うツール ◦ 環境の可搬性が高い • Dockerfile ◦
コンテナのbuildの手順を記したファイル • docker-compose ◦ 複数のコンテナを管理するツール 4
なぜDocker? • 開発環境が一発で構築できて楽 ◦ デザイナにvueファイルを書いてほしい時にシュッと構築 • docker-compose up すれば一発で開発環境が立ち上がる •
同じコンテナイメージを使えば 本番環境とステージング環境を一致させることができる 5
コンテナのnode_modulesを守る • 開発時はvolumesオプションでホストの ディレクトリをコンテナにマウントすることが多い ◦ ホストでコードを編集すると 即座にコンテナに反映されるためホットリロードが効く • マウントするとコンテナ内の node_modules
を ホストのそれで上書きしてしまう ◦ git clone直後のホストにはnode_modulesが存在しないためコンテ ナ内部のnode_modulesが無になる • docker-compose.ymlに以下のように書くと上書きされない 6
ホストのnode_modulesの用意 • ホストにnode_modules内の情報がないと VSCodeでコード補完ができない ◦ JetBrainsのWebStormならDockerコンテナ内の node_modulesの情報でコード補完が可能らしい • DX向上のためにホストにnode_modulesを用意したい ◦
docker cpでコンテナのnode_modulesをコピーする ▪ node-gypなどでバイナリに依存している場合に不安 ◦ ホストにnode.jsを用意してyarn installする ▪ 「Dockerさえあれば開発環境が手に入る」にはならない ◦ コンテナにlanguage serverを立てる ▪ 要検証 • 自分の中でベストプラクティスが出てない ◦ 懇親会で議論できる方がいれば :pray: 7
docker for macのI/Oが遅い • webpackによりファイルのI/Oが大量に発生する 現代のフロントエンドではつらい ◦ 例: nuxt-create-appコマンドで作成した 初期状態のプロジェクトでのnuxt
buildの実行時間 ▪ コンテナ: 34.6 sec ▪ ホスト: 12.3 sec • 色々な緩和策がある ◦ cachedフラグ ▪ 23.9 secに短縮 ◦ etc • どうしてもつらかったらフロントエンドの 開発環境でDockerをやめるのはあり 8
node.jsはPID 1を想定していない問題 • デフォルトではnode.jsのプロセスはPID 1で実行されるが node.jsはPID 1で実行されるように設計されていない ◦ ref: nodejs/docker-nodeのBestPractices.md
• krallin/tini を使う ◦ 軽量なinit ◦ Dockerfileに書いて入れる ◦ Docker 1.13 以降 かつ docker-compose 3.7以降なら デフォルトでサポート 9
.dockerignoreを用意する • Dockerはコンテナのbuild時に ディレクトリ中身をDockerデーモンに転送する ◦ ディレクトリ中身のサイズが大きいと buildが始まるまでに時間がかかる ◦ .dockerignoreファイルで無視するファイルを設定できる •
サイズが大きくなりがちでbuildに不要なnode_modulesを .dockerignoreに書いておいた方が良い 10
まとめ • 主に開発環境でのJavaScript + Dockerの 知見について紹介した • コンテナのnode_modulesを守る • コード補完のためにホストのnode_modulesの用意
• docker for macのI/Oが遅い • node.jsはPID 1を想定していない問題 • .dockerignoreを用意する • 懇親会でJavaScriptの開発環境についてお話しましょう! ◦ 最近開発環境にはDocker不要じゃね?ってなってる人なので誰かと 話したい 11