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

プログラミング

MacにDockerを入れてRuby on RailsのAPIモードで動かしたい。コマンド実行でうまくいくかな。

今回も前回の続きDocker×Rails6 API×React環境の構築の3回目です。この回で環境構築が完了予定です。

以下の環境を構築することを目的としています。

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

今まで設定してきたファイルも、最後にこの記事で叩くコマンドでうまく設定できているのかを確認できます。ドキドキしますね。

もしかしたら誤字があったり、バージョンの違いでエラーが出る可能性があります。その時はエラーの内容で検索して一つずつ解決してみるしかありませんね。

本記事の執筆者

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

目次

  1. Dockerのインストールからファイルの設定まで復習
    • 1回目はDockerのインストールとdocker-compose.yml
    • 2回目はDockerfileやGemfileファイルの設定
    • 3回目でコマンド実行とデータベース設定で環境構築が完了
  2. 実際にコマンド実行してDocker環境構築
    • railsをAPIモード実行
    • database.ymlを書き換える
  3. Ruby on RailsとReactの動作確認
    • Ruby on Rails側の確認
    • Reactの動作確認
  4. Docker + Rails6 + React + Mysqlの環境構築を終えて
    • 間違ったディレクトリでrails newした

Dockerのインストールからファイルの設定まで復習

簡単に前回までのやったこと、設定などの復習をしていきます。

011回目はDockerのインストールとdocker-compose.yml

1回目はDockerのインストールの手順の解説、docker-compose.ymlの書き方について解説していました。

内容が多いので、記述は長くなりけっこう大変でしたね。

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

022回目はDockerfileやGemfileファイルの設定

2回目でDockerfile、Gemfileなどすべてのファイルの記述を終えています。記述量は多くなく解説記事も多いので特に迷うところは少なそうな感じですね。

033回目でコマンド実行とデータベース設定で環境構築が完了

3回目の今回は、実際にコマンドを叩いて環境が出来上がるところまで行っていきます。

途中でdatabase.ymlに設定を記述するところがあります。

localhost:3000でRailsの画面が起動。localhost:8000でReactの画面が起動するところがゴールになります。

実際にコマンド実行してDocker環境構築

順番にコマンドを実行していきます。

01railsをAPIモード実行

プロジェクトのディレクトリに移動して以下のコマンドを実行。以下のようなコメントが出てくると完了です。

$ docker-compose run api rails new . —api —database=mysql

Webpacker successfully installed 🎉 🍰

次はビルドを実行します。

$ docker-compose build

次はReact側です。

$ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app reactapp"

02database.ymlを書き換える

mysqlを使用しているので、設定します。

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

development:
  <<: *default
  database: development_mydb

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: test_mydb

production:
  <<: *default
  database: production_mydb

最後に起動します。

$ docker-compose up

Ruby on RailsとReactの動作確認

RailsとReactがそれぞれ違うポートでアクセス可能になっているはずなので確認していきます。

01Ruby on Rails側の確認

ブラウザを起動して「localhost:3000」を入力。この画面が出るとOKですね。

railsの環境構築完了

02Reactの動作確認

React側はポートを8000にしてあるので、「localhost:8000」で起動します。

React側も以下の画面が出るとOKです。これで確認完了です。

react環境構築完了

Docker + Rails6 + React + Mysqlの環境構築を終えて

Dockerの環境構築は情報が多いので何かつまっても解決できますが、設定する項目が多いので大変ですね。

コピペで作成が可能ですが、何のためにどんな設定しているのかを理解しないと現場では大変です。僕が環境構築で出たエラーをいくつか紹介しておきます。

01間違ったディレクトリでrails newした

間違ったディレクトリでrails newした結果、作られたファイルを一旦削除し、再度正しいディレクトリでrails newしても、railsのディレクトリですと怒られました。

Dockerのコンテナを全削除し、イメージも全部削除しやり直すという状況に。以下のコマンドでポチポチ消せます。

$ #コンテナすべて停止
$ docker stop $(docker ps -q)
$
$ #コンテナをすべて削除
$ docker rm $(docker ps -q -a)
$
$ #コンテナイメージを削除
$ docker rmi $(docker images -q)

02途中でデータベースを変えた

最初はPostgreSQLで環境を作ったのですが、ちょっとMySQLに変更したくなり途中で設定を変えていたら、PostgreSQLの設定が残っていたりして何度かやり直しをしました。

最終的には、PostgreSQLの方も環境はできたので、どちらも使えるようになっていますが余計な時間を使ってしまいました。

03現場で使うDockerと自宅で使う環境構築の違い

現場でDocker使う場合、docker-compose.ymlやDockerfileの記述は終わっている場合が多く、0から書くということが少ないかもしれません。

コマンドを実行するだけで、環境が出来上がるという状況になっている可能性が高いです。ただマニュアルに書かれている通りに実行するだけでは、何かを追加したり書き換える必要があるときに対応できません。

最低でも設定ファイルには、どのようなことが書かれているかくらいは理解している必要があると思います。ぜひ、自分で環境を作ってみてください。

まとめ

3回にわたって環境構築をしてきました。無事に環境構築ができたでしょうか。

Dockerの場合は、解説記事も多いので問題があっても解決方法が見つかりやすいので頑張って環境構築してみてください。

プログラミングも同じですが、最初は難しいと感じても慣れることが大事かと思います。慣れるまでは誰かに教わるか、プログラミングスクールなどを利用して効率良く学ぶのをおすすめします。

初心者のうちは、1から10まで理解しようとすると膨大な時間がかかります。時間をかけたわりには理解ができずプログラミングをやめてしまうということになりかねません。

そうなる前に、何か効率良く学習できる方法を探してみてください。

Ruby on Railsを学習するのであれば、以下のプログラミングスクールがおすすめです。理由は卒業生が転職できるレベルのスキルが身についている点です。

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


当サイト申し込みが多いプログラミングスクール

人気があるプログラミングスクールには、理由があります。

気になった方は候補に含めてみてください。