EC2にデプロイしたアプリで、Nginxの設定ができない

Question

わからないこと

ローカルで開発していたアプリケーションをAWS EC2にデプロイしたのですが、サーバーがうまく動きません。
Nginxの設定がうまくいっていないのではないかと考えています。

前提条件

開発しているアプリケーションの言語は、
React + Django REST frameworkで、
仕様としては、ReactからfetchでAPIを取得するようなものです。

ローカルでは、
Reactサーバーはnpm startを、APIサーバーはDjangoのrunserverを使っています。

このアプリケーションをAWS EC2にデプロイするにあたって、
NginxでReactを動かして、GunicornでAPIを動かす想定です。

現状どうなっているか

Nginxの設定をして、Reactのサーバーは立ち上げることが出来て、画面を表示することはできています。
Gunicornもインストール済で、Gunicornのプロセスは立ち上がっています。

しかし、ReactからfetchでAPIを取得する処理を行うとエラーが起き、
Chromeデベロッパーツールで確認すると下記エラーが起きていました。
(ローカルではこのエラーは出ずに動いていました。)

POST http://localhost:8000/api/obtain net::ERR_CONNECTION_REFUSED

上記エラーの該当箇所のソースです。

export async function PostAPI(url,data){
    const response=await fetch(url, {
        method: "POST",
        mode:'cors',
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(data)
    })
    return response.json()
}

上記を呼び出している箇所のソースです。

    login(event){
        const { cookies } = this.props
        this.render();
        PostAPI("http://localhost:8000/api/login",this.state.data)
        .then((res) => {
            console.log("Receive", res)
            if(res.token){
                cookies.set('token',res.token)
                window.location.href="/Top"
            }else{
                this.setState({message:"NG"})
            }
            
            this.render()
        })
        event.preventDefault()
    }

考えていること

ローカルでは動いていたので、NginxとGunicornの設定に問題があると考えています。
Gunicornについてはインストールして、そのままgunicorn [プロジェクト名].wsgi -Dという感じで使っています。
nginx.confは下記内容です(一部抜粋)。

    server {
        listen       80;
        server_name  [EC2のIP];

        location / {
            proxy_pass http://localhost:3000;
        }
    }

    server {
        listen       localhost:8000;

        location /api {
            proxy_pass http://localhost:8000;
        }
    }

私の考えではNginxがうまく動いていないと考えております。
どなたかわかる方、教えていただけますと嬉しいです。

Comments

[hoshi-takanori]

localhost とは何のことかお分かりでしょうか？ PostAPI("http://localhost:8000/api/login",this.state.data) の localhost を EC2 のホスト名または IP アドレスにする必要があります。また、http://localhost:3000 で webpack-dev-server を動かしてるとしたら、それはあまり良くない気が…。

Answer 1

解決しました！
ご指摘の通り、
PostAPI("http://localhost:8000/api/login",this.state.data) の localhost を EC2 のホスト名または IP アドレスにするという点で解決しました。
webpack-dev-serverの件については、また調べてみます。
ありがとうございました。