Rails5.1@webpackerをリモートホストのDocker環境で使うときのメモ

この方法はobsoleteかな？↓の方法でどうぞ
Rails5.1@webpackerのDocker環境で使うときのメモ 2017/11/11 - Qiita

はじめに

• javascript_pack_tagはmanifest.jsonをパースしている
• 別ホスト上のDockerだと,webpack-dev-serverが認識するアドレスとブラウザから見た時のアドレスが異なるのでmanifest.jsonに記載されているアドレスがブラウザから見て正しくないとget出来ない
• webpack-dev-serverにhost(ListenするIP)とpublicPath(ブラウザから見た時のホスト名)を教えれば良い
• dev-serverがブラウザリクエストのHost名をチェックしているので、それを無効化する

関連

• Vagrant+webpack-dev-serverでプライベートIPに接続できない時の対処
  • localhostで実行するときはこの方法でOK
• --host 0.0.0.0 Not working · Issue #882
  • fix: disableHostCheck should be defaulted to true by nick-woodward · Pull Request #890
  • disableHostCheck: trueがデフォルトになるプルリクエストでてた

変更点

config/webpack/development.server.yml

default: &default
  enabled: true
  host: localhost
  port: 3080              # 今回はこのportにした
development:
  <<: *default
  host: dev0.devopt.local # development環境だけで良いので変更

config/webpack/development.server.js

module.exports = merge(devConfig, {
  devServer: {
//    host: devServer.host, // <- 
    host: "0.0.0.0",        // <- 書き換え
    port: devServer.port,
    compress: true,
    historyApiFallback: true,
    contentBase: resolve(paths.output, paths.entry),
    disableHostCheck: true, // <- 追加
    publicPath
  }
})

出力

BEFORE

$ bin/webpack-dev-server
 10% building modules 2/2 modules 0 active
Project is running at http://localhost:3080/
webpack output is served from http://localhost:3080/packs/

AFTER

$ bin/webpack-dev-server
 10% building modules 2/2 modules 0 active
Project is running at http://0.0.0.0:3080/ 待ち受けアドレス
webpack output is served from http://dev0.devopt.local:3080/packs/ ブラウザからアクセスするURL