Webpacker 3のプロジェクトをDocker Composeで構築した時の記録など

1. Webpacker 3 on Docker
2017.09.11 Gotanda.rb
by @__syumai

2. Profile
名前: しゅーまい
Twitter: @__syumai (アンダーバー二個です)
所属: Ducklings inc.
3年前くらいからVRやってる会社です
やってる事: Webまわりの開発(Rails, Vue.js, たまにThree.js など)

3. HUG WEDDING
結婚式の360°VR動画撮影サービス
今年春から本格的に展開開始
サンプル

4. 本題

5. Webpacker 3 on Docker

6. 目次
導入編
1. 目的
2. なぜDockerを使うのか？
3. Webpacker導入時の課題
実践編
4. Railsプロジェクトを作成、Webpacker 3を導入
5. Docker周りを整備する
6. Webpackerのインストール
7. yarn.lockが更新されるようにする
8. webpack‑dev‑serverを使えるようにする
総括
9. まとめ

7. 導入編
1. 目的
2. なぜDockerを使うのか？
3. Webpacker導入時の課題

8. 目的
Docker上でWebpacker 3での開発を滞りなく行えるようにする
※...docker‑composeを使います

9. サンプル
こちらにあります

10. なぜDockerを使うのか？
開発環境の構築が楽
新規メンバーのやる作業が docker-compose build だけ
本番と環境が揃う
デプロイ時の安心感が大きい

11. Webpacker導入時の課題
1. 新規packageの追加時にyarn.lockが更新されない
2. webpack‑dev‑serverが扱いづらい

12. Webpacker導入時の課題
新規packageの追加時にyarn.lockが更新されない
docker-compose run hoge --entrypoint='yarn add
huga' とやっても、元のイメージは更新されない
結局イメージのリビルドが必要なので、直接package.jsonに書き足
す
docker-compose build 中の実行内容は、外部に露出しない
(yarn.lockが書き出されない)

13. Webpacker導入時の課題
webpack‑dev‑serverが扱いづらい
インストールしたnpmパッケージはDockerイメージ内にあるの
で、そこから起動しないといけない
docker‑composeの起動コマンドに含むと、webpack‑dev‑server
単体での再起動が出来なくなる
Rails側・ブラウザ側からバンドル後のJSが見える必要がある(ここ
がややこしい)

14. 実践編
4. Railsプロジェクトを作成、Webpacker 3を導入
5. Docker周りを整備する
6. Webpackerのインストール
7. yarn.lockが更新されるようにする
8. webpack‑dev‑serverを使えるようにする

15. Railsプロジェクトを作成、Webpacker 3を導入

16. rails new
# Dockerを使うので、bundle installをスキップ
rails new webpacker-sample --skip-bundle
GemfileにWebpackerを追加
gem 'webpacker', '~> 3'

17. 注意
公式リポジトリに記載の方法を使うと、GemfileにWebpackerのバ
ージョンが明記されない
こちらで入れた場合は、どのバージョンが落ちてくるかわからない
ので注意(今やったら、最新の3.0.1が落ちてきました)
rails new webpacker-sample --webpack

18. Docker周りを整備する

19. 設定ファイル
docker‑compose.yml
Dockerfile
こちらにあります

20. 起動を確認する
docker-compose build
docker-compose up

21. webpackerのインストール
docker‑composeコマンドを通して実行
servicesで名前をrailsに、entrypointをrailsにしているので普段の
感じでRailsコマンドが使えます
docker-compose run --rm rails webpacker:install
# お好みのものがあれば
docker-compose run --rm rails webpacker:install:react
docker-compose run --rm rails webpacker:install:vue

22. yarn.lockが更新されるようにする

23. Dockerイメージビルド時にnpmパッケージのインストールを行う
COPY package.json yarn.lock $APP_HOME
RUN yarn install
これだけだと、生成されたyarn.lockがイメージ内に閉じ込められる
Dockerfileの書き方によっては、既存のlockファイルで上書きされ
てしまうこともある
ビルドのたびにパッケージのバージョンが変わる可能性がある…。

