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

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のフロントが呼び出されるようにしたいです。
その際どんな感じでコードを書いていけばいいのかわかりません。

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

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 です

行動規範の内容に同意します

回答1件

ベストアンサー

通常であれば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

総合スコア1137