バックエンド側とフロントエンド側に分けて開発する際のnginxのドキュメントルートとdocker-compose.ymlのvolumesの関係について

Question

前提

現在こちらのサイトを参考にdocker-compose を使用してバックエンド側(Rails7系 APIモード)とフロントエンド側(React TypeScript)で開発したポートフォリオをAWSにデプロイしようとしています。現在サイトの通りに、一旦ローカル環境でRailsが本番環境で正常に作動するかチェックをしています。しかし、コンテナを起動した後にコンテナ同士の通信（React側で受け取った情報をRailsに送るなど）をすると、失敗してしまうで解決したいです。

また、以前の質問とやや趣旨が異なるので別に質問させていただきます。

発生している問題・エラーメッセージ(コンソール上のnginxコンテナで発生)

web_1    | 172.30.0.1 - - [26/Aug/2022:23:17:45 +0000] "GET /api/v1/users HTTP/1.1" 500 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"

docker-compose.yml(webのpublic-dataは調整中です。)

version: "3.3"
services:
  api:
    build:
      context: ./backend/
      dockerfile: Dockerfile
    # command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec puma -C config/puma.rb -e production"
    volumes:
      - ./backend:/myapp
      - ./backend/vendor/bundle:/myapp/vendor/bundle
      - tmp-data:/myapp/tmp
      - log-data:/myapp/log
      # - public-data:/myapp
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: production
      # RAILS_ENV: development
    # ports:
    #   - "3001:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true
    env_file:
      - .env
    user: root

  front:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    volumes:
      - ./frontend/app:/usr/src/app
    command: sh -c "yarn && yarn start"
    ports:
      - "4000:3000"
    environment:
      - WDS_SOCKET_PORT=0
  
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
      - /tmp/dockerdir:/etc/mysql/conf.d/
    ports:
      - "3306:3306"
    cap_add:
      - SYS_NICE
  
  web:
    build:
      context: backend/containers/nginx
    volumes:
      - public-data:/myapp
      - tmp-data:/myapp/tmp
    ports:
      - 80:80
    depends_on:
      - api

volumes:
  db:
    driver: local
  public-data:
  tmp-data:
  log-data:
  mysql-data:

nginx.conf

# プロキシ先の指定
# Nginxが受け取ったリクエストをバックエンドのpumaに送信
upstream myapp {
  # ソケット通信したいのでpuma.sockを指定
  # server unix:/backend/tmp/sockets/puma.sock;
  server unix:/myapp/tmp/sockets/puma.sock;
  # server unix:///myapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  # ドメインもしくはIPを指定
  # server_name localhost:4000;
  server_name localhost;
  # server_name .*;

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  # ドキュメントルートの指定
  root /myapp;
  # root /myapp/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @myapp;
  keepalive_timeout 5;

  # リバースプロキシ関連の設定
  location @myapp {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://myapp;
    # proxy_pass http://api:3000;
  }
}

試したこと

こちらのサイトを参考にデバッグしていたところnginx.confの

  # ドキュメントルートの指定
  root /myapp;
  # root /myapp/public;

この部分の設定が間違っている可能性に気づきました。参考にしたサイトではバックエンド側とフロントエンド側に分けて開発をしていなかったので、ドキュメントルートをそのまま/myapp/publicにすればrailsのpublicフォルダの内容（404.htmlなど）を読み込むことができ、

 try_files  $uri/index.html $uri @myapp;

このような記載をすると、特定のURLが来た時にそのフォルダ（URLのパスに依存）の中のindex.htmlを表示することができるのだと解釈しました。そのため、バックエンド側とフロントエンド側に分けて開発している私の場合、この部分を修正する必要がありそうです。ですが、私の場合、railsのAPIモードを使用しているため、jsonを返すような設定にしなければなりません。しかし、どのように記載すればnginxがrailsのjsonだけを返す機能を仲介できるのでしょうか。
この記事をみたのですが、もしかするとdocker-composeで一発で全てのコンテナを立ち上げる場合、私のディレクトリ構造を変更する必要があるかもしれません。現在の私のディレクトリ構造は以下の通りです。

この記事の場合、nginxがreactを包含している？ような構成になっていますが、このような構成に変更する必要があるのでしょうか？また、私の構成では
・React(この画面を表示して必要があればrailsと通信をする) ⇔nginx（仲介）⇔rails⇔db＊通信の大まかな流れ
・全てを一つのEC2インスタンス上で起動する（DBは除く）
・AWSにデプロイする際にはEC2上でDocker-compose upするだけ（DBやPIアドレスなどの調整はする）
このように、考えていたのですが、間違えていますでしょうか。
・なにかしらアドバイスがあればよろしくお願いいたします。不備があれば追記いたします。

Answer 1

https://qiita.com/hijitoshi/items/c75d20d5615630b1a23f
こちらの記事のとおりにディレクトリ構造を書き換えることで対応できました。ありがとうございました。