Docker × Rails6 API × React環境for Mac[vol1]

プログラミング

MacにDockerを入れてRuby on RailsのAPIモードで動かしたい

今回は、このような悩みに答えていきます。

Mac2020モデルに買い換えたので、Dockerを入れ直しします。備忘録的なやつです。

以下の環境構築手順を知りたい方を対象とします。

  1. DockerでRuby on Rails環境を構築
  2. RailsはAPIモード
  3. フロント側にはReact

ゴールはDockerを起動し、RaislのAPI + React環境を構築するところまでとします。

プログラミング初心者、駆け出しエンジニアはRuby on Railsを学習する人が多いのでDockerを使うメリットは大きいと思います。

多くのWeb系を教えているプログラミングスクールでもRailsを教えています。ぜひチャレンジしてみてください。

長くなりそうなので、記事を分けて書いていきます。

筆者のプロフィール

・エンジニア歴10年以上
・IT企業転職歴も3回以上
・プログラミングスクール運営側の経験あり
・現在はフリーランスエンジニアとして企業に常駐(在宅勤務)

目次

  1. Dockerをインストールから設定
    • Dockerってどのくらい使われる?
    • DockerでRailsのAPIモード + Reactで開発環境を構築する
    • Dockerのインストール
  2. docker-compose.ymlの書き方
    • docker-compose.ymlの設定
    • docker-compose.ymlの解説
  3. まとめ

Dockerをインストールから設定

docker-logo

Dockerについて少し紹介していきます。

01Dockerってどのくらい使われる?

開発環境は企業によって異なるし、プログラム言語によっても違ってきますが、Web系の開発ではDockerの利用率が高いと思う。

以前は、VagrantだったりVirtualBox、VM Ware、XAMPP/MAMPといった環境で開発しているところも意外とありました。

いろんな環境で開発できるようにしておくと、どこの現場に入っても、「使ったことある」ってなってキャッチアップに時間がかからずにすみます。

02DockerでRailsのAPIモード + Reactで開発環境を構築する

2020年末にPCを買い替えたため、どんな環境で開発しようか考えたとき、Docker + Rails API + Reactがいいと思いました。APIを作るのでPHPかRubyで悩みましたが、僕自身の経験としてはJavaとPHPが長くRubyが一番短いため、Rubyを書きたいと感じました。

フロントも同様で、Vue、Angularが長くReactが短いためReactにしました。ということで、まずはDockerを入れていきます。以下がPCのスペックです。

  • MacOs Catalina 10.15.7
  • 2.3GHz クアッドコアIntel Core i7
  • メモリ32GB

03Dockerのインストール

  • STEP
    Dockerのトップページの「Get started」をクリック

    Docker公式ページのトップページにある「Get started」をクリックし、次の手順へ

    インストール手順1

  • STEP2
    Docker Desctopの「Download for Mac」をクリック

    Docker Desctopの「Download for Mac」をクリックし、Docker.dmgがダウンロードする

    Dockerインストール手順2

  • STEP3
    Dckerをアプリケーションフォルダに移動

    ダウンロードしたDocker.dmgをダブルクリック。ドラッグ&ドロップでアプリケーションフォルダに移動。

    Docker手順3

    docker手順4

  • STEP4
    Dckerのインストール

    アプリケーションフォルダにあるDocker.appをダブルクリックし、Dockerをインストール。警告が出ると思うのでそのまま許可して進みます。

  • STEP5
    Dckerのインストールバージョンを確認

    ターミナルを起動して以下のコマンドを入力

    ターミナル

    docker version
    Docker version 20.10.2, build 2291f61
    
  • STEP6
    Dcker動作確認

    ターミナルを起動して以下のコマンドを入力

    ターミナル

    docker run hello-world
    
    Hello from Docker!
    This message shows that your installation appears to be working correctly.
    
    To generate this message, Docker took the following steps:
     1. The Docker client contacted the Docker daemon.
     2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
        (amd64)
     3. The Docker daemon created a new container from that image which runs the
        executable that produces the output you are currently reading.
     4. The Docker daemon streamed that output to the Docker client, which sent it
        to your terminal.
    
    To try something more ambitious, you can run an Ubuntu container with:
     $ docker run -it ubuntu bash
    
    Share images, automate workflows, and more with a free Docker ID:
     https://hub.docker.com/
    
    For more examples and ideas, visit:
     https://docs.docker.com/get-started/
    

