nginxのリバースプロキシをlocal環境で動作させたいです。

Question

前提・実現したいこと

local環境でnginxのリバースプロキシで下記構成を動かしたいと考えています。
React（フロントエンド）　→　nginx　→　SpringBoot（バックエンド）

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

５０２エラーとなり、バックエンドに接続できません。

nginx_1          | 2019/11/18 00:10:15 [error] 7#7: *7 connect() failed (111: Connection refused) while connecting to upstream, client: 192.168.128.1, server: , request: "POST /api/authentication/uuid HTTP/1.1", upstream: "http://127.0.0.1:8080/api/authentication/uuid", host: "backend", referrer: "http://localhost:3000/"
nginx_1          | 2019/11/18 00:10:15 [warn] 7#7: *7 upstream server temporarily disabled while connecting to upstream, client: 192.168.128.1, server: , request: "POST /api/authentication/uuid HTTP/1.1", upstream: "http://127.0.0.1:8080/api/authentication/uuid", host: "backend", referrer: "http://localhost:3000/"

該当のソースコード

フロントエンドからAPIのパスです。

REACT_APP_API_BASE_URL=http://backend/api

nginxの設定です。
/apiのパスをバックエンドにリバースプロキシしています。

server {
    listen       80;

    location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
    }

    location /api {
          proxy_pass    http://localhost:8080;
          add_header Access-Control-Allow-Origin *;
          add_header Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE, PATCH";
          add_header Access-Control-Allow-Headers "Origin, Authorization, Accept, Content-Type, X-Requested-With, X-studychannel-session-id, X-studychannel-admin-session-id, X-studychannel-uuid";
          add_header Access-Control-Expose-Headers "date, via, x-content-type-options, Authorization, transfer-encoding, x-cache, connection, x-xss-protection, server, x-frame-options, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Headers, X-studychannel-session-id, X-studychannel-admin-session-id, X-studychannel-uuid" always;
          add_header Access-Control-Allow-Credentials true;
    }

    error_page  404 /404.html;
    location = /40x.html {
        root   /usr/share/nginx/html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

server.port=8080（変更せず）

127.0.0.1       backend

試したこと

リバースプロキシの接続先をlocal環境ではなく、AWSの開発環境に向けると問題なく接続ができました。

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

nginx：1.17.5
docker-composeで立ち上げています。

nginx:
    image: nginx:1.17.5
    ports:
      - "80:80"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf

Comments

[t_obara]

nginxの設定にupstreamの設定があるかと思いますが、記述されていないようなので、よくわかりませんが、以下のURLが参考になりませんか？
https://qiita.com/yokomotod/items/46229f0fafd95eb7d867

[kobahiro]

ご回答ありがとうございます。
upstreamの設定は行っていません。upstreamは複数ホストを束ねるための設定という認識ためです。
上記URLの内容も今回の問題とは事象がことなりそうです。

[退会済みユーザー]

状況がよく分かりませんが、Springはどこで動いているのでしょうか？
きちんと説明してください。local環境とは何ですか？AWSとは何を指していますか？
多分そこの説明がないので、回答がないのだと思いますよ。

Spring -> dockerを動かしているホスト上で動作
nginx -> docker-composeで起動するdockerコンテナ上で動作
local環境 -> 上記Springとnginxが動作している環境
AWS -> 上記Springと同じServeletコンテナが動作しているAWS上のどこか

だとすると、多分dockerコンテナからhostへのアクセスが出来ないだけかと
↓の記事を参考にしてyamlを書き換えてください
https://qiita.com/Iju/items/badde64d530e6bade382

仮定が違ってた場合は面倒なので他の方を待ってください。
質問するときは最低限状況が分かるようにしてください。
そうでないと伝言ゲームになってしまいます。

[退会済みユーザー]

あと127.0.0.1はloopbackデバイスを指すので、そうでないデバイスのIPを指定しましょう

[kobahiro]

ご回答ありがとうございます。
拙い質問内容で申し訳ありませんでした。

>dockerコンテナからhostへのアクセスが出来ないだけか
今回の問題はこれが原因でした。
ありがとうございます。

Answer 1

#原因
Docker で起動したコンテナ内からホストOS（ローカルPC）内のプロセスと通信する際に、
localhost と指定しがちだけど localhost だとコンテナ内を指してしまい、
意図した通りに通信することができないため。

#解決方法

MacOSのlocalhostで動作するアプリケーションへの接続は下記で行う。

proxy_pass    http://host.docker.internal:8080;