[Ruby] [Mac] Build environment with Ruby on Rails 6, React and MySQL 8 with Docker (with CRUD sample)

7 minute read

■Introduction

My name is Tatsuya, and I am mainly involved in PHP as a SES engineer and currently involved in Java projects. Now that I have decided to change jobs, I’m starting a new workplace in September! !! !! !! While it has some fun, there are actually anxiety factors. .. ..

that is,,, **Next job! !! Ruby on Rails! !! I have not done that before! !! **

I “If you don’t learn, your luggage will be confirmed from the moment you change jobs”

I started to get frustrated and started working on learning Ruby on Rails the other day. .. ..

Me “Isn’t it too hard for the official Ruby tutorial? Are you using Heroku as well? It’s quite a big deal!”

So, I was really frustrated. .. .. The reason for the frustration is that the tutorial itself is a tough one, but Environment construction using Docker has also been broken. ~~ (weakest) ~~

I didn’t want to create a Ruby environment on my Mac directly, so I wanted to set up a local environment with Docker no matter what. ~~ (It seems that Docker will be used at the next workplace as well, Sushi) ~~

So, based on the valuable literature carefully written by our predecessors, we will create a good environment where you can see the movement of Ruby while actually moving it, and let’s proceed with learning there. I decided to steer in the direction.

In the process, I was grateful for mixing the “environment” and “sample code” that I found very easy to understand while actually moving the hands, so I would like to introduce those results in this article. think.

◇ A valuable reference that has been very helpful (Unauthorized. Sorry.)

With the help of the people listed below, we were able to build a good sample site. Thank you very much. We are going to enter the environment construction work from now on, but we want to proceed carefully! I think that if you look at the article of a great predecessor along with my article, it will deepen considerably.

◉ Environment

Build a new development environment with Docker + Ruby on Rails + MySQL

  • A polite article that explains each source in detail. Also, since it has been described from the installation of Docker, it is also recommended for those who are new to Docker. I was very grateful.

◉ Sample code

CRUD sample project with Rails + React + Ajax

Rails + React + Ajax CRUD sample project (set of sources)

  • We are proceeding with the explanation using the tutorial method. It’s very easy to understand. I cloned it and moved it, but if you want to learn while writing, I think it is good to proceed in order.

◉ Articles that took care of other details

I want to edit credentials with Rails on Docker

◇ Appreciation and apology

    • Basically, I use the information of the reference article by copy and paste. This time I worked on a mix of environment and sample code **, so I’m using it almost as it is without changing it. I made a copy of the article that I spent valuable time writing, and I am very sorry and thank you and apology that I am very grateful for lowering the learning cost of Ruby. I would like to.

Let’s actually build the environment

◇Prerequisite

  • Mac
  • Docker installed -If you have not done so, from this article
  • You have git installed

◇ Final directory structure

directory structure


mpp_react_crud
  /mysql
    /Dockerfile
    /my.cnf
  /rails
    /app
    /bin
    /config
    /db
    /log
    /node_modules
    /public
    /tmp
      .browserslistrc
      .gitignore
      .ruby-version
      .babel.config.js
      .config.ru
      Dockerfile
      Gemfile
      Gemfile.lock
      LICENSE
      package.json
      pastcss.config.js
      Rakefile
      README.md
      yarn.lock
  docker-compose.yml

◇ Clone the sample project

terminal


# to home
$ cd
# create mpp_react_crud directory
$ mkdir mpp_react_crud
# move to mpp_react_crud directory
$ cd mpp_react_crud
# Clone sample project
$ git clone https://github.com/TakeshiOkamoto/mpp_react_crud.git
# mpp_react_crud rename project to rails
$ mv mpp_react_crud rails

◇ Creating docker-compose.yml

terminal


# Continuation of "◇Clone sample project"

# create docker-compose.yml
$ vi docker-compose.yml
# When the vim screen opens, press the "i" key to enter INSERT mode and copy and paste the following yml.
# When the copy and paste is complete, save with ":wq" and exit.

docker-compose.yml


version: "3.7"
services:
  db:
    build: mysql
    image: mpp_react_crud_db
    container_name: mpp_react_crud_db
    ports:
      -3306:3306
  app:
    build: rails
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    image: mpp_react_crud_app
    container_name: mpp_react_crud_app
    ports:
      -3000:3000
    volumes:
      -./rails:/rails
    depends_on:
      -db

◇Create Dockerfile and my.cnf for MySQL

▼ Creating a Dockerfile

terminal


# Continuation of "◇ Creating docker-compose.yml"

# create mysql directory
$ mkdir mysql
# change to mysql directory
$ cd mysql
# Create Dockerfile
$ vi Dockerfile
# When the vim screen opens, press the "i" key to enter INSERT mode and copy and paste the following yml.
# When the copy and paste is complete, save with ":wq" and exit.