24. 生成されたlockファイルを退避する
RUN cp *.lock /tmp
COPY . $APP_HOME
RUN cp /tmp/*.lock .

25. 退避したlockファイルを読み出す
buildスクリプトを別で作る
ビルド後のイメージからlockファイルを取り出します
ついでにGemfile.lockも吐き出すようにしました
参考サイト=> Using Yarn with Docker ‑ Hacker Noon
#!/bin/sh
if docker-compose build; then
docker run --rm --entrypoint cat webpackerdockerexample_rails
if ! diff -q yarn.lock /tmp/yarn.lock > /dev/null 2>&1;
echo "We have a new yarn.lock"
cp /tmp/yarn.lock yarn.lock
fi
docker run --rm --entrypoint cat webpackerdockerexample_rails
if ! diff -q Gemfile.lock /tmp/Gemfile.lock > /dev/null 2>&1
echo "We have a new Gemfile.lock"
cp /tmp/Gemfile.lock Gemfile.lock
fi
fi

26. yarn.lockが更新されるようにする
解決！

27. その他の対応策
volumeをマウントした状態で、実行中のコンテナに入って普通に
yarn addすれば、新しくなったpackage.jsonとyarn.lock出てくる
よね、と指摘を受けました。確かに…。
イメージ内にパッケージを含めたい場合は、いずれにせよビルドの
必要があるので、状況に合わせて使い分けると良さそう
(インストール無しでyarn add出来たら幸せ…。方法あるかな？)

28. webpack‑dev‑serverを使えるようにする

29. Webpackerインストール後にRailsを起動すると…
めっちゃエラーが出る
webpack‑dev‑serverの設定に起因しているので要修正
Puma caught this error: Cannot assign requested address
- connect(2) for [::1]:3035 (Errno::EADDRNOTAVAIL)
/usr/local/lib/ruby/2.4.0/socket.rb:1198:in `__connect_nonblock
/usr/local/lib/ruby/2.4.0/socket.rb:1198:in `connect_nonblock'
/usr/local/lib/ruby/2.4.0/socket.rb:56:in `connect_internal
/usr/local/lib/ruby/2.4.0/socket.rb:137:in `connect'
/usr/local/lib/ruby/2.4.0/socket.rb:627:in `block in tcp'
/usr/local/lib/ruby/2.4.0/socket.rb:227:in `each'
/usr/local/lib/ruby/2.4.0/socket.rb:227:in `foreach'
/usr/local/lib/ruby/2.4.0/socket.rb:617:in `tcp'
/usr/local/bundle/gems/webpacker-3.0.1/lib/webpacker/dev_server
/usr/local/bundle/gems/webpacker-3.0.1/lib/webpacker/dev_server

30. dev‑server立ち上げの方針
大きく分けて2つ
1. Railsの立ち上げと一緒に動かす
Railsコンテナのentrypointに含める
または、webpack‑dev‑server用のコンテナを立ち上げる
2. Railsと別で立ち上げられるようにする（今回はこっち）
docker‑composeを通して起動できるようなスクリプトを書く

31. Railsと別で立ち上げられるようにする

32. やる事
Railsコンテナにwebpack‑dev‑server用のポート(3035)を開ける
設定ファイルからホストをlocalhostに書き換える(Railsから見える
ようになります)
これをやらないと、Webpacker 3で入っ
たWebpacker::DevServerProxyに引っかかる
起動コマンドに --listen-host 0.0.0.0 オプションを付ける(コ
ンテナ外から見えるようになります)
内容は、リポジトリ直下の webpack-dev-server スクリプト
を参照ください
(Railsコンテナのentrypointに含めてしまえば、上記の作業は不要です)

33. 結果
こちらにあります

34. まとめ
運用始まったら便利だし、楽
激しく仕様が変わるので、バージョンアップはつらい…。