プログラミング技術

本サイトはプロモーションが含まれています。

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

docker×Rails×React
初心者さん
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年以上経験を積みフリーランスエンジニアになり、単価80万〜140万の案件に参画し稼げるように。プログラミングを始めた頃は、「プログラミング向いていないかも」、「自分のスキルレベル低い」と感じ悩んだ経験がある。

  • 元プログラミングスクール運営企業の社員のためプログラミングの学習に詳しい
  • 自分と同じように悩んでいる初心者へのアドバイスが得意。

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

docker-logo

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

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

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

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

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

Dockerで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

Dockerのインストール

  • 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つのファイルを準備します。

docker-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

docker-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. その中から自分に合ったプログラミングスクールを選ぶ

関連記事
プログラミングスクールは料金を優先して決めると失敗する理由
関連記事
プログラミングスクールおすすめ。目的別4つの分野×2社ずつ紹介

-プログラミング技術