docker nginx-proxy laravel mysqlでlaravelサイトにアクセスすると502 Bad Gatewayになってしまう

Question

ローカル環境macのM1チップパソコンで以下の事をやりたいです。

nginx-proxyでサブドメイン別に違うwebサービスにアクセスを分けたい。
・「wordpress.localhost」にアクセス　⇨ 一つのdockerプロジェクトフォルダで作ったwordpressにアクセス。
・「localhost」にアクセス　⇨ 一つのdockerプロジェクトフォルダで作ったlaravelにアクセス。
・SSL化もしたいのでjrcs/letsencrypt-nginx-proxy-companionでテストSSL(いわゆるオレオレ認証局と理解しているつもりです)を使っている。

初めてのtratailで質問です。
不慣れゆえ、説明不足や失礼な点などございましたら、ご指摘いただけると幸いです。
どうかよろしくお願いします。

やった事などを先に書いて、ソースコードは最後にまとめて記載します。

●やった事は下記です。wordpressの方にアクセスは無事できました。

フォルダ構造
dockerNginxProxyApps/
// laravelのdockerプロジェクトフォルダ
laravel-project/
src/ laravelのデータが入っています
docker-compose.yml
docker/
db/
Dockerfile
my.conf
app/
Dockerfile
php.ini

// wordpressのdockerプロジェクトフォルダ
wordpress/
    html/    wordpressのデータが入っています
    docker-compose.yml

// nginxプロキシとSSL化のdockerプロジェクトフォルダ
shared/
    docker/
        /encrypt        自動生成されたlet'sEncrypt関連のデータが入ってると理解(しているつもり)です。
    docker-compose.yml

やった事・症状
・cdコマンド移動でshared内で　docker-compose up -d　をする。　無事nginx-proxyの各コンテナが起動する
・ブラウザで　http://localhost にアクセス。　無事「503 Service Temp...」が表示される

・cdコマンド移動でwordpress内で　docker-compse up -d をする
⇨ 無事wordpressの各コンテナが起動する
・ブラウザでhttp://wordpress.localhostにアクセス。　無事wordpressの設定画面が表示される

・あえて　docker-compose down　でwordpressを停止する。
（laravel-projectをup -dした時のポート衝突などを避けて、laravel-projecrt自体がうまくいくか試すため）

・cdコマンド移動でlaravel_project内で　docker-compse up -d をする
⇨ 無事laravel_projectの各コンテナが起動する
・http://localhost　にアクセス　⇨　「502 Bad Gateway」が表示され、laravelが表示されず失敗

現在、ここでハマっている状態です。

●ハマってから、確認したのは以下です。

・cdで移動でlaravel_project内で　docker-compose logs app　でログを確認、以下が表示される

Attaching to laravel_project_app_1
app_1 | [20-Jun-2022 12:37:43] NOTICE: fpm is running, pid 1
app_1 | [20-Jun-2022 12:37:43] NOTICE: ready to handle connections

・docker network inspect nginx-proxy　で確認
⇨ nginx-proxyやlaravel-project関連のコンテナも表示された。
⇨ つまりnetworkに所属はしてくれていると予想。

●以下が各docker-compose.ymlのソースです。

・shared/docker-compose.ymlのソース

version: '3.7'

services:
nginx-proxy:
image: jwilder/nginx-proxy
container_name: nginx-proxy # letsencrypt-nginxで使うし、通常一つだから
privileged: true
environment:
- "DHPARAM_GENERATION=false"
ports:
- 80:80 # httpでアクセスするとこのポート
- 443:443 # httpsでアクセスするとこのポート
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
- proxy:/usr/share/nginx/html
- proxy:/etc/nginx/vhost.d
- ./docker/encrypt/certs:/etc/nginx/certs:ro
# - ./conf.d/proxy.conf:/etc/nginx/conf.d/proxy.conf:ro # 設定を上書きするときはconf.d内に「.conf」拡張子で追加する
restart: always
labels:
com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy: "true"

letsencrypt-nginx:
image: jrcs/letsencrypt-nginx-proxy-companion
container_name: letsencrypt-nginx # 通常一つだから
privileged: true
environment:
- NGINX_PROXY_CONTAINER=nginx-proxy
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
- proxy:/etc/nginx/vhost.d
- proxy:/usr/share/nginx/html
- ./docker/encrypt/certs:/etc/nginx/certs:rw
restart: always
depends_on:
- nginx-proxy

networks:
default:
name: nginx-proxy

volumes:
proxy:

・wordpress/docker-compose.ymlのソースコード

version: "3.7"

services:
wordpress:
image: wordpress #WordPressのイメージ
# ports: # ポートの指定はnginx-proxyでするのでここではしない
# - "80:80"
volumes:
- ./html:/var/www/html #docker_wordpress/html にデータがマウントされる
environment:
- WORDPRESS_DB_HOST=mysql:3306 # 「dbのservice名: ﾎﾟｰﾄ番号」にする
- WORDPRESS_DB_NAME=wordpress_db
- WORDPRESS_DB_USER=user
- WORDPRESS_DB_PASSWORD=user_pass_Ck6uTvrQ

  # ローカルでのnginx-proxyとletsencrypt-nginxの設定
  - VIRTUAL_HOST=wordpress.localhost # nginx-proxyのホスト設定
  - LETSENCRYPT_HOST=wordpress.localhost # Let's Encryptのホスト設定、上と同じはず 
  - LETSENCRYPT_EMAIL=[e-mail] #Let's Encryptのﾒｰﾙ設定
  - LETSENCRYPT_TEST=true # Let's Encryptのテストか、trueでテスト
  - CERT_NAME=default # ローカルで認証局を立てる、本番のテストまで必要
  - HTTPS_METHOD=noredirect # httpsへリダイレクトを無効、本番では不要

depends_on:
  - mysql
restart: always

mysql:
image: mariadb #MariaDBのイメージ
ports:
- "33060:3306" #MacのMySQLとポートがバッティングする場合は変える 例) - "33060:3306"

volumes:
  - db_test_mysql:/var/lib/mysql
environment:
  - MYSQL_ROOT_PASSWORD=user_pass_Ck6uTvrQ
  - MYSQL_DATABASE=wordpress_db
  - MYSQL_USER=user
  - MYSQL_PASSWORD=user_pass_Ck6uTvrQ
restart: always

networks:
default:
external:
name: nginx-proxy

volumes:
db_test_mysql:

・laravel_project/docker-compose.ymlのソースコード

services:
app: # サービス名
build:
context: .
dockerfile: ./docker/app/Dockerfile
environment:
# .envファイルで指定したDB系の値を${}で読み込ませています。
# docker-compose configでdb側のenvironmentも同じ値である事を確認済みです。
- DB_CONNECTION=${DB_CONNECTION}
- DB_HOST=${DB_HOST}
- DB_PORT=3306
- DB_DATABASE=${DB_DATABASE}
- DB_USERNAME=${DB_USERNAME}
- DB_PASSWORD=${DB_PASSWORD}

  # ローカルでのnginx-proxyとletsencrypt-nginxの設定
  - VIRTUAL_HOST=${LOCAL_HOST} # nginx-proxyのホスト設定
  - LETSENCRYPT_HOST=${LOCAL_HOST} # Let's Encryptのホスト設定、上と同じはず 
  - LETSENCRYPT_EMAIL=[e-mail] #Let's Encryptのﾒｰﾙ設定
  - LETSENCRYPT_TEST=true # Let's Encryptのテストか、trueでテスト
  - CERT_NAME=default # ローカルで認証局を立てる、本番のテストまで必要
  - HTTPS_METHOD=noredirect # httpsへリダイレクトを無効、本番では不要

volumes:
  - ./src/:/app
depends_on:
  - db

db: # サービス名
build:
context: .
dockerfile: ./docker/db/Dockerfile
ports:
# 他のプロジェクトのdbのポートとぶつかるなら33060:3306などにする。
# 右側の[:3306]は変えてはダメっぽい
- 3306:3306
environment:
MYSQL_DATABASE: ${DB_DATABASE}
MYSQL_USER: ${DB_USERNAME}
MYSQL_PASSWORD: ${DB_PASSWORD}
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
TZ: 'Asia/Tokyo'
volumes:
- mysql-volume:/var/lib/mysql

networks:
default:
external:
name: nginx-proxy

volumes:
mysql-volume:

初心者丸出しの恥ずかしいメモが点在するのは、優しく流していただけると幸いです。

理解はざっくりと以下の認識しかできておらず、とても浅いです。
・jwilder/nginx-proxyでドメインexample.jpやサブドメインaa.example.jpで各アプリへアクセスを可能にするもの
・jrcs/letsencrypt-nginx-proxy-companionでオレオレSSLと本番用SSLをテストや設定が簡単にできるもの
・wordpressやlaravel（php-fpm）のアプリ系のimageのymlの環境変数にVIRTUAL_HOST〜METHODを指定すればnginx-proxyで振り分け後のURLやSSL系の設定ができ、設定後ブラウザでアクセスすれば繋がり表示されるはず

この理解程度の私は、wordpressの方はうまくいったのになぜlaravelの方はうまくいかない？といった状態で検索しても分からず実力不足ゆえに途方に暮れています。

別の練習で、docker・nginx（プロキシじゃないイメージ）・laravel・mysqlでうまく動作していたlaravel_projectをコピペして変えたものが上記のdocker-compose.ymlです。
このnginxとnginx-proxyで変える必要があるのは「環境変数にVIRTUAL_HOST〜METHODを指定」と「 ポートはnginx-proxyの方から入るからlaravelのymlのappサービスには記述しない」でいけると思っていました。

何となく大きな見落としや理解自体が間違っている気がしているのですが、分からずうまく動かず状態です。
どうかご教授くださりますよう、お願いいたします。

Answer 1

自己解決しました。

大きく勘違いしていました。わかった事と修正した内容です。
・nginx-proxyはリバースプロキシとしてドメインやサブドメインでどのwebサーバーに行くのか振り分けている（今回はそう指定している）。
・そしてnginx-proxyはwebサーバーではない事がわかった。ここが今回の勘違いでした。
・だからwebサーバーのimageのnginxのサービスがないlaravel_projectへは正常なアクセスができるわけがない。

・laravel_projectのdocker-compose.ymlにnginxのイメージのサービスを加えてポートなどを調整。
・localhostにアクセスしてみると、見事laravel初期画面が開きアクセス成功。

・wordpressがnginx-proxyでうまくいっていたのは、wprdpressのimage自体にwebサーバーが含まれているから（ここは多分です。ビルドインサーバーの可能性もありますが、今回は調べていません）。

このような当たり前のことで数日悩んでいたのが恥ずかしいです。そして大変失礼しました。