【React✖︎Rails】ReactとRailsでマイクロサービスアーキテクチャを実装
英語喋れるようになってきたからスペイン語を学ぶ的なノリでReactを学習しようとしている23期中野昴です。
やっぱり、「Reactできます。」と言いたい。Vueの学習で、フロントとバックエンドを使い分けてSPAにする方法はざっくりと理解する事ができたので、これからはフロントをReact、バックをRailsでアプリを作成していきたいと思います。
その第一弾として、まずは環境構築から。
Vue✖︎Railsの時はRails newをして作成されたapp/javascript配下にフロントエンドのコードを書いていましたが、React✖︎Railsの構成にするということで、Dockerを使って構築していきたいと思います。
Dockerとは
異なる開発環境でもアプリケーションを素早く構築、テスト、デプロイする事ができるソフトウェア。
仮想化、イメージ、コンテナという概念を理解するのに時間がかかる。いまだに掴めていないが、ざっくり、OS環境に左右されず、AWSへのデプロイや、CI/CDパイプラインが速くなるソフトウェアという認識でいる。
環境構築
早速dockerを使ってフロントエンド、バックエンドの環境を整えていく。
アプリを作りたいディレクトリに移動し、必要なファイルを作成していく
$ mkdir app
$ cd app
$ touch docker-compose.yml
$ touch entrypoint.sh
$ mkdir frontend
$ mkdir backend
$ cd frontend
$ touch Dockerfile
ファイルの作成
中身を作成していく
docker-compose.ymlの作成
version: '3'
services:
db:
image: postgres
volumes:
- ./tmp/db:/var/lib/postgresql/data
environment:
- POSTGRES_USER
- POSTGRES_PASSWORD
- POSTGRES_DB
ports:
- "15432:5432"
backend:
build: ./backend/
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3020 -b '0.0.0.0'"
volumes:
- .:/backend
ports:
- "3307:3306"
depends_on:
- db
frontend:
build:
context: ./frontend/
dockerfile: Dockerfile
volumes:
- .:/frontend/
command: sh -c "cd frontend && PORT=3001 yarn start"
ports:
- "3001:3001"
dockerで使用されるサービス名は、アプリ名とdb名の二つに分かれている。アプリ名は、docker-compose run <アプリ名>で使われる。
各サービス名は、わかりやすければなんでもいいでそう。
ComposeFile内の各サービス名は、わかりやすければなんでもいいですComposeFile内の各サービス名は、わかりやすければなんでもいいです
アプリ名: frontend, backend
db名: db
詳しい詳細はこの記事に書いてある。
docker-compose.ymlファイルが置かれているディレクトリでdocker-compose upを打つと、docker-compose.ymlに書かれたコードが実行される。
バックエンドの環境構築
バックエンドにRailsを採用するために、まずはapiモードのrails環境を整える。
rails newを下記のように実行
$ docker-compose run backend
rails new ./backend
--force
--no-deps
--database=postgresql
--api
それぞれのコマンドは、下記のような意味を持っている。
--api
アプリをapiモードで起動するオプション。viewファイルが作成されない。
--force
： 既存のGemfileを上書きするためのオプション
--no-deps
： リンクしたサービスを起動しない
--database=postgresql
： DBにpostgresqlを指定
--skip-bundle
： bundleをskip（最後にbundleします
次に、backendディレクトリにDockerfileを作成する。
Dockerfile
docker buildをターミナルで打つと、上から順番に実行されていく。
FROM ruby:2.6.7
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
# yarnパッケージ管理ツールをインストール
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \\
curl -sS <https://dl.yarnpkg.com/debian/pubkey.gpg> | apt-key add - && \\
echo "deb <https://dl.yarnpkg.com/debian/> stable main" | tee /etc/apt/sources.list.d/yarn.list && \\
apt-get update && apt-get install -y yarn
# Node.jsをインストール
RUN curl -sL <https://deb.nodesource.com/setup_14.x> | bash - && \\
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 1655A0AB68576280 && \\
apt-get update && \\
apt-get install -y nodejs
#backendディレクトリを作成する
RUN mkdir /backend
WORKDIR /backend
#Railsで使うGemをインストールする
COPY Gemfile /Gemfile
COPY Gemfile.lock /Gemfile.lock
RUN gem install bundler
RUN cd /backend
RUN bundle install
COPY . /backend
# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3020
# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
yarn,node,ruby gemsがインストールされる。一気にイメージが作られるところはかなり壮観だから一度試して欲しい。
各Dockerコマンドの意味
RUN
コマンドを実行する。
WORKDIR
WORKDIR命令は、Dockerfile内で以降に続くRUN、CMD、ENTRYPOINT、COPY、ADD命令の処理時に（コマンドを実行する場所として）使う 作業ディレクトリworking directory を指定する。
DockerでRuby on Railsの環境構築を行うためのステップ【Rails 6対応】 - Qiita
Rails API × React × TypeScriptで作るシンプルなTodoアプリ - Qiita
フロントエンドの環境構築
フロントはreactにするため、Reactをインストールするコマンドを打つ。
すでにdocker-compose.ymlのfrontendというサービス名の配下にビルドの流れが描かれているため、下記コマンドをdocker-compose.ymlのあるディレクトリで打つだけでいい。
$ docker compose run --rm
frontend sh -c
"yarn global add create-react-app &&
create-react-app ./frontend
--template typescript"
—rm
コンテナを停止した段階で削除してくれるコマンド。
frontend
frontendというディレクトリ名でreactアプリが作成される。
sh -c "yarn global add create-react-app
sh -cに続くコマンドを実行。yarn global add create-react-appで、reactをインストールするパッケージをダウンロードしている。
create-react-app ./frontend
先程作成したfrontendディレクトリでreactアプリを展開させる
--template typescript"
jsファイルに、typescriptを使う。
Dockerfileに書き込む。
FROM node:14.4.0-alpine3.10
WORKDIR /frontend
最後にコマンドを実行
dockerを起動するときは、下記コマンドを実行すればいい。
$ docker-compose up --build
これで、下記のようなファイル構成のアプリが完成する
番外編
bundle installに苦しむ
bundle installが実行されないため、backendディレクトリに移動して、わざわざdocker-compose run backendと打たないといけない。
Docker Compose + Railsでイメージ内でbundle installしているはずなのにgemが無いとエラーがでる。 - Qiita
React + Rails API モードで基本的な CRUD アプリを作ってみた (バックエンド編)
node.jsのインストールに苦しむ
node.jsが正常にインストールされないエラーに当たることがある。実際に私はあたった。その時は、エラー文をそのままブラウザに打ち込むとこの記事が出てくるので、node.jsをインストールする記述を変更してあげると見事にエラーが無くなることを確認する事ができる。
具体的に、下記コマンドを付け加えてあげると良い。
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 1655A0AB68576280 && \\
apt-get update && \\
