Python (Django) & React の仕組みの学習と触って試す
#プログラミング

created: 2025/12/26, modified: 2026/01/04

今まではPHP & CakePHP、新しいことにも挑戦ということで Python Django React をAWSで構築してみようと思います。2025-26 の年末年始はこれで決まり

AWSはアカウントだけある。
Python
Django
React

バージョン調べ

Python

12/27 時点で最新版は3.14.2
2000年に2.xが出て、2008年に3.xが出た、後方互換がないっぽい別物。
3.xはだいたい毎年アップデートしている。10月に3.14.0が出て、だいたい毎月マイナーアップデートがあるようだ

Latest News
https://blog.python.org/
Python - Wikipedia
https://ja.wikipedia.org/wiki/Python

Django

12/27 時点で最新版は5.2.9
2年ごとにメジャーアップデート。最後のマイナー版(5だったら5.2)がLTS (long-term support)。
5.2を入れようかな

Django ダウンロードページ
https://www.djangoproject.com/download/
Django - Wikipedia
https://ja.wikipedia.org/wiki/Django

Django サポート表 2025-12

React

12/27 時点で最新版はv19.2.1

v19 (2024-10)
v18.3.1 (April, 2024)
v17.0.2 (March 2021)

React バージョン
https://ja.react.dev/versions
React - Wikipedia
https://ja.wikipedia.org/wiki/React

AWS サーバー構築と各種インストール

Djangoの初期画面が表示されました

AWS EC2 でPython Django React を構築 2025-12 AWS のアカウントはすでに作ってありましたので、EC2でサーバーを構築し、Py usual.tools

ブラウザのリクエストからレスポンスまでの流れ

nginx + Gunicorn + Django のリクエストフロー図解

【１】ブラウザ → nginx（80番）

ユーザーがブラウザで http://django-5.usual.tools にアクセス
ブラウザが TCP 80番ポートで EC2 に接続
HTTP リクエスト送信

このリクエストを最初に受けるのが、Server Block です。

// /etc/nginx/conf.d/django-5.conf
server {
    listen 80;
    server_name django-5.usual.tools;
    ...
}

【２】nginx の中での「振り分け」

React のビルド済み静的ファイル

// /etc/nginx/conf.d/django-5.conf
location /static/ {
    alias /var/www/django-5/staticfiles/;
}
location /media/ {
    alias /var/www/django-5/media/;
}

パスが /static/... のリクエスト
→ nginx は /var/www/django-5/staticfiles/... からファイルを探して、そのまま返す。
/media/... も同様に /var/www/django-5/media/... から返す。
このルートでは Django（Gunicorn）には一切行きません。

「nginx ↔ ブラウザ」で完結します。

それ以外（Django による動的処理）

// /etc/nginx/conf.d/django-5.conf
location / {
  proxy_pass http://127.0.0.1:8001;
  ...
}

/static/ と /media/ にマッチしなかったすべてのパスがここに来ます
nginx は、受け取ったリクエストを 127.0.0.1:8001 (Gunicorn) に「代理で投げる」（リバースプロキシ）

【３】Gunicorn（Django）側での処理

# /etc/systemd/system/gunicorn-django5.service
ExecStart=/var/www/django-5/venv/bin/gunicorn \
    --workers 3 \
    --bind 127.0.0.1:8001 \
    myproject.wsgi:application

ExecStart の設定内容