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