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

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

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

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

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

Q&A

解決済

1回答

5457閲覧

reactをフロントエンドにしてdjangoでサーバーを作った場合に呼ばれるアドレス

yyjfou

総合スコア35

Django

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

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

0グッド

0クリップ

投稿2020/10/27 08:50

編集2020/10/27 08:55

react・django初心者です。

reactをフロントエンドにしてdjangoでサーバーを立てた場合には、localhost8000を叩けば全体が表示されるのでしょうか?それともlocalhost3000を叩けば全体が表示されるのでしょうか?

reactをフロントエンドにしたdjangoでサーバーを起動する場合はreactもdjangoも立ち上げる必要がありますが、結局どちらのアドレスを参照しているのかわかりません。

またdjango内にもtemplate機能がありreactを経由せず、djangoのみのtemplateを表示させることもできるはずです。

なので尚更仕組みがわからなくなってしまいました。

プロジェクトの構成は

myapp(Djangoの親アプリケーション) -templates(htmlが入っている)  -views.py -settings.py -reactapp(Djangoの子アプリケーション・reactのファイルが入っている)  -polls(Djangoの子アプリケーション)

です。

reactappのApp.jsで

const App = () => { const [posts, setPosts] = useState(null); useEffect(() => { axios .get('http://localhost:8000/') .then(res=>{setPosts(res.data);}) .catch(err=>{console.log(err);}); }, []); return( <Fragment> </Fragment> ); } export default App;

こんな感じでコードを書いてlocalhostを呼び出しています。
また今後pollsのurlを叩いたらreactのフロントが呼び出されるようにしたいです。
その際どんな感じでコードを書いていけばいいのかわかりません。

アドバイスをお願いします

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

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

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

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

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

sfdust

2020/10/27 12:06

djangoを立ち上げる時は python manage.py runserver と打っていると思いますが、 同時にreactapp側(フロントエンド)を立ち上げる時は、どのように入力しているのでしょうか。 cd reactapp && yarn start  という感じでしょうか?
yyjfou

2020/10/27 12:23

cd reactapp && npm start です
guest

回答1

0

ベストアンサー

通常であればreactappをフロントエンド、djangoをバックエンドとして機能させているはずです。
そして、
reactapp側がport 3000、
django側がport 8000で起動されていると仮定します。

全体を表示する場合は、
http://localhost:3000/
をブラウザのアドレス欄に入力すれば、reactapp側で設定したスタートページ(index等)が表示されるはずです。

そして、質問文にあるようにreactapp内のjavascript側で、
axios.get('http://localhost:8000/')
といった感じで、djangoのサーバー(port8000)に対してapiをたたくようなイメージになると思います。

またdjango内にもtemplate機能がありreactを経由せず、djangoのみのtemplateを表示させることもできるはずです。

その通りです。
ただし基本的には、djangoのtemplateを直接表示できるのは、djangoが立ち上がっているport:8000経由だけです。

たとえば、djangoのtemplateに何か設定していれば
http://localhost:8000/test.html
のようにアクセスして表示することはもちろん可能ですが
port 3000経由でdjangoのtemplateをそのまま表示させることは、基本的にできません。

(もちろん、リダイレクトしたり、javascriptを使って、djangoのtemplateが表示する内容を巧妙に返すようなスクリプトを組めば別ですが)

今後pollsのurlを叩いたらreactのフロントが呼び出されるようにしたいです。

データの基本的な流れはフロントエンド→バックエンドになります。
polls(port:8000)からreactのフロント(port:3000)を呼び出すこと自体は、corsの設定を行えばできると思いますが、
たとえば、発端としてpolls(port:8000)から、reactのフロント(port:3000)に対してデータを投げて、フロント(port:3000)の描画内容を変える設計は、フロントとバックの役割分担としてどうなのかと思います。

一応やり方としては
・一定間隔でフロント(port:3000)から、polls(port:8000)のapiを叩いて、そのたびにpollsから返ってくるデータを調べ、条件を満たしていたら描画を変える。

componentDidMount(){ globalVar.callback = (data) => { // `this` refers to our react component this.setState({...}); }; } //データが返ってきたら発火 globalVar.callback(data);

のようにグローバルクロージャを用いてトリガーする等。
出典:https://stackoverflow.com/questions/31856712/update-component-state-from-outside-react-on-server-response

(Custom event functionを使う例へのリンクも同じ記事内に示されています。
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#adding-event-listeners-or-subscriptions )

投稿2020/10/27 13:02

sfdust

総合スコア1135

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

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

yyjfou

2020/10/27 13:44

ありがとうございます、とても参考になりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問