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
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
1.2k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
950
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.9k
nuxtjs-axios-error-handling
odanado
PRO
0
280
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
330
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
190
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
430
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.1k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
PRO
1
6.4k
Other Decks in Programming
See All in Programming
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
XStateでReactに秩序を与えたい
gizm000
0
730
Rubyのobject_id
qnighy
6
1.3k
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
590
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
380
Patched fetch did not work
quramy
4
390
API Platform for Laravel
dunglas
1
430
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Building Applications with DynamoDB
mza
90
6k
Teambox: Starting and Learning
jrom
131
8.7k
What's in a price? How to price your products and services
michaelherold
242
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
For a Future-Friendly Web
brad_frost
174
9.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
4 Signs Your Business is Dying
shpigford
179
21k
Clear Off the Table
cherdarchuk
91
320k
Ruby is Unlike a Banana
tanoku
96
11k
What's new in Ruby 2.0
geeforr
340
31k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
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