参考にさせていただいた記事

・Rails & Webpackerを最大限活用するために知っておくべきことまとめ
・Webpacker使うなら最低限これだけは知っておいてほしいこと

Console上で、「net::ERR_EMPTY_RESPONSE」が繰り返される

Rails＋Vue＋Docker＋WebpackでWEBアプリを開発中、タイトルの通り以下のエラーに遭遇しました。

エラー解決までにかなり時間が掛かってしまいましたが、原因は単純で、docker-compose.ymlファイルで、ポート設定とWEBPACKER_DEV_SERVER_HOSTの設定が無かった為でした。

以下が、エラーを解決したコードになります。

docker-compose.yml

version: '3'
services:
  web:
    build: .
    command: bundle exec foreman start -f Procfile
    volumes:
      - .:/app
    ports:
      - 3000:3000
      - 8080:8080 # 追加したコード
    depends_on:
      - db
    tty: true
    stdin_open: true
    environment:
      - WEBPACKER_DEV_SERVER_HOST=web #追加したコード
  db:
    image: mysql:5.6
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  db-volume:

調べてみたところ「WEBPACKER_DEV_SERVER_HOST」を設定することで、Rails側でWebpackerが起動していることを検知して、接続できるようになるそうです。