別々のコンテナで作成したrails環境とreact環境を組み合わせる方法について

Question

前提

dockerで環境構築しています。
バックはruby on rails
フロントはreactです。
それぞれ別にコンテナを用意して別に管理したいと思っています。
なので、railsとreactのディレクトリを分けます。

実現したいこと

rubyで作成した画面に動きをつけるため、その部分についてはreactでコードを書きたいと思ってます。
イメージとしてはruby on railsのviewフォルダの中にあるテンプレファイルにreactのコードを書いてブラウザで開いて動くようにするというのをゴールにしてます。（railsもreactも使うの初めてだからそもそもこのゴール設定自体間違ってるかも。また、今回のようにコンテナ、ディレクトリを分けて作成した場合はこのゴール設定自体誤ってるかも。その場合はすみません。）

発生している問題・エラーメッセージ

今回、dockerを使った環境構築では、バックとフロントで別々のコンテナを用意しました。
例えば、コンテナ一つで作成若しくは自分のパソコンに直接インストールして環境を作るという場合は、以下の手順でできるとおもっています。

・rails、reactをインストール
・rails new　でrailsのプロジェクトを作成
・create-react-app でreactのプロジェクトを作成
・railsのプロジェクトフォルダのapp/javascript下にReactのエントリーポイント作成
（参考：https://qiita.com/asami___t/items/256f76c3c8a9bd5d0732）

今回、コンテナを別々にして、railsとreactのプロジェクト作成コマンドもそれぞれ別のコンテナ内で実行しました。
ブラウザで、docker-compose.ymlで指定したポート番号を入力するとそれぞれrailsとreactの初期画面が表示されるという段階です。

ここから先、前述のゴールへたどり着く方法がわからないという状況です。コンテナ一つで作成若しくは自分のパソコンにrailsとreact両方を直接インストールして環境を作る場合と、ここから先の手順は変わらないですか？
コンテナが別々になったからといってなにか変わるところが出てくわけではないという認識で正しいですか？
色々調べたのですがrailsとreactそれぞれの初期画面を表示するところで解説を終わっている情報が多く、その先を知りたいのです。

docker-compose.ym

version: "3"

services:

  app:
    build: .
    command: bash -c "bundle exec puma -C config/puma.rb"
    env_file:
      - ./environments/db.env
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db

  front:
    build: front
    volumes:
     - ./front:/usr/src/app
    ports:
      - "8000:8000"

　db:
    image: mysql:latest
    env_file:
      - ./environments/db.env
    volumes:
      - db-data:/var/lib/mysql
    ports:
      - "3306:3306"

Comments

[hoshi-takanori]

React を別にするということは、いわゆる SPA にして、Rails は API サーバーとして使うってことでしょうか？ また、最終的にはどのようにデプロイする予定ですか？

[gomes_2222]

そのとおりです。

Answer 1

結論から言うと、railsをAPIモードにする必要があります。
そのため、最初にrailsで新規プロジェクトを作る際に以下のようにコマンドを打つ必要があります。
末尾に--apiをつければOKです。

$ rails new my_api（プロジェクト名。任意。） --api.