python バージョン切り替え

# dnf install python3.9
# dnf install python3.11

# dnf install python3.12

# dnf install python3.13
# alternatives --install /usr/bin/python python /usr/bin/python3.9   1
# alternatives --install /usr/bin/python python /usr/bin/python3.11 2
# alternatives --install /usr/bin/python python /usr/bin/python3.12 3

# alternatives --install /usr/bin/python python /usr/bin/python3.13 4

# alternatives --config python

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

$ 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

✅ 前提

• 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 証明書対応まで含めて、実運用レベルでの手順も提供できます。ご希望があればお知らせください。