Docker loaded incorrect port for webpacker_dev_server

Question

I'm learning to deploy rails 5 to docker. everything works fine until when i installed react webpacker. it seems to try to connect to wrong port and causing react malfunction.

I have tried updating config/webpacker.yml under development:dev_server:host = 0.0.0.0, but still not working

error log as below

web_1                 | #<SocketError: Failed to open TCP connection to webpack_dev_server:3035:80 (getaddrinfo: Name or service not known)>
web_1                 | /usr/local/lib/ruby/2.6.0/net/http.rb:949:in `rescue in block in connect'
web_1                 | /usr/local/lib/ruby/2.6.0/net/http.rb:946:in `block in connect'
web_1                 | /usr/local/lib/ruby/2.6.0/timeout.rb:93:in `block in timeout'
web_1                 | /usr/local/lib/ruby/2.6.0/timeout.rb:103:in `timeout'
web_1                 | /usr/local/lib/ruby/2.6.0/net/http.rb:945:in `connect'
web_1                 | /usr/local/lib/ruby/2.6.0/net/http.rb:930:in `do_start'
web_1                 | /usr/local/lib/ruby/2.6.0/net/http.rb:925:in `start'
web_1                 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:71:in `session'
web_1                 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:60:in `response'
web_1                 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:29:in `headers'
web_1                 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:120:in `perform_request'
web_1                 | /usr/local/bundle/gems/webpacker-3.6.0/lib/webpacker/dev_server_proxy.rb:20:in `perform_request'
web_1                 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:57:in `call'
web_1                 | /usr/local/bundle/gems/railties-5.2.4.3/lib/rails/engine.rb:524:in `call'
web_1                 | /usr/local/bundle/gems/puma-3.12.6/lib/puma/configuration.rb:227:in `call'
web_1                 | /usr/local/bundle/gems/puma-3.12.6/lib/puma/server.rb:706:in `handle_request'
web_1                 | /usr/local/bundle/gems/puma-3.12.6/lib/puma/server.rb:476:in `process_client'
web_1                 | /usr/local/bundle/gems/puma-3.12.6/lib/puma/server.rb:334:in `block in run'
web_1                 | /usr/local/bundle/gems/puma-3.12.6/lib/puma/thread_pool.rb:135:in `block in spawn_thread'

here's my docker-compose.yml content:

services:

  web:
    build: .
    ports:
      - 3000:3000
    volumes:
      - .:/usr/src/app
    env_file:
      - .env/development/database
      - .env/development/web
    environment:
      - WEBPACKER_DEV_SERVER_HOST=webpack_dev_server

  webpack_dev_server:
    build: .
    command: ./bin/webpack-dev-server
    ports:
      - 3035:3035
    volumes:
      - .:/usr/src/app
    env_file:
      - .env/development/database
      - .env/development/web
    environment:
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

  redis:
    image: redis

  database:
    image: postgres
    env_file:
      - .env/development/database
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:

and my Gemfile is

git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.6'

gem 'rails', '~> 5.2.4', '>= 5.2.4.3'
gem 'pg', '~> 1.0'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'redis', '~> 4.0'
gem 'webpacker', '~> 3.5'
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end


# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Answer 1

I hope you are doing well.

Recently I had the same problem as yours where I was getting the following error:

#<SocketError: Failed to open TCP connection to webpack_dev_server:3035:80 (getaddrinfo: Name or service not known)>

After some research, I found Kota Miyake's blog where he had the same problem.

Basically, all you have do is to change your webpack_dev_server service name to webpack-dev-server. Therefore, your docker-compose.yml would become something like the following:

services:

  web:
    build: .
    ports:
      - 3000:3000
    volumes:
      - .:/usr/src/app
    env_file:
      - .env/development/database
      - .env/development/web
    environment:
      - WEBPACKER_DEV_SERVER_HOST=webpack_dev_server

  webpack-dev-server:
    build: .
    command: ./bin/webpack-dev-server
    ports:
      - 3035:3035
    volumes:
      - .:/usr/src/app
    env_file:
      - .env/development/database
      - .env/development/web
    environment:
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

  redis:
    image: redis

  database:
    image: postgres
    env_file:
      - .env/development/database
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:

Note: if you have webpack_dev_server referenced somewhere else, you may need to rename it as well.

Please, check Kota Miyake's blog for more details.

I hope it helps.

Kindly,