Dockerfile


FROM mysql:8.0.18

ENV MYSQL_ROOT_PASSWORD root_pass

COPY ./my.cnf /etc/mysql/conf.d/my.cnf
RUN mkdir /var/log/mysql
RUN chown mysql:mysql /var/log/mysql
RUN mkdir /var/run/mysql
RUN chown mysql:mysql /var/run/mysql

▼Create my.cnf

terminal



# create my.cnf
$ vi my.cnf
# When the vim screen opens, press the "i" key to enter INSERT mode and copy and paste the following yml.
# When the copy and paste is complete, save with ":wq" and exit.

my.cnf


[mysql]
default-character-set=utf8mb4
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_bin
datadir=/var/lib/mysql
socket=/var/run/mysql/mysql.sock
log-error=/var/log/mysql/mysqld.log
pid-file=/var/run/mysql/mysqld.pid
port=3306
default_authentication_plugin=mysql_native_password
[client]
default-character-set=utf8mb4

terminal


# Finally return to the mpp_react_crud directory
$ cd ..

◇Create Dockerfile and Gemfile.lock for Ruby on Rails

▼ Creating a Dockerfile

terminal


# Continuation of "Create Dockerfile and my.cnf for MySQL"

# Move to the rails directory
$ cd rails
# Create Dockerfile
$ vi Dockerfile
# When the vim screen opens, press the "i" key to enter INSERT mode and copy and paste the following yml.
# When the copy and paste is complete, save with ":wq" and exit.

Dockerfile


FROM ruby:2.6.5

ENV LANG C.UTF-8
ENV APP_HOME /rails

RUN apt-get update -qq && apt-get install -y build-essential nodejs

# If an error occurs in yarnRUN apt-get update -qq && apt-get install -y curl && 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 && apt-get install -y vim

RUN rm -rf /var/lib/apt/lists/*

RUN mkdir $APP_HOME
WORKDIR $APP_HOME
COPY ./Gemfile $APP_HOME/Gemfile
COPY ./Gemfile.lock $APP_HOME/Gemfile.lock
RUN bundle install
COPY .$APP_HOME

EXPOSE 3000

▼ Create Gemfile.lock

terminal


# Create Gemfile.lock
# You can use an empty file, so create it with the touch command.
$ touch Gemfile.lock

◇Edit the database configuration file “database.yml” for Rails

terminal


# From the continuation of "Create Dockerfile and Gemfile.lock for Ruby on Rails"

edit #database.yml
$ vi config/database.yml
# When the vim screen opens, press the "i" key to enter INSERT mode and copy and paste the following yml.
# When the copy and paste is complete, save with ":wq" and exit.

database.yml


default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") {5} %>
  username: root
  password: root_pass
  host: db

development:
  <<: *default
  database: mpp_react_crud_development

test:
  <<: *default
  database: mpp_react_crud_test

production:
  <<: *default
  database:
  username:
  password:

terminal


# Finally return to the mpp_react_crud directory
$ cd ..

◇ Build Docker image

terminal


# From the continuation of "Edit database configuration file "database.yml" for Rails"
# Build Docker image
$ docker-compose build

◇Start the application with docker-compose ~ Project setting

terminal


# From the continuation of "◇ Build Docker image"

# Launch of service
$ docker-compose up -d # -d: launch in background
# bundle install
$ docker-compose run app bundle install
# Installation of various packages
$ docker-compose run app yarn install
# Master key generation
# After generating the file, the edit screen of credentials.yml.enc is displayed, so exit with :q!.
$ docker-compose run -e EDITOR=vim app rails credentials:edit
# Create folder
$ mkdir rails/app/assets/images

◇ Database preparation

terminal


# From the continuation of "Starting the application with ◇ docker-compose ~ Project setting"

# Create database
$ docker-compose run app rails db:create
# Create each table
$ docker-compose run app rails db:migrate
# Create initial data for each table
$ docker-compose run app rails db:seed

◇ Complete!

Finally let’s restart the container.

terminal


$ docker-compose restart

After rebooting, please try to access http://localhost:3000! Then the following page will be opened.

Screenshots 2020-07-26 16.49.15.png

This completes the environment construction of the sample site!

At the end

I think that not only beginners, but also experienced people will struggle to learn the technology to touch for the first time. Therefore, I thought that learning efficiency could be improved just by knowing “what kind of site works and how”, so I started this work. I’m still writing this article right after building the environment, so I have not started learning using this environment, but it is faster to swallow it by actually learning by actually logging in. I will think about it, so I will try to learn based on this environment and this site.

This article was written with the goal of completely breaking the commentary section and just completing it! Therefore, if you would like to confirm the explanation, please check the article in References and proceed while checking it.

I’m really scared of my predecessors.