質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Gunicorn

Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1784閲覧

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

k_takahashi

総合スコア6

Gunicorn

Gunicorn (Green Unicorn)は、Rubyのunicornをベースに開発されたUNIX向けのPython製HTTPサーバです。他のライブラリとの依存関係がないため、容易にインストールして使用できます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/05/19 04:06

ローカルで開発していたアプリケーションを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に変えて実行したのですが、動きませんでした。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/05/19 04:18 編集

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

2021/05/19 04:47 編集

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) でやってみたのですが、動きませんでした...
guest

回答1

0

自己解決

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

投稿2021/05/19 07:03

k_takahashi

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問