Python (Django) & React の仕組みの学習と触って試す

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

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の初期画面が表示されました

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

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

1. ユーザーがブラウザで http://django-5.usual.tools にアクセス
2. ブラウザが TCP 80番ポートで EC2 に接続
3. 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 の設定内容

• gunicorn が 3ワーカーで起動
• 127.0.0.1:8001 を LISTEN
• アプリ本体は myproject.wsgi:application

データの流れ

1. nginx から 127.0.0.1:8001 に HTTP リクエストが飛んでくる
2. Gunicorn がそのリクエストを受け取る
3. Gunicorn が myproject.wsgi:application（Django）に渡す
4. Django の中で処理をして Gunicorn に返す
5. Gunicorn がそれを HTTP レスポンスとして nginx に返す

Django 処理の理解と初期画面のカスタマイズ

DjangoフレームワークにおけるHTTPリクエストの処理フロー。WSGIを通じたリクエストの受信から、URLconfによるルーティング、viewでのビジネスロジック実行などDjango内部の動き。PythonのWebアプリケーション開発における基礎知識として、モジュール検索パスやDRFの役割。

React

DB接続

React と Django 連携、本番環境への配信