フロントエンドとバックエンドの疎結合化について

Question

フロントエンドをReact、バックエンドをDjangoでオリジナルのウェブアプリケーションを開発中です。RestFrameworkです。

とりあえず、疎結合化させて作っています。Django単体では実際にデプロイし、ユーザー投稿できるサイトを運営し、少人数ですが使っていもらっている感じです。

疑問点

同一オリジンが別オリジンか、どっちが良いのか、ということです。

DjangoのtemplateにReactをBuildして、それらをまるごとVPSやHeroku,AWSなどにデプロイする

もしくは

バックエンドは先程と同じで、Reactをホスティングサービスにデプロイする

という2つの選択肢があると思いますが、どちらがよいのでしょうか。

自分で思うこと

おもにデメリットですが、

• 分けたほうがメンテナンスが楽だが、デプロイ先が分かれてしまうので料金が多くかかってしまう。

• CORSを設定する必要が増える（難しくはないけど、セキュリティの知識がなく不安

わからないこと

特にセキュリティです。
RestFrameworkで生成させたJWTなどのTokenをフロントエンドでCookieで管理するのはググってわかり、実装もさせたのですが、安全と言えるのでしょうか。

加えて質問

近頃、SSGやISRなどを使うNextjsに手を出していますが、このAPIサーバーとしてもDjnagoRestframework（Herokuなどにデプロイ）とNext（Vercelにデプロイ）ということも現実的でしょうか。全く使われないでしょうか。

Answer 1

同一オリジンが別オリジンか、どっちが良いのか、ということです。

個人的には同一オリジン推奨です。
リリース環境は**スケールアウト→スケールアップ（クラウド登場）→スケールアウト（コンテナ登場）**の流れで来ていますが、クラウドで同一オリジンでリリースし、負荷が上がればスケールアップで対応と言うのがお手軽だと思います。

分けたほうがメンテナンスが楽だが、デプロイ先が分かれてしまうので料金が多くかかってしまう。

今時なDockerなどのコンテナを使ってリリースするという手もあります。

CORSを設定する必要が増える（難しくはないけど、セキュリティの知識がなく不安

むしろセキュリティの知識の無い人では動作させられないので取り組む事で知識が増えると思えばいいでしょう
また、このベストアンサーに対する質問者のように、正しく情報を調査出来る能力（大抵の技術者は持ってますが）があれば大丈夫です。
この方法では例えばchromeならエラーで動きませんが、そういった事に対処する調査能力などは必要です。同一オリジンや他のブラウザの場合は知りませんが。

RestFrameworkで生成させたJWTなどのTokenをフロントエンドでCookieで管理するのはググってわかり、実装もさせたのですが、安全と言えるのでしょうか。

JWTだから危険という訳ではなく、どんな情報でも盗られれば危険です。逆に言えばJWTを盗聴されなければ問題ありません。

Answer 2

規模によります。小さい規模でしたら同一オリジンで一気にエイヤッのデプロイで済むかもしれません。しかしスケールさせることを考えると別オリジンで疎結合を保つことが大事になってくるでしょう。同一オリジンでも Kurbernetes を使うといった選択肢も入ってくるかもしれません。大事なのは規模に合わせた運用方法と、柔軟に変更できるアーキテクチャ・組織づくりです。