Django + React

$ cd 

$ mkdir React

$ cd React

$ django-admin startproject Config

$ mv Config backend
$ cd backend

$ python -m venv .venv

$ ln -sf ./.venv/lib/python3.11/site-packages django

$ source ./.venv/bin/activate

$ pip install --upgrade pip setuptools wheel

$ pip install django djangorestframework yfinance ta django-cors-headers pandas

$ python manage.py startapp api

【postgres】

$ sudo dnf install python3.11-psycopg2 python3.11-devel

$ pip install psycopg2

$ cd

$ cd React

$ npx create-react-app frontend

$ cd frontend

$ npm install axios chart.js react-chartjs-2

【起動】

$ cd backend

$ ./manage.py runserver

$ cd frontend

$ npm start

【httpd に組み込み】

$ npm run build

【typescriptアプリ】-- 純粋な React アプリ

$ npx create-react-app frontend_ts --template typescript

【next.js typescriptアプリ】Next.js の App Router構成 を使ったプロジェクト

$ npx create-next-app@latest frontend_nx   --app   --typescript   --tailwind   --eslint   --src-dir   --import-alias "@/*"

my-next-app/

├─ app/

│  ├─ page.tsx         ← ルートページ（App Router形式）

├─ public/

├─ styles/

│  └─ globals.css

├─ tailwind.config.ts

├─ postcss.config.js

├─ tsconfig.json

├─ next.config.js

├─ package.json

 npm install next-auth chart.js react-chartjs-2 axios

【起動】

cd my-next-app

npm run dev

【３つのタイプ】

(1) frontend : CRA (create-react-app)

(2) frontend: React + TypeScript（CRA + TS）

(3) Next.js（App Router / SSR 対応）

【まとめ表】

構成 方法 本番ビルド Apache連携

Django　　　　mod_wsgi or Gunicorn+Proxy collectstatic 　WSGIScriptAlias 使用

React (CRA) 静的ビルド (build/) npm run build 　　　　　　  DocumentRoot に設置

Next.js（静的）next export npm run build && export 　　　/out を配信

Next.js（SSR） Node.jsサーバー＋mod_proxy npm run build  　Apacheから3000番へProxy

【Django 側】

(1) Config/settings.py

(2) Config/urls.py

(3) api/views.py

(4) api/urls.py

(5) api/serializers.py

(6) templates/index.html

【REACT CRA】

(1) package.json に追記（ "proxy": "http://localhost:8000")

(2) rm App.js;  cp App.jsx

✅ 前提

• OS: Rocky Linux などの Linux サーバー

• Apache: httpd（mod_proxy & mod_rewrite 使用）

• Django: mod_wsgi または gunicorn 経由で Apache に連携

• フロントエンドはビルド済みの静的ファイルとして公開

• 各フロントエンドは /var/www/html/your-app/ にデプロイする前提

---

(1) React (CRA-)

📦 ビルド方法

bash
cd your-cra-project
npm run build

→ build/ ディレクトリが出力される

🌍 Apache 設定（例：/etc/httpd/conf.d/myapp.conf）

apache
<VirtualHost *:80>
    ServerName yourdomain.com

    DocumentRoot /var/www/html/cra-app/build
    <Directory /var/www/html/cra-app/build>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # APIルーティングを Django へプロキシ
    ProxyPass /api http://127.0.0.1:8000/api
    ProxyPassReverse /api http://127.0.0.1:8000/api
</VirtualHost>

---

(2) React + TypeScript（CRA + TS）

📦 ビルド方法

bash
npx create-react-app your-app --template typescript
cd your-app
npm run build

→ 出力は通常の CRA と同じく build/ ディレクトリ

🌍 Apache 設定

CRA の設定と 同じ構成で OK です（build/ 出力の構造が同じなので）

---

(3) Next.js（App Router / SSR 対応）

Next.js は SSR や API を含むため、静的配信だけでなく Node.js サーバーとして動かす必要があります。

📦 ビルド手順

bash
cd your-nextjs-app
npm run build
npm run start
# または pm2 などで常駐化

🌍 Apache + Next.js を連携する構成

Next.js は 3000 番ポートなどで動いている前提で、Apache はそれをリバースプロキシします。

apache
<VirtualHost *:80>
    ServerName yourdomain.com

    ProxyPreserveHost On
    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

もしくは、Next.js を next export で静的ファイルにする方法（制限あり）もあります：

bash
npm run build
npm run export

→ out/ フォルダを /var/www/html/next-exported/ に配置し、CRA と同様に Apache から静的提供

---

✅ Django 側の構成

1. mod_wsgi 利用（Apache で直接 Django を実行する場合）

bash
<VirtualHost *:80>
    ServerName yourdomain.com

    WSGIDaemonProcess mysite python-path=/var/www/django-app:/usr/local/lib/python3.9/site-packages
    WSGIProcessGroup mysite
    WSGIScriptAlias /api /var/www/django-app/mysite/wsgi.py

    <Directory /var/www/django-app/mysite>
        <Files wsgi.py>
            Require all granted
        </Files>
    </Directory>
</VirtualHost>

2. gunicorn 経由でリバースプロキシする構成（Next.js と相性良い）

bash
gunicorn --bind 127.0.0.1:8000 mysite.wsgi:application

apache
ProxyPass /api http://127.0.0.1:8000/
ProxyPassReverse /api http://127.0.0.1:8000/

---

🔚 結論：おすすめ構成

構成	方法	メリット	注意点
CRA / TS	Apache で静的配信	シンプル・高速	SSRやAPIが使えない
Next.js	Node.js + Apacheリバースプロキシ	SSR, API, 高機能	Node.js サーバー管理が必要
Django	mod_wsgi or gunicorn + Apache	高機能・柔軟性	設定がやや複雑

---

必要であれば、httpd.conf や systemd による gunicorn / next.js 常駐化、Let's Encrypt 証明書対応まで含めて、実運用レベルでの手順も提供できます。ご希望があればお知らせください。