前提

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

コンソール上のエラー（nginxコンテナ）

js
1web_1    | 192.168.128.1 - - [26/Aug/2022:09:26:20 +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"

試したことや考察など

想定している挙動の例（サインアップ）

1　Reactコンテナ側で情報の入力（名前など）を受けて、登録ボタンが押されると、それがnginxコンテナへ飛ぶ（＊開発環境ならRailsコンテナに飛ぶ。以下コンテナ省略）
2　nginxがReactから受け取った情報をRailsに送り、それをRailsが処理する
3　Railsがその処理結果をnginxに返す。nginxはそれを受け取る。
4　nginxがRailsから受け取ったレスポンスをReactに返す

APIテスターを使ってユーザー一覧をみる場合

1　apiテスターを使って「http://localhost/api/v1/users(nginxコンテナ)」に「Getリクエストを送る」
2　nginxコンテナがそのリクエストをrailsに送る。railsはそれを受け取る
3　railsが処理をしてレスポンスをnginxに送る、nginxはそれを受け取る
4　nginxはそのレスポンスをapiテスターへ送る。

大まかな流れはこのようになると想定しています。しかし、サインアップとAPIテスターを使ってもどちらも上に示したように500エラーが発生してしまいます。開発環境で行った際にはこのようなエラーは出ていなかったので、本番環境用で導入したnginxコンテナとの処理の間でエラーが発生していると予想しました。

docker-compose.production.yml

yml
1version: "3.3"
2services:
3  api:
4    build:
5      context: ./backend/
6      dockerfile: Dockerfile
7    command: bash -c "rm -f tmp/pids/server.pid && bundle exec puma -C config/puma.rb -e production"
8    volumes:
9      - ./backend:/myapp
10      - ./backend/vendor/bundle:/myapp/vendor/bundle
11      - tmp-data:/myapp/tmp
12      - log-data:/myapp/log
13    environment:
14      TZ: Asia/Tokyo
15      RAILS_ENV: production
16      # RAILS_ENV: development
17    # ports:
18    #   - "3001:3000"
19    depends_on:
20      - db
21    stdin_open: true
22    tty: true
23    env_file:
24      - .env
25    user: root
26
27  front:
28    build:
29      context: ./frontend/
30      dockerfile: Dockerfile
31    volumes:
32      - ./frontend/app:/usr/src/app
33    command: sh -c "yarn && yarn start"
34    ports:
35      - "4000:3000"
36    environment:
37      - WDS_SOCKET_PORT=0
38  
39  db:
40    image: mysql:8.0
41    environment:
42      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
43    command: --default-authentication-plugin=mysql_native_password
44    volumes:
45      - mysql-data:/var/lib/mysql
46      - /tmp/dockerdir:/etc/mysql/conf.d/
47    ports:
48      - "3306:3306"
49    cap_add:
50      - SYS_NICE
51  
52  web:
53    build:
54      context: backend/containers/nginx
55    volumes:
56      - public-data:/myapp/public
57      - tmp-data:/myapp/tmp
58    ports:
59      - 80:80
60    depends_on:
61      - api
62
63volumes:
64  db:
65    driver: local
66  public-data:
67  tmp-data:
68  log-data:
69  mysql-data:

puma.rb

rb
1threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }.to_i
2threads threads_count, threads_count
3port        ENV.fetch("PORT") { 3001 }
4environment ENV.fetch("RAILS_ENV") { "development" }
5plugin :tmp_restart
6
7app_root = File.expand_path("../..", __FILE__)
8# bind "unix:/backend/tmp/sockets/puma.sock"
9bind "unix:#{app_root}/tmp/sockets/puma.sock"
10# bind "unix://#{app_root}/tmp/sockets/puma.sock"
11
12stdout_redirect "#{app_root}/log/puma.stdout.log", "#{app_root}/log/puma.stderr.log", true

nginx.conf

j
1# プロキシ先の指定
2# Nginxが受け取ったリクエストをバックエンドのpumaに送信
3upstream myapp {
4  # ソケット通信したいのでpuma.sockを指定
5  server unix:/myapp/tmp/sockets/puma.sock;
6}
7
8server {
9  listen 80;
10  # ドメインもしくはIPを指定
11  # server_name localhost;
12  server_name .*;
13
14  access_log /var/log/nginx/access.log;
15  error_log  /var/log/nginx/error.log;
16
17  # ドキュメントルートの指定
18  root /myapp/public;
19
20  client_max_body_size 100m;
21  error_page 404             /404.html;
22  error_page 505 502 503 504 /500.html;
23  try_files  $uri/index.html $uri @myapp;
24  keepalive_timeout 5;
25
26  # リバースプロキシ関連の設定
27  location @myapp {
28    proxy_set_header X-Real-IP $remote_addr;
29    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
30    proxy_set_header Host $http_host;
31    # proxy_pass http://myapp;
32    proxy_pass http://api:3001;
33  }
34}

nginx.confの設定が間違っている可能性

こちらの記事を参考にしました。

１sever_name

記事によると、sever_nameの部分はどのURLからの処理を受け付けるかという設定のようです。最初はこの部分は

server_name localhost;

のようになっていましたが、エラーが発生していました。そこで私はとりあえず正規表現「.*」で全てのリクエストを受け付けることにしました。しかし、エラーが発生しているままです。

2 proxy_pass

記事によると、proxy_pass http://app:3001;
のように書いた場合、「appコンテナの3001ポートにリクエストを送る」という意味になるそうです。よって私は

proxy_pass http://api:3001;

のように書きましたが上手く行きませんでした。
ちなみに参考にしたサイトではそれぞれ以下のようになっていましたが、上手く行きません。現在はとりあえず参考にしたサイト（デプロイのの記事）の状態に戻しています（以下の状態）

conf
1server_name localhost;
2
3proxy_pass http://myapp;

その他の可能性

もしかするとそもそも内部でエラーが発生している可能性もありますが、開発環境で正常に動作したこと、wslコンソール上で特にこれといったエラーが発生していないことからあまり可能性は高くないと思われます。
また、通常であればrails側にアクセスが行くとどのような処理を実行したのかがコンソール上に表示されます（docker-compose upの場合、開発環境ではそうだった）が、本番環境ではrailsコンテナがリクエストを受け取っているはずなのに処理が表示されません。そのため、nginx＝＞railsの処理の部分が一番怪しいと考えております。
・何かしらアドバイスがあればよろしくお願いいたします。不備があれば追記いたします。

追記

web_1    | 192.168.144.1 - - [26/Aug/2022:13:04:22 +0000] "OPTIONS /api/v1/auth/sessions HTTP/1.1" 200 5 "http://localhost:4000/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"

このように、nginxコンテナ一部に200レスポンスが返ってきている部分がありました。よってRails側に問題がある可能性が出てきました。ですが、indexアクションが失敗する原因が考えられません。なぜnginxを導入した場合にこのような現象が起きるのかよく分かりません。

更に追記

j
1web_1    | 172.31.0.1 - - [26/Aug/2022:23:22:53 +0000] "GET / HTTP/1.1" 404 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"