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

Purpose

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

background

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.

outline

1. Prepare docker-compose.yml
2. Prepare a Dockerfile (for Backend)
3. Prepare entrypoint.sh
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.

docker-compose.yml

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

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

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

volumes:
  mysql-data:
  bundle: 

Prepare a Dockerfile (for backend)

Prepare entrypoint.sh

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 entrypoint.sh are located in the same directory hierarchy as docker-compose.yml.

Dockerfile_back

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 entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3001

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

entrypoint.sh

#!/bin/bash
set -e

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

# 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.

Dockerfile_front

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`.

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
- 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.

console

$ 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

https://zenn.dev/nicoryo/articles/2020121402tech