Django+Reactの構築方法（おまけ）
作成したいワークスペースに移動して、以下をそのままコマンド投入するとスケルトンが作成されます。
※こっちが正統かも・・・
■コンテナの構築
（枠を作ってdjango（restframework , cors）をインストール）
＞ python -m venv env
＞ env\Scripts\activate
＞ pip install django
＞ pip install djangorestframework django-cors-headers
■バック処理の構築
（backendの枠を作成する）
＞ django-admin startproject backend
＞ cd backend
＞ python manage.py startapp todo
＞ cd ..
補足：startappを実行する前と後の結果（比較用にtoppageで実行）
結果⇒ startappで指定された名前のディレクトリが作成
apps.pyが変更
キャッシュが作成される（__pycache__）
※startapp のコマンドだけでは初期表示に必要な設定はされていない。
「todo」で指定したモジュールを初期表示させるにはurls.pyに別途設定が必要になります。
■フロント処理の構築
（frontend の枠を作ってreactをテンプレート指定、npmパッケージを最新化）
＞ npm create vite@latest frontend -- --template react
＞ cd frontend
＞ npm install
★バックの起動設定
※「めんどくさいのでVSCodeにサーバー起動を設定する」を参照
★フロントの起動設定
※「めんどくさいのでVSCodeにサーバー起動を設定する」を参照
フロントとバックでそれぞれサービス起動する必要があります。
この点、Javaだとフレームワーク（FW）次第で一般的には明確にフロント、バックのサービス起動が明確になっていないケースが多い気がします。
（個人的には殆ど記憶がない・・・というよりバックはバッチ系の認識）
■corsの設定
フロントバック間でのオリジン間リソース共有を行う必要があるため、設定します。
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = []
CORS_ORIGIN_WHITELIST = (
'localhost:5173',
'http://127.0.0.1:5173/',
)注意：動画では「CORS_ALLOWED_ORIGINS」に設定していますが、corsを理解していないとバックから処理が返却されません。
本来は理解した方が良いですが、動かすために上記はcorsの機能をスキップした設定を行います。
■バックエンドで利用するリソースの設定
rest_framework以降をペーストします。
rest_framework：リクエスト処理するためのベース
corsheaders：corsで利用
todo：今回のバック処理定義
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'todo',
]MIDDLEWARE の設定
独自に作成する場合、利用期限を設定したりしてクラウド環境にデプロイするとAPIとして利用する事が出来たり、課金したりする事も出来る様です。
今回はcorsを利用するため、以下を追加します。
"corsheaders.middleware.CorsMiddleware",
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
"corsheaders.middleware.CorsMiddleware",
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]上記を実行した結果のスケルトン
hello world
■感想
スケルトンだけで派手に2週間くらい浪費しました。
corsは色んな周辺の動きが理解できていない人が頑張っても・・・。
色んなサイトを見たりしてウイルスチェッカーとか色んな設定とかを弄りましたが解決せず、最終的に行き着いたページで地味にhello worldを表示しているサンプルに遭遇した所でスキップ出来る方法がわかりました。
セキュリティー上、必要なのは理解するけど必須扱いとか聞いてなーい。
おかげで「CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない」に始まって解決しても「クロスオリジン要求をブロックしました」でアクセスできない原因は「CORS_ALLOWED_ORIGINS 」に下手な設定をしているからでした。WHITELISTに設定してCORSを全許可にすれば通ります。
本当はダメだけど。（失笑）
補足資料：
Reactを利用するときの注意。
Reactのフック機能