JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript

Meguro.es # 20 @ Drecom

Transcript

1. JavaScript + Dockerの知見
   Meguro.es # 20 @ Drecom
   @odan3240
   1
   

   View Slide

2. 自己紹介
   ● Twitter: @odan3240
   ● エンジニア
   ○ フロントエンド
   ○ AWS
   ○ ブロックチェーン
   ● 会社: モバイルファクトリー
   ○ チーム: ブロックチェーンチーム
   ○ お仕事
   ■ サービスサイト: https://uniqys.net/ja
   ■ ブロックチェーンアプリ検索サイト: https://findapps.me/
   ■ ブロックチェーンアプリ開発ツールキット: uniqys/UniqysKit
   2
   

   View Slide

3. 今日話すこと
   ● チームの開発言語は基本的にJavaScript
   ○ フロントエンド
   ■ vue.js
   ■ nuxt.js (StaticSite, SSR)
   ■ JavaScript (TypeScript)
   ○ バックエンド
   ■ nodejs (ts-node)
   ● 開発環境や本番環境にDockerを使用
   ○ フロントもバックエンドも両方共Dockerの上
   ○ 開発環境はdocker for mac
   ● 入社して約1年やってきた
   JavaScript + Dockerに関する知見を共有
   ○ 主に開発環境の話 3
   

   View Slide

4. Dockerとは
   ● Docker
   ○ コンテナ型仮想化を行うツール
   ○ 環境の可搬性が高い
   ● Dockerfile
   ○ コンテナのbuildの手順を記したファイル
   ● docker-compose
   ○ 複数のコンテナを管理するツール
   4
   

   View Slide

5. なぜDocker？
   ● 開発環境が一発で構築できて楽
   ○ デザイナにvueファイルを書いてほしい時にシュッと構築
   ● docker-compose up すれば一発で開発環境が立ち上がる
   ● 同じコンテナイメージを使えば
   本番環境とステージング環境を一致させることができる
   5
   

   View Slide

6. コンテナのnode_modulesを守る
   ● 開発時はvolumesオプションでホストの
   ディレクトリをコンテナにマウントすることが多い
   ○ ホストでコードを編集すると
   即座にコンテナに反映されるためホットリロードが効く
   ● マウントするとコンテナ内の node_modules を
   ホストのそれで上書きしてしまう
   ○ git clone直後のホストにはnode_modulesが存在しないためコンテ
   ナ内部のnode_modulesが無になる
   ● docker-compose.ymlに以下のように書くと上書きされない
   6
   

   View Slide

7. ホストの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
   

   View Slide

8. 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
   

   View Slide

9. 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
   

   View Slide

10. .dockerignoreを用意する
    ● Dockerはコンテナのbuild時に
    ディレクトリ中身をDockerデーモンに転送する
    ○ ディレクトリ中身のサイズが大きいと
    buildが始まるまでに時間がかかる
    ○ .dockerignoreファイルで無視するファイルを設定できる
    ● サイズが大きくなりがちでbuildに不要なnode_modulesを
    .dockerignoreに書いておいた方が良い
    10
    

    View Slide

11. まとめ
    ● 主に開発環境でのJavaScript + Dockerの
    知見について紹介した
    ● コンテナのnode_modulesを守る
    ● コード補完のためにホストのnode_modulesの用意
    ● docker for macのI/Oが遅い
    ● node.jsはPID 1を想定していない問題
    ● .dockerignoreを用意する
    ● 懇親会でJavaScriptの開発環境についてお話しましょう！
    ○ 最近開発環境にはDocker不要じゃね？ってなってる人なので誰かと
    話したい
    11
    

    View Slide