Place "Create a to-do list using Rails API mode and React Hooks" on docker


The purpose of this is also a memorandum of what you have done. Make it more like How to method than Know How


Because there was no article to add the application that separated the back end and the front end to docker. I've done it so much, so I'm thinking of writing an article.


  1. Prepare docker-compose.yml
  2. Prepare a Dockerfile (for Backend)
  3. Prepare
  4. Prepare a Dockerfile (for Frontend)
  5. Adjustment on rails side
  6. Install axiosmaterial-ui

let's try it! docker-compose.yml Even if you prepare "docker later" for existing rails application etc. Even when you start building an app, what you do is almost the same.

Place docker-compose.yml on the main directory.


version: '3'
    image: mysql:5.6
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
      - mysql-data:/var/lib/mysql 
      - "4306:3306" #I used 3306 in another case, so I specified 4306.

      context: .
      dockerfile: Dockerfile_back
    command: /bin/sh -c "rm -f /myapp/tmp/pids/ && bundle exec rails s -p 3001 -b ''"
    image: rails:dev
      - .:/myapp    #Please set myapp arbitrarily
      - ./app/vendor/bundle:/myapp/vendor/bundle 
      TZ: Asia/Tokyo
      RAILS_ENV: development
      - "3001:3001"
      - db

      context: todo_front
      dockerfile: Dockerfile_front
      - ./todo_front:/todo_front
    command: /bin/sh -c "cd todo_front && yarn && yarn start"
      - "3000:3000"


Prepare a Dockerfile (for backend)


Matched the Ruby version with the Ruby version of the existing rails app. And myapp is optional. It's OK to combine them! I get an error when SQL types mysql-client. It seems that it was unified to maliadb-client someday.

Dockerfile_back and are located in the same directory hierarchy as docker-compose.yml.


FROM ruby:2.6.3

RUN apt-get update && \
    apt-get install -y mariadb-client nodejs vim

RUN mkdir /myapp

WORKDIR /myapp

ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock

RUN gem install bundler
RUN bundle install

ADD . /myapp

COPY /usr/bin/
RUN chmod +x /usr/bin/

CMD ["rails", "server", "-b", ""]

set -e

# Remove a potentially pre-existing for Rails.
rm -f /myapp/tmp/pids/

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

Dockerfile (for frontend)

Place it on the todo_front directory.


FROM node:14

Adjustment on the Rails side

I'll adjust database.yml'. Since it is socket communication, I will change it to host: db`.


default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
- socket: /tmp/mysql.sock
+ host: db

Install axiosmaterial-ui

Launch the container in the background. Then install axios and material-ui. By the way, exec can be used when the container is already up. Use run when the container is not up. When you're done, make a db, migrate it, plant it, and you're done.


$ docker-compose up -d #Launch the container
$ docker-compose exec front npm install axios
$ docker-compose exec front npm install @material-ui/core
$ docker-compose exec app bin/rails db:create
$ docker-compose exec app bin/rails db:migrate
$ docker-compose exec app bin/rails db:seed

When you access localhost: 3000, you should see the same screen as last time. the end

At the end

This time, docker for Mac wasn't working well, and attach occurred many times. After rebooting, I was able to go to the next process. I wondered if I should study docker a little more.

Articles posted on Zenn

Recommended Posts

Place "Create a to-do list using Rails API mode and React Hooks" on docker
Rails (API mode) x React x TypeScript simple Todo app
Create an environment for Tomcat and Postgres on a Chromebook without using developer mode
Launch Nuxt.js + Rails API on Docker and try CRUD operation
Run React on a Docker container
Create a development environment for Ruby 3.0.0 and Rails 6.1.0 on Ubuntu 20.04.1 LTS
Create a Docker Image for redoc-cli and register it on Docker Hub
Let's install Docker on Windows 10 and create a verification environment for CentOS 8!
How to create a query using variables in GraphQL [Using Ruby on Rails]
[Docker] How to create a virtual environment for Rails and Nuxt.js apps
Create a SPA with authentication function with Rails API mode + devise_token_auth + Vue.js 3 (Rails edition)
Create a web environment quickly using Docker
Create a RESTful API service using Grape
[Rails] Let's create a super simple Rails API
A memo to simply create a form using only HTML and CSS in Rails 6
Run Docker environment Rails MySQL on Heroku. devise and hiding the twitter API
Nuxt.js × Create an application in Rails API mode
Create API using Retrofit2, Okhttp3 and Gson (Java)
Create a Privoxy + Tor environment instantly using Docker
Let's create a REST API using WildFly Swarm.
[Rails] How to create a graph using lazy_high_charts
Rails6 [API mode] + MySQL5.7 environment construction with Docker
Create a drag-and-drop markdown editor in Rails 6 (using Active Storage, SimpleMDE and Inline Attachment)
Install Ubuntu 20.04 in virtual box on windows10 and build a development environment using docker
Create a Java (Gradle) project with VS Code and develop it on a Docker container
A memo when building a Rails 5.2 development environment using Docker Desktop + WSL2 on Windows 10 Home
[Docker] How to update using a container on Heroku and how to deal with Migrate Error
Create a Java development environment using jenv on Mac
[Introduction] Try to create a Ruby on Rails application
Easily build Redmine on Windows using WSL2 and Docker
Deploy laravel using docker on EC2 on AWS ① (Create EC2 instance)
[Rails] Volume that displays favorites and a list of favorites
[Rails] Create sitemap using sitemap_generator and deploy to GAE
(Ruby on Rails6) How to create models and tables
[2021] Build a Docker + Vagrant environment for using React / TypeScript
<For super beginners> Why don't you make a chatbot using "Talk API"? ?? [Ruby on Rails]
Let's create a file upload system using Azure Computer Vision API and Azure Storage Java SDK
[Rails 6.0, Docker] I tried to summarize the Docker environment construction and commands necessary to create a portfolio