Chapter 02

環境構築(Ruby on Rails 編)

hibriiiiidge
hibriiiiidge
2020.10.22に更新
このチャプターの目次

まずは環境構築(Ruby on Rails 編)を進めていきます。

ディレクトリ構成は以下のようなモノリシックな構成にして、1つのリポジトリで管理していきたいと思います。
backend 配下に Rails のファイル群を、 frontend 配下に nuxt.js のファイル群を展開します。

zenn-app
├── README.md
├── frontend
├── backend
└── docker-compose.yml

準備

まずは、github に任意のリポジトリを作成し、ローカルに clone して下さい。
以下、 zenn-app というリポジトリを作成したという前提で進めていきます。

$ git clone git@github.com:hibriiiiidge/zenn-app.git
$ cd zenn-app

Docker for macgit, bundler, Homebrew 等はインストールされている前提で進めていきます。

環境構築

backend というディレクトリを zenn-app 配下に作成します。
そして bundle init コマンドを叩き、 Gemfile を作成します。

$ bundle init

作成された Gemfilegem 'rails', '6.0.3' を追加します。

# Gemfile
gem 'rails', '6.0.3'

次に backend ディレクトリ配下に Dockerfile を追加します。

# zenn-app/backend/Dockerfile
FROM ruby:2.6.6

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

RUN mkdir /app
WORKDIR /app

ADD Gemfile /app/Gemfile

RUN apt-get update -qq && \
  apt-get install -y build-essential \
  libpq-dev \
  sudo \
  gem install bundler:2.0.1

RUN bundle install

ADD . /app

そして、 zenn-app 配下に戻り、 docker-compose.yml を追加します。

# zenn-app/docker-compose.yml
version: "3"

services:
  db:
    container_name: db
    image: mysql:5.7.30
    environment:
      TZ: Asia/Tokyo
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - 3307:3306
    networks:
      app_net:
        ipv4_address: '172.20.0.2'

  backend:
    container_name: backend
    build: ./backend/
    image: backend
    command: bundle exec rails server -b 0.0.0.0
    tty: true
    stdin_open: true
    volumes:
      - ./backend:/app:cached
      - bundle_data:/usr/local/bundle:cached
      - /app/vendor
      - /app/tmp
      - /app/log
      - /app/.git
    environment:
      TZ: Asia/Tokyo
    depends_on:
      - db
    ports:
      - 5000:3000 # ポートフォワード
    networks:
      app_net:
        ipv4_address: '172.20.0.3'

networks:
  app_net:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 172.20.0.0/24

volumes:
  mysql_data:
  bundle_data:

次に、 API モードで Rails new をします。

$ docker-compose run backend rails new . --api --force --database=mysql --skip-bundle

以下のようなログが流れ、初期ファイル群が作成されます。

Creating network "zenn-app_app_net" with driver "bridge"
Creating volume "zenn-app_mysql_data" with default driver
Creating volume "zenn-app_bundle_data" with default driver
Creating db ... done
exist
create  README.md
create  Rakefile
create  .ruby-version
...

作成されたら、 config/database.yml を変更します。

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

development:
  <<: *default
  host: db
  database: app_development
test:
  <<: *default
  host: <%= ENV['DB_HOST'] || 'db' %>
  database: app_test

config/database.yml の変更が終わったら、 docker image を作成します。

$ docker-compose build
...
 ---> acbd1966a856
Step 9/9 : ADD . /app
 ---> ff7e2d19c37d
Successfully built ff7e2d19c37d
Successfully tagged backend:latest

続いて、 コンテナを起動させます。

$ docker-compose up

以下のようなログが流れたらコンテナの起動に成功しています。

...
db         | Version: '5.7.30'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server (GPL)
backend    | => Booting Puma
backend    | => Rails 6.0.3 application starting in development
backend    | => Run `rails server --help` for more startup options
backend    | Puma starting in single mode...
backend    | * Version 4.3.5 (ruby 2.6.6-p146), codename: Mysterious Traveller
backend    | * Min threads: 5, max threads: 5
backend    | * Environment: development
backend    | * Listening on tcp://0.0.0.0:3000
backend    | Use Ctrl-C to stop

今回は Rails のコンテナは 5000:3000 のポートフォワードの設定を docker-compose で行っているので、 http://localhost:5000/ にアクセスします。
以下の Rails のデフォルトの画像が表示されたら OK です。

最後に、 DB を create します。

$ docker-compose exec backend bin/rails db:create
Created database 'app_development'
Created database 'app_test'

DB が create されるログが流れれば OK です。

参考: