nginxでリバースプロキシサーバを構築、サブドメインへのアクセスが合ったときに別のnginxでレスポンスを返したい[docker, nginx, docker-compose]

Question

前提

リバースプロキシ(nginx)を構築してサブドメインへのアクセスの際に別に動いているnginxでページを表示させたいです。
下記の図のlocalhost:80(黒線)は正常に動いており、web-site0.localhost:80(赤線)が意図どおりに動いておりません。

実現したいこと

• web-site0.localhost:80(赤線)へアクセスしたとき、web-site0/index.htmlを表示させたいです。

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

web-site0.localhost:80(赤線)へアクセスすると
ブラウザでは502 Bad Gateway
docker compose up でのログでは下記が表示されます。

gateway    | 172.26.0.1 - - [29/Dec/2022:06:56:43 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
gateway    | 2022/12/29 06:56:43 [error] 29#29: *7 connect() failed (111: Connection refused) while connecting to upstream, client: 172.26.0.1, server: web-site0.localhost, request: "GET / HTTP/1.1", upstream: "http://172.26.0.2:8080/", host: "web-site0.localhost"
gateway    | 172.26.0.1 - - [29/Dec/2022:06:56:43 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://web-site0.localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
gateway    | 2022/12/29 06:56:43 [error] 29#29: *7 connect() failed (111: Connection refused) while connecting to upstream, client: 172.26.0.1, server: web-site0.localhost, request: "GET /favicon.ico HTTP/1.1", upstream: "http://172.26.0.2:8080/favicon.ico", host: "web-site0.localhost", referrer: "http://web-site0.localhost/"

該当のソースコード

docker-compose.yml

version: '3.9'
services:
  web-site0:
    image: nginx:latest
    container_name: web-site0
    volumes:
    - ./web-site0:/etc/nginx/html
    ports:
    - 8080:80
    restart: always

  gateway:
    image: nginx:latest
    container_name: gateway
    ports:
      - 80:80
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./html:/etc/nginx/html
    depends_on:
      - web-site0
    restart: always

nginx.conf

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name localhost;
        location / {	
        }
    }

    server {
        listen 80;
        server_name web-site0.localhost;
            location / {
                proxy_pass http://web-site0:8080/;
            }
    }
}

※使用しているコード全体はこちらに上げております。

├── docker-compose.yml
├── html
│   └── index.html # localhost:80(黒線)へアクセスがあった際に表示される
├── nginx
│   └── nginx.conf
└── web-site0
    └── index.html # web-site0.localhost:80(赤線)へアクセスがあった際に表示されたい(現在出来ていない)

再現方法

% git clone https://github.com/Uyutaka/docker-nginx-reverse-proxy.git
% cd docker-nginx-reverse-proxy
% docker compose up 

試したこと

「connect() failed (111: Connection refused) while connecting to upstream」等で検索して解決方法を探しました。

補足情報（FW/ツールのバージョンなど）

% docker compose version
Docker Compose version v2.13.0
% docker version
Client:
 Cloud integration: v1.0.29
 Version:           20.10.21
 API version:       1.41
 Go version:        go1.18.7
 Git commit:        baeda1f
 Built:             Tue Oct 25 18:01:18 2022
 OS/Arch:           darwin/arm64
 Context:           default
 Experimental:      true

Server: Docker Desktop 4.15.0 (93002)
 Engine:
  Version:          20.10.21
  API version:      1.41 (minimum version 1.12)
  Go version:       go1.18.7
  Git commit:       3056208
  Built:            Tue Oct 25 17:59:41 2022
  OS/Arch:          linux/arm64
  Experimental:     false
 containerd:
  Version:          1.6.10
  GitCommit:        770bd0108c32f3fb5c73ae1264f7e503fe7b2661
 runc:
  Version:          1.1.4
  GitCommit:        v1.1.4-0-g5fd4c4d
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0

参考にさせていただいたレポジトリ

参考にさせていただいたレポジトリ

• こちらリバースプロキシを使ってパスごとに切り替えています。
• こちらサブドメイン&リバースプロキシを使っています。実現したいことに近いです。

Comments

[TaichiYanagiya]

"web-site0" コンテナは 80 番ポートで LISTEN していると思われるので、"gateway" コンテナから見て、proxy_pass http://web-site0/; でいいのではないでしょうか。

[Uyutaka]

ご質問ありがとうございました。はい、ご指摘の方法で解決いたしました。

Answer 1

"web-site0"は 80 番ポートで LISTEN しているので、"gateway" コンテナから見て、proxy_pass http://web-site0/; にする必要がある。

解決方法
nginx.confを下記のように変更

#略
    server {
        listen 80;
        server_name web-site0.localhost;
            location / {
                proxy_pass http://web-site0:8080/;　# ここをproxy_pass http://web-site0/;
            }
    }
#略