Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Meguro.es # 20 @ Drecom

odanado
PRO

April 04, 2019
Tweet

More Decks by odanado

Other Decks in Programming

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