Docker + rails + Vue.js localhost connection refused

About this article

This article is posted to remember that it took a long time to resolve due to poor understanding of Docker. I set up the server with foreman and tried to install Vue.js in Ruby on Rails, but I couldn't connect to localhost: 5000 and it got stuck.

Articles that I referred to when introducing Vue.js

https://qiita.com/Moo_Moo_Farm/items/afacfe4349af6a106253

Files related in this article

• Dockerfile

FROM ruby:2.6

# install package to docker container
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev \
    && apt-get install apt-transport-https \
    && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update && apt-get install -y yarn \
    && curl -sL https://deb.nodesource.com/setup_10.x | bash - \
    && apt-get install -y nodejs mariadb-client \
    && mkdir /vue_app

WORKDIR /vue_app
COPY Gemfile /vue_app/Gemfile
COPY Gemfile.lock /vue_app/Gemfile.lock

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

• docker-compose.yml

compose.yml

version: '3'
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3320:3306'
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  web:
    build: .
    command: bundle exec puma -C config/puma.rb
    environment:
      RAILS_ENV: development
    volumes:
      - .:/vue_app
      - bundle:/usr/local/bundle
      - /app/vendor
      - /app/log
      - /app/.git
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true
volumes:
  mysql-data:
    driver: local
  bundle:
    driver: local

• Procfile.dev

Procfile.dev

web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

• bin/server

bin/server

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

The problem that occurred

https://qiita.com/Moo_Moo_Farm/items/afacfe4349af6a106253#-foreman%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E8%A8%AD%E5%AE%9A Install foreman in the same way as the reference URL, set so that two servers can be started at the same time, execute docker-copmpose up and go to localhost: 5000 in the browser, the following Was displayed. 

What i did

① Add -b 0.0.0.0 to Procfile.dev and execute docker-compose run --rm web bin / server

Procfile.dev

+ web: bundle exec rails s -b 0.0.0.0
- web: bundle exec rails s

② Foreman port number specification

It seems that the port number of foreman is set to 5000 by default, but explicitly specify 5000 again.

bin/server

#!/bin/bash -i
bundle install
+ bundle exec foreman start -p 5000 -f Procfile.dev

③ In the first place, I forgot to change the web port number of docker-compose.yml, so change the port number and execute docker-compose run --rm web bin / server

docker-compose.yml

ports:
-    - "3000:3000"
+    - "5000:5000"

However, it cannot be solved. .. ..

This finally solved it

https://docs.docker.jp/compose/reference/run.html Succeeded in starting the server by specifying the port number again with the command

docker-compose run -p 5000:5000 --rm web bin/server

However, I don't understand why you can't connect unless you explicitly specify the port number. .. .. I've never used such a command before.