こんにちは。エンジニアの安達 (@dachi_023) です。会社用アカウントとして @ry0_adachi を用意していましたが全然呟かなくなっちゃったので辞めました。複数アカウントの運用って面倒ですね...。はい、コネヒト Advent Calendar 2018 の20日目はDockerとJSです。
まえがき
DockerfileにJS (とかCSSとかHTMLとか) のビルド処理を書いてコンテナ立ち上げてブラウザで見えるところまでの話です。
本記事では最低限これができていればそんなに遅くならないよねってものをいくつか書いています。コードは GitHub に上がってますのでそちらを見ていただいてもOKです。このコードは create-react-app で生成したものをビルドしてコンテナ上のNginxで公開するという簡単なものですが、実際にママリのProduction環境に投入したものもJSに限って見てみればやってることはほとんど一緒になったので、この手の問題はあんまり難しく考えないほうがいいんだろうな、というのが現状の結論です。
今回はやってませんがSSRする場合は他にも考慮すべき点がありそうなのでもうちょい複雑かもなと思ってます。
Dockerfileを書くときに気にしてること
めちゃくちゃ普通なんですけど一応書いておきます。
- キャッシュをなるべく使えるようにする
- イメージのサイズを小さくする
JS起因でDockerのビルドが遅いのはだいたいインストールとビルドのせいなのでキャッシュが効くべき時に効くのが大事そうです。あとはイメージサイズを小さくするためにどのイメージを使うかとか、ビルドの過程で使ったツールなどをイメージに含まないかとか、そういうのを意識してます。
たとえば
上記は GitHub に上げたDockerファイルですがこの12行だけでも気にしてることを満たせているはずです。
yarn [install]でキャッシュを効かせたいので実行前にCOPYしてくるのはpackage.jsonとyarn.lockだけにして、ビルド時に使うものはその後にCOPYしてくる- multi-stage build を使うことでnode_modulesやビルド前のファイルなどを最終イメージに残さない
実際にdocker buildした結果はこんな感じです。
キャッシュ無
$ time docker build -t dachi023/docker-create-react-app:test . real 1m5.287s user 0m0.375s sys 0m0.249s
フルキャッシュ
real 0m2.172s user 0m0.165s sys 0m0.116s
一部キャッシュ (JSのコードを編集)
real 0m18.399s user 0m0.229s sys 0m0.147s
あとは $ docker run -itd --name docker-create-react-app -p 8080:80 dachi023/docker-create-react-app:test などとやると起動までちゃんとするのでサクッと何かを作りたい時などにご活用ください。
まとめ
キャッシュが効いててイメージが軽ければ開発時のストレス減りそうだね、というお話でした。アプリケーションが複雑になっても基本この2つがブレないようにしていればいいのではないかと思ってます。Dockerチューニングでやれることはまだあるかと思いますが、まずは効き目のある部分からやっていきましょう！
明日は nkuroda さんの引っ越し話です！技術が絡んでくるかもしれないし絡まないかもしれません、ご期待ください！ 👋
