【React✖︎Rails】フロントとバックを切り分ける方法を✅

英語喋れるようになってきたからスペイン語を学ぶ的なノリでReactを学習しようとしている23期中野昴です。

宣伝

ZEROKENをリリースいたしました。

https://www.zeroken.site/

Image from Gyazo

簡単にお酒の強さを測る事ができて、アルハラを予防する事ができるアプリになります。

飲み会でアルコールを強要される脅威から身を守る事ができます。是非一度ご覧になってください。

zerokenの可愛い初代iconが出来上がりました!名付けてゼロ犬です笑

Image from Gyazo

やっぱり、「Reactできます。」と言いたい。Vueの学習で、フロントとバックエンドを使い分けてSPAにする方法はざっくりと理解する事ができたので、これからはフロントをReact、バックをRailsでアプリを作成していきたいと思います。

その第一弾として、まずは環境構築から。

Vue✖︎Railsの時はRails newをして作成されたapp/javascript配下にフロントエンドのコードを書いていましたが、React✖︎Railsの構成にするということで、Dockerを使って構築していきたいと思います。

Dockerとは

異なる開発環境でもアプリケーションを素早く構築、テスト、デプロイする事ができるソフトウェア

仮想化、イメージ、コンテナという概念を理解するのに時間がかかる。いまだに掴めていないが、ざっくり、OS環境に左右されず、AWSへのデプロイや、CI/CDパイプラインが速くなるソフトウェアという認識でいる。

Docker とは | AWS

環境構築

早速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

これで、下記のようなファイル構成のアプリが完成する

Image from Gyazo

【React】Docker Composeで開発環境を構築

番外編

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 && \\

Dockerにnodejsをインストールするとエラーになった

Node - Official Image | Docker Hub