Dockerインストール完了です。お疲れさまでした。

docker-compose.ymlの書き方

Dockerの設定

ここではDockerに必要な設定をしていきます。apiのディレクトリに4つのファイル。frontに1つ。あとはdocker-compose.ymlで6つのファイルを準備します。

01docker-compose.ymlの設定

api
  - Dockerfile
  - Gemfile
  - Gemfile.lock
  - entrypoint.sh
front
  - Dockerfile
docker-compose.yml

docker-compose.ymlは記述が多い。一つずつ説明入れていきます。被っている部分は省略してます。

version: '3.8'

services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: passwordadmin
      MYSQL_DATABASE: mydb
      MYSQL_USER: root
      MYSQL_PASSWORD: passwordadmin
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306
  api:
    build: 
      context: ./api/
      dockerfile: Dockerfile
    command: /bin/sh -c "rm -f /myapi/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    image: rails:dev
    volumes:
      - ./api:/myapi
      - ./api/vendor/bundle:/myapi/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - 3000:3000
    depends_on:
      - db
  front:
    build: 
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/usr/src/app
    command: sh -c "cd reactapp && yarn start"
    ports:
      - "8000:3000"
volumes:
  mysql_data:
    driver: local

02docker-compose.ymlの解説

上で記述してあるdocker-compose.ymlの中身をつらつらと書いていきます。他のサイトで詳しく書いてある部分なので自分用のメモ程度に書いています。

version
docker-composeで使用するバージョン。
2021年2月時点で公式では3.8が最新バージョンになっています。
Docker公式
services
各アプリケーションの設定をservicesの中に記述。コンテナごとに記述していく。
db
各アプリケーションの設定をservicesの中に記述。
image 任意のimageを選択。もちろんpostgresも可能。
environment コンテナ内で利用される環境変数を記述。起動時に読み込まれる。
${MYSQL_ROOT_PASSWORD}のような書き方をすることで、「.env」で設定した情報を与えることができる。
command docker-compose upで実行したいコマンドを記述。ここでは文字コードの設定などを行う。
volumes マウントするパスを記述。volumes
ports DBを起動する時のポートを設定。
api
rails側を記述していきます。
build buildされるパスを記述。
context

コマンドを発行するとき、現在作業しているディレクトリのことを ビルド・コンテクスト(buid context) と呼びます。

Docker公式

ビルドする場所を記述するということですね。

depends_on apiにdbが依存しているということを記述している。起動順を制御するため起動順に記述する。
volumes 一番下にあるvolumesはmysqlのデータが登録される部分を記述。

まとめ

今回は、Dockerのインストールからdocker-compose.ymlの設定ファイルの書き方まで書いてみました。

第3回まで長いですが、同じような環境を作りたい方の参考になるとうれしいです。

どうしても難しくて学習が進まない、つまずくと解決に時間がかかると悩んでいるのであればプログラミングスクールでメンターに聞く方が効率良く学習できると思います。

Ruby on Railsを学習するのであれば、以下のプログラミングスクールがおすすめです。

スクールの選び方は以下のような感じです。なるべく複数体験して比較するのがポイントです。

  1. 気になったプログラミングスクールを3-4校くらいはピックアップする
  2. ピックアップしたプログラミングスクールの無料体験を受け比較する(最低3校)
  3. その中から自分に合ったプログラミングスクールを選ぶ

当サイトで申込の多いプログラミングスクール

TechAcademyの無料体験
マンツーマンでオリジナルアプリの作成ができるテックアカデミーは人気が高いプログラミングスクール。
Webエンジニア輩出実績トップクラスの【ポテパンキャンプ】
転職に強く本気でエンジニア転職を目指す人におすすめ。難易度が高いため身につくスキルも高く企業からの評価も高いのが特徴。
CodeCamp無料体験
講師を選択できるのが特徴のコードキャンプ。チャットでの質問ができないと言われていますが、オプションでチャットサポートを選択できるのがあまり知られていない。講師の評判が高いため質問しながらどんどん進みたい人向け。