既存のrailsアプリでvue.js導入の際に、hot reloadするようにするために、webpack-dev-serverを起動するように設定したい。

前提・実現したいこと

railsアプリでvue.js導入の際に、hot reloadするようにするために、webpack-dev-serverを起動するように設定したい。

dockerにて、既存のrailsアプリにvue.jsを導入しました。vue.jsの表示はうまくいったのですが、毎回compileが走るため開発に時間がかかりストレスです。
そこで、webpack-dev-serverを起動させるように設定することにしたのですが、以下のエラーでつまづいています。

発生している問題・エラーメッセージ

Attaching to db_1, web_1, webpacker_1
webpacker_1  | bundler: failed to load command: bin/webpack-dev-server (bin/webpack-dev-server)
webpacker_1  | SocketError: getaddrinfo: Name or service not known
webpacker_1  |   /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `initialize’
webpacker_1  |   /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `new’
webpacker_1  |   /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `detect_port!'
webpacker_1  |   /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:11:in `run’
webpacker_1  |   /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/runner.rb:six:in `run’
webpacker_1  |   bin/webpack-dev-server:17:in `block in <top (required)>'
webpacker_1  |   bin/webpack-dev-server:16:in `chdir’
webpacker_1  |   bin/webpack-dev-server:16:in `<top (required)>'
webpacker_1 exited with code 1

該当のソースコード

yml
1docker-composer.yml
2
3version: ‘3’
4services:
5  db:
6    image: postgres
7    volumes:
8      - ./tmp/db:/var/lib/postgresql/data
9    environment:  #この行がDocker公式に載ってない。
10      - POSTGRES_PASSWORD=password    #この行がDocker公式に載ってない。
11  webpacker:
12    build: .
13    command: bundle exec bin/webpack-dev-server
14    volumes:
15      - .:/app710
16    ports:
17      - “8080:8080”
18  web:
19    build: .
20    command: bash -c “rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b ‘0.0.0.0’”
21    tty: true
22    stdin_open: true
23    volumes:
24      - .:/app710
25    ports:
26      - “3000:3000”
27    depends_on:
28      - db
29      - webpacker

Dockerfile
1FROM ruby:2.6.5
2RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
3    && echo “deb https://dl.yarnpkg.com/debian/ stable main” | tee /etc/apt/sources.list.d/yarn.list
4RUN apt-get update -qq && apt-get install -y nodejs postgresql-client yarn
5RUN mkdir /myapp
6WORKDIR /myapp
7COPY Gemfile /myapp/Gemfile
8COPY Gemfile.lock /myapp/Gemfile.lock
9RUN bundle install
10COPY . /myapp
11
12# Add a script to be executed every time the container starts.
13COPY entrypoint.sh /usr/bin/
14RUN chmod +x /usr/bin/entrypoint.sh
15ENTRYPOINT [“entrypoint.sh”]
16EXPOSE 3000
17
18# Start the main process.
19CMD [“rails”, “server”, “-b”, “0.0.0.0”]
20

config/webpacker.yml
1  # Reference: https://webpack.js.org/configuration/dev-server/
2  dev_server:
3    https: false
4    host: webpack
5    port: 3035
6    public: localhost:3035
7    hmr: true