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

■ Introduction

As an SES engineer, I'm Tatsuya, who mainly participates in PHP and is currently participating in Java projects. And this time I decided to change jobs, and from September I will move to a new workplace! !! !! !! While it's fun, it's actually anxious. .. ..

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

I "If you don't study, your luggage will be confirmed from the moment you change jobs"

I started to get impatient, and from the other day I started to study Ruby on Rails. .. ..

I "Isn't the official Ruby tutorial really too hard !? I also use Heroku !? It's quite a big deal !?"

So, in fact, I was frustrated. .. .. The reason for the frustration is that the tutorial itself is stubborn, but ** building an environment using Docker ** also broke. ~~ (weakest) ~~

I didn't want to create a Ruby environment directly on my Mac, so I wanted to set up a local environment with Docker. ~~ (It seems that Docker will be used at the next workplace, sushi) ~~

So, based on the valuable literature carefully written by the ancestors, I will create a nice environment where you can understand the movement of Ruby while actually moving it, and I will proceed with learning there. I decided to steer in the direction.

In the process, I thankfully mixed the "environment" and "sample code" that I felt were very easy to understand and easy to understand while actually moving my hands, so I hope I can introduce the results in this article. think.

◇ A valuable reference that was very helpful (Unauthorized. I'm sorry.)

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

◉ Environment

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

――The polite article explains in detail for each source. Also, since it is 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

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

――The tutorial method is used for explanation. It's very easy to understand. I cloned it completely and moved it, but if you want to learn while writing, I think it is good to proceed in order.

◉ Articles that were taken care of in other details

I want to edit credentials with Rails on Docker

◇ Thanks and apologies

-* Basically, the information of the reference article is used in the copy. I worked on ** a mix of environment and sample code **, so I'm using it almost as it is without arranging it strangely. It's like copying the entire article that you took your precious time to write, and I'm very sorry and thank you for lowering the learning cost of Ruby. I would like to.


■ Let's actually build the environment

◇ Prerequisites

◇ 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 sample project

terminal


#To home
$ cd
# mpp_react_Create crud directory
$ mkdir mpp_react_crud
# mpp_react_Move to crud directory
$ cd mpp_react_crud
#Clone sample project
$ git clone https://github.com/TakeshiOkamoto/mpp_react_crud.git
# mpp_react_Renamed crud project to rails
$ mv mpp_react_crud rails

◇ Create docker-compose.yml

terminal


#From the continuation of "◇ Clone sample project"

# docker-compose.create 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 is completed, ":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


# 『◇ docker-compose.From the continuation of "Creating yml"

#Create mysql directory
$ mkdir mysql
#Move to mysql directory
$ cd mysql
#Create a 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 is completed, ":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



# my.Create 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 is completed, ":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 mpp_react_Return to crud directory
$ cd ..

◇ Create Dockerfile and Gemfile.lock for Ruby on Rails

▼ Creating a Dockerfile

terminal


#"◇ Dockerfile and my for MySQL.From the continuation of "Create cnf"

#Go to rails directory
$ cd rails
#Create a 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 is completed, ":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 yarn
RUN 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

▼ Creating Gemfile.lock

terminal


# Gemfile.Create lock
#An empty file is fine, so create it with the touch command.
$ touch Gemfile.lock

◇ Edit the database setting file "database.yml" for Rails

terminal


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

# database.Edit 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 is completed, ":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 mpp_react_Return to crud directory
$ cd ..

◇ Build Docker image

terminal


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

◇ Launch the app with docker-compose ~ Project settings

terminal


#From the continuation of "◇ Build Docker image"

#Service launch
$ docker-compose up -d  # -d:Start in background
#bundle installation
$ docker-compose run app bundle install
#Installation of various packages
$ docker-compose run app yarn install
#Master key generation
#After file generation, credentials.yml.Since the edit screen of enc is displayed:q!It ends with.
$ docker-compose run -e EDITOR=vim app rails credentials:edit
#Folder generation
$ mkdir rails/app/assets/images

◇ Database preparation

terminal


# 『◇ docker-Start the app with compose ~ Project settings ”

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

◇ Completed!

Finally, let's restart the container.

terminal


$ docker-compose restart

After the reboot, try accessing http: // localhost: 3000! Then, the following page will be opened.

スクリーンショット 2020-07-26 16.49.15.png

This completes the environment construction of the sample site!

■ At the end

Not only beginners but also experienced people will have a hard time learning the techniques to touch for the first time. Therefore, I thought that learning efficiency would be improved just by knowing "what kind of site is working and how" first, so I started this work. I haven't started learning using this environment because I'm writing this article right after building the environment, but I think it's quicker to swallow by experiencing it while actually preparing logs. Because I think about it, I will work on learning based on this environment and this site.

This article has been written with the goal of completely breaking the commentary and just completing it! Therefore, if you want to check the explanation firmly, I would like you to check the article of the reference and proceed while comparing it.

I "The ancestors are really amazing."

Recommended Posts

[Mac] Build an environment with "Ruby on Rails 6", "React" and "MySQL 8" with "Docker" (with CRUD sample)
Build an environment with Docker on AWS
[Rails] How to build an environment with Docker
[Mac] Build an environment with "Ruby on Rails 6", "React" and "MySQL 8" with "Docker" (with CRUD sample)
Build a Ruby on Rails development environment on AWS Cloud9
Rails6 (MySQL, Ubuntu environment, Cloud9)
Troublesome Rails environment construction flow [Windows 10]
[Rails] AWS EC2 instance environment construction
Muscle Ruby on Rails Day 1 ~ Environment Construction ~
[Mac] Build an environment with "Ruby on Rails 6", "React" and "MySQL 8" with "Docker" (with CRUD sample)
[Ruby on Rails] From MySQL construction to database change
[Ruby on Rails] From MySQL construction to database change
Rails6 (MySQL, Ubuntu environment, Cloud9)
[Rails / MySQL] Mac environment construction
Steps to build a Ruby on Rails development environment with Vagrant
How to build Rails 6 environment with Docker
I built a rails environment with docker and mysql, but I got stuck
Build a Ruby on Rails development environment on AWS Cloud9
[Ruby on Rails] Model test with RSpec
Build an environment with Docker on AWS
Build Unity development environment on docker
Build a JMeter environment on your Mac
Muscle Ruby on Rails Day 1 ~ Environment Construction ~
Build DynamoDB local with Docker
Microservices With Docker and Cloud Performance
Build an environment with Docker on AWS
How to build Rails 6 environment with Docker
Until you start Zabbix Server with docker-compose and get information from other hosts
Build an environment with Docker on AWS
How to build Rails 6 environment with Docker
[Rails] How to build an environment with Docker
Build DynamoDB local with Docker
Build Unity development environment on docker
Create a Spring Boot development environment with docker
Build a Java development environment with VS Code
[Mac] Build an environment with "Ruby on Rails 6", "React" and "MySQL 8" with "Docker" (with CRUD sample)
Try to build a Java development environment using Docker
Build Java program development environment with Visual Studio Code
Database environment construction with Docker in Spring boot (IntellJ)
Java + Spring development environment construction with VirtualBox + Ubuntu (Xfce4)
Create Chisel development environment with Windows10 + WSL2 + VScode + Docker
[Ruby on Rails] Upload multiple images with refile
I made a portfolio with Ruby On Rails
Compiled kotlin with cli with docker and created an environment that can be executed with java
Rails6.0 ~ How to create an eco-friendly development environment
Build a development environment to create Ruby on Jets + React apps with Docker
(Ruby on Rails6) How to create models and tables
I want to create a Parquet file even in Ruby
Introduction to Parallel Processing + New Parallel Execution Unit in Ruby Ractor
I tried to create a padrino development environment with Docker
Build a Ruby on Rails development environment on AWS Cloud9
Steps to build a Ruby on Rails development environment with Vagrant
I made a portfolio with Ruby On Rails
[Ruby on Rails] Delete s3 images with Active Strage
Create an EC site with Rails5 ④ ~ Header and footer ~
[Ruby on Rails] From MySQL construction to database change
(Ruby on Rails6) How to create models and tables
Created RSS / Atom format sitemap with Ruby on Rails