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

初心者さん

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

このような疑問をお持ちの方に向けて書いています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

railsを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"

database.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がそれぞれ違うポートでアクセス可能になっているはずなので確認していきます。

Ruby on Rails側の確認

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

Reactの動作確認

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

関連記事

プログラミングスクールは料金を優先して決めると失敗する理由

関連記事

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