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
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
技術同人誌をMCP Serverにしてみた
74th
1
650
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
5つのアンチパターンから学ぶLT設計
narihara
1
170
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Embracing the Ebb and Flow
colly
86
4.7k
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Producing Creativity
orderedlist
PRO
346
40k
Why Our Code Smells
bkeepers
PRO
336
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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