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-javascript
Search
odanado
PRO
April 04, 2019
Programming
9
53k
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
@nestjs/bull の活用について
odanado
PRO
0
1k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
830
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.8k
nuxtjs-axios-error-handling
odanado
PRO
0
260
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
290
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
170
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
410
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.1k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
PRO
1
6.1k
Other Decks in Programming
See All in Programming
新宿ダンジョンを可視化してみた
satoshi7190
2
250
Code Reviews
bkuhlmann
4
890
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
780
見た目から始める生産性向上
ikumatadokoro
7
840
Git Rebase
bkuhlmann
11
1.6k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
700
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
VS Code をプロダクトにどう取り込むか
onomax
1
360
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
60
3.9k
Faster Mobile Websites
deanohume
299
30k
Embracing the Ebb and Flow
colly
80
4.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Designing for Performance
lara
601
67k
Designing the Hi-DPI Web
ddemaree
276
33k
Unsuck your backbone
ammeep
663
57k
In The Pink: A Labor of Love
frogandcode
138
21k
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