AWS EC2にデプロイしたFetch APIが動かない

Question

ローカルで開発していたアプリケーションをAWS EC2にデプロイした際に
Fetch APIがうまく動きません。

開発しているアプリケーションの言語は、
React + Django REST frameworkです。

ローカルではDockerを使っており、
サーバーは、Djangoのrunserverを使っています。
(python3 manage.py runserver 0.0.0.0:8000)

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

APIはReactからfetch()を使って呼んでいるのですが、EC2にデプロイすると動きません。
fetch()が動いていないのではないかと思っています。

以下、該当箇所のソースです。
ローカル環境では動いていたものになります。

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

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

EC2上ではAPIを動かすために、Gunicornを使っているので
APITestメソッドに渡している第一引数である
http://localhost:8000/api/testを
http://127.0.0.1:8000/api/testに変えて実行したのですが、動きませんでした。

どなたかわかる方、教えていただけると嬉しいです。

Comments

[hoshi-takanori]

EC2 のサイトのホスト名か IP アドレスを指定しないと動くわけがないでしょうね…。

[k_takahashi]

APITest("http://localhost:8000/api/test",this.state.data)

↓

APITest("http://[EC2インスタンスのIP]/api/test",this.state.data)
と
APITest("http://[EC2インスタンスのIP]:8000/api/test",this.state.data)

でやってみたのですが、動きませんでした...

Answer 1

いろいろ試してみた結果、
fetchが動かない件については、まったく別の原因だったと思われます。
また別で質問します。