Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webpacker 3 on Docker
2017.09.11 Gotanda.rb
by  @__syumai 
Profile
名前: しゅーまい
Twitter: @__syumai (アンダーバー二個です)
所属: Ducklings inc.
3年前くらいからVRやってる会社です
やってる事: Webまわりの開発(Rails, Vue.js, たま...
HUG WEDDING
結婚式の360°VR動画撮影サービス
今年春から本格的に展開開始
サンプル
本題
Webpacker 3 on Docker
目次
導入編
1. 目的
2. なぜDockerを使うのか?
3. Webpacker導入時の課題
実践編
4. Railsプロジェクトを作成、Webpacker 3を導入
5. Docker周りを整備する
6. Webpackerのインストー...
導入編
1. 目的
2. なぜDockerを使うのか?
3. Webpacker導入時の課題
目的
Docker上でWebpacker 3での開発を滞りなく行えるようにする
※...docker‑composeを使います
サンプル
こちらにあります
なぜDockerを使うのか?
開発環境の構築が楽
新規メンバーのやる作業が docker-compose build だけ
本番と環境が揃う
デプロイ時の安心感が大きい
Webpacker導入時の課題
1. 新規packageの追加時にyarn.lockが更新されない
2. webpack‑dev‑serverが扱いづらい
Webpacker導入時の課題
新規packageの追加時にyarn.lockが更新されない
 docker-compose run hoge --entrypoint='yarn add
huga' とやっても、元のイメージは更新されない
結...
Webpacker導入時の課題
webpack‑dev‑serverが扱いづらい
インストールしたnpmパッケージはDockerイメージ内にあるの
で、そこから起動しないといけない
docker‑composeの起動コマンドに含むと、webpa...
実践編
4. Railsプロジェクトを作成、Webpacker 3を導入
5. Docker周りを整備する
6. Webpackerのインストール
7. yarn.lockが更新されるようにする
8. webpack‑dev‑serverを使え...
Railsプロジェクトを作成、Webpacker 3を導入
rails new
# Dockerを使うので、bundle installをスキップ
rails new webpacker-sample --skip-bundle
GemfileにWebpackerを追加
gem 'webpacker',...
注意
公式リポジトリに記載の方法を使うと、GemfileにWebpackerのバ
ージョンが明記されない
こちらで入れた場合は、どのバージョンが落ちてくるかわからない
ので注意(今やったら、最新の3.0.1が落ちてきました)
rails new...
Docker周りを整備する
設定ファイル
docker‑compose.yml
Dockerfile
こちらにあります
起動を確認する
docker-compose build
docker-compose up
webpackerのインストール
docker‑composeコマンドを通して実行
servicesで名前をrailsに、entrypointをrailsにしているので普段の
感じでRailsコマンドが使えます
docker-compose r...
yarn.lockが更新されるようにする
Dockerイメージビルド時にnpmパッケージのインストールを行う
COPY package.json yarn.lock $APP_HOME
RUN yarn install
これだけだと、生成されたyarn.lockがイメージ内に閉じ込めら...
生成されたlockファイルを退避する
RUN cp *.lock /tmp
COPY . $APP_HOME
RUN cp /tmp/*.lock .
退避したlockファイルを読み出す
buildスクリプトを別で作る
ビルド後のイメージからlockファイルを取り出します
ついでにGemfile.lockも吐き出すようにしました
参考サイト=> Using Yarn with Docker ‑...
yarn.lockが更新されるようにする
解決!
その他の対応策
volumeをマウントした状態で、実行中のコンテナに入って普通に
yarn addすれば、新しくなったpackage.jsonとyarn.lock出てくる
よね、と指摘を受けました。確かに…。
イメージ内にパッケージを含めたい場...
webpack‑dev‑serverを使えるようにする
Webpackerインストール後にRailsを起動すると…
めっちゃエラーが出る
webpack‑dev‑serverの設定に起因しているので要修正
Puma caught this error: Cannot assign requested...
dev‑server立ち上げの方針
大きく分けて2つ
1. Railsの立ち上げと一緒に動かす
Railsコンテナのentrypointに含める
または、webpack‑dev‑server用のコンテナを立ち上げる
2. Railsと別で立ち上...
Railsと別で立ち上げられるようにする
やる事
Railsコンテナにwebpack‑dev‑server用のポート(3035)を開ける
設定ファイルからホストをlocalhostに書き換える(Railsから見える
ようになります)
これをやらないと、Webpacker 3で入っ
たW...
結果
こちらにあります
まとめ
運用始まったら便利だし、楽
激しく仕様が変わるので、バージョンアップはつらい…。
Upcoming SlideShare
Loading in …5
×

Webpacker 3 on Docker

638 views

Published on

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

Published in: Engineering
  • Be the first to comment

Webpacker 3 on Docker

  1. 1. Webpacker 3 on Docker 2017.09.11 Gotanda.rb by  @__syumai 
  2. 2. Profile 名前: しゅーまい Twitter: @__syumai (アンダーバー二個です) 所属: Ducklings inc. 3年前くらいからVRやってる会社です やってる事: Webまわりの開発(Rails, Vue.js, たまにThree.js など)
  3. 3. HUG WEDDING 結婚式の360°VR動画撮影サービス 今年春から本格的に展開開始 サンプル
  4. 4. 本題
  5. 5. Webpacker 3 on Docker
  6. 6. 目次 導入編 1. 目的 2. なぜDockerを使うのか? 3. Webpacker導入時の課題 実践編 4. Railsプロジェクトを作成、Webpacker 3を導入 5. Docker周りを整備する 6. Webpackerのインストール 7. yarn.lockが更新されるようにする 8. webpack‑dev‑serverを使えるようにする 総括 9. まとめ
  7. 7. 導入編 1. 目的 2. なぜDockerを使うのか? 3. Webpacker導入時の課題
  8. 8. 目的 Docker上でWebpacker 3での開発を滞りなく行えるようにする ※...docker‑composeを使います
  9. 9. サンプル こちらにあります
  10. 10. なぜDockerを使うのか? 開発環境の構築が楽 新規メンバーのやる作業が docker-compose build だけ 本番と環境が揃う デプロイ時の安心感が大きい
  11. 11. Webpacker導入時の課題 1. 新規packageの追加時にyarn.lockが更新されない 2. webpack‑dev‑serverが扱いづらい
  12. 12. Webpacker導入時の課題 新規packageの追加時にyarn.lockが更新されない  docker-compose run hoge --entrypoint='yarn add huga' とやっても、元のイメージは更新されない 結局イメージのリビルドが必要なので、直接package.jsonに書き足 す  docker-compose build 中の実行内容は、外部に露出しない (yarn.lockが書き出されない)
  13. 13. Webpacker導入時の課題 webpack‑dev‑serverが扱いづらい インストールしたnpmパッケージはDockerイメージ内にあるの で、そこから起動しないといけない docker‑composeの起動コマンドに含むと、webpack‑dev‑server 単体での再起動が出来なくなる Rails側・ブラウザ側からバンドル後のJSが見える必要がある(ここ がややこしい)
  14. 14. 実践編 4. Railsプロジェクトを作成、Webpacker 3を導入 5. Docker周りを整備する 6. Webpackerのインストール 7. yarn.lockが更新されるようにする 8. webpack‑dev‑serverを使えるようにする
  15. 15. Railsプロジェクトを作成、Webpacker 3を導入
  16. 16. rails new # Dockerを使うので、bundle installをスキップ rails new webpacker-sample --skip-bundle GemfileにWebpackerを追加 gem 'webpacker', '~> 3'
  17. 17. 注意 公式リポジトリに記載の方法を使うと、GemfileにWebpackerのバ ージョンが明記されない こちらで入れた場合は、どのバージョンが落ちてくるかわからない ので注意(今やったら、最新の3.0.1が落ちてきました) rails new webpacker-sample --webpack
  18. 18. Docker周りを整備する
  19. 19. 設定ファイル docker‑compose.yml Dockerfile こちらにあります
  20. 20. 起動を確認する docker-compose build docker-compose up
  21. 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. 22. yarn.lockが更新されるようにする
  23. 23. Dockerイメージビルド時にnpmパッケージのインストールを行う COPY package.json yarn.lock $APP_HOME RUN yarn install これだけだと、生成されたyarn.lockがイメージ内に閉じ込められる Dockerfileの書き方によっては、既存のlockファイルで上書きされ てしまうこともある ビルドのたびにパッケージのバージョンが変わる可能性がある…。
  24. 24. 生成されたlockファイルを退避する RUN cp *.lock /tmp COPY . $APP_HOME RUN cp /tmp/*.lock .
  25. 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. 26. yarn.lockが更新されるようにする 解決!
  27. 27. その他の対応策 volumeをマウントした状態で、実行中のコンテナに入って普通に yarn addすれば、新しくなったpackage.jsonとyarn.lock出てくる よね、と指摘を受けました。確かに…。 イメージ内にパッケージを含めたい場合は、いずれにせよビルドの 必要があるので、状況に合わせて使い分けると良さそう (インストール無しでyarn add出来たら幸せ…。方法あるかな?)
  28. 28. webpack‑dev‑serverを使えるようにする
  29. 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. 30. dev‑server立ち上げの方針 大きく分けて2つ 1. Railsの立ち上げと一緒に動かす Railsコンテナのentrypointに含める または、webpack‑dev‑server用のコンテナを立ち上げる 2. Railsと別で立ち上げられるようにする(今回はこっち) docker‑composeを通して起動できるようなスクリプトを書く
  31. 31. Railsと別で立ち上げられるようにする
  32. 32. やる事 Railsコンテナにwebpack‑dev‑server用のポート(3035)を開ける 設定ファイルからホストをlocalhostに書き換える(Railsから見える ようになります) これをやらないと、Webpacker 3で入っ たWebpacker::DevServerProxyに引っかかる 起動コマンドに --listen-host 0.0.0.0 オプションを付ける(コ ンテナ外から見えるようになります) 内容は、リポジトリ直下の webpack-dev-server スクリプト を参照ください (Railsコンテナのentrypointに含めてしまえば、上記の作業は不要です)
  33. 33. 結果 こちらにあります
  34. 34. まとめ 運用始まったら便利だし、楽 激しく仕様が変わるので、バージョンアップはつらい…。

×