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

（知識）Vite の出力先について

Viteのデフォルトの出力先はdistディレクトリです。つまり、frontend/distが標準の出力先になります。

設定方法

vite.config.jsまたはvite.config.tsで出力先を変更できます：

export default {
  build: {
    outDir: 'build'  // distからbuildに変更
  }
}

従来のCreate React Appとの違い

• Create React App (CRA): デフォルトの出力先はbuildディレクトリ
• Vite: デフォルトの出力先はdistディレクトリ

Djangoとの連携における推奨

Djangoと連携する場合、どちらの出力先でも問題ありませんが、以下の点を考慮してください：

• DjangoのSTATICFILES_DIRS設定で、フロントエンドのビルド出力先を指定する
• チーム内で統一した出力先を使用する（ドキュメント化推奨）
• Viteを使う場合はdistをそのまま使うのが一般的ですが、CRAから移行した場合はbuildに変更すると混乱が少ない

【１】Vite 側でビルドする

Vite 版（出力先 dist）で、npm run build → Django 経由で配信するところまで

• React(Vite): /var/www/django-5/frontend
• ビルド先: /var/www/django-5/frontend/dist
• Django プロジェクト: /var/www/django-5/myproject
• 本番は「Django（もしくはDjango + Nginx）」から React を配信する構成

Vite 側でビルドする

cd /var/www/django-5/frontend
npm run build

Vite のデフォルトだと、こういう構成で dist ができます：

frontend/
  ├── dist/
  │   ├── index.html
  │   └── assets/
  │       ├── *.js
  │       └── *.css
  └── ...

【２】Django settings.py の設定（Vite 用に修正）

Vite 用に パスを frontend/dist に読み替える 形になります。

# /var/www/django-5/myproject/[settings.py](http://settings.py)

#
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist/assets'),
]

# 
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # ここで index.html をテンプレートとして扱う
        'DIRS': [os.path.join(BASE_DIR, 'frontend/dist')],
        'APP_DIRS': True,
    ...
]

ポイント：

• STATICFILES_DIRS →Vite の JS / CSS は dist/assets 以下に出るので、そこを静的ファイルとして登録
• TEMPLATES['DIRS'] →dist/index.html を Django のテンプレートとして使うために frontend/dist を登録

【３】Django のビューで index.html を返す

SPA のエントリーポイントとして React を返すビューを 1 つ作ります。

3-1. views.py

例：myapp/views.py

from django.views.generic import TemplateView

class ReactAppView(TemplateView):
    template_name = 'index.html'

3-2. urls.py

SPA っぽく「どのURLでもReactに渡す」パターンなら re_path を使います。

myproject/urls.py か、フロント用の urls に追加：

from django.contrib import admin
from django.urls import path, re_path, include
from myapp.views import ReactAppView

urlpatterns = [
    path('admin/', [admin.site](http://admin.site).urls),

    # API は /api/xxx/ で運用
    path('api/', include('myapp.urls')),

    # それ以外のパスは全部 React に渡す
    re_path(r'^.*$', [ReactAppView.as](http://ReactAppView.as)_view(), name='react-app'),
]

これで：

• http://django-5.usual.tools/
• http://django-5.usual.tools/hoge
• http://django-5.usual.tools/users/123

のどこにアクセスしても、Django が dist/index.html を返し、

中で React Router 等がルーティングする、という形になります。

【４】collectstatic（必要なら）

もし Django の STATIC_ROOT + collectstatic 運用をしていて、

Nginx から一括で静的ファイルを配信する構成にしたい場合：

cd /var/www/django-5
python [manage.py](http://manage.py) collectstatic

• STATICFILES_DIRS で指定した frontend/dist/assets の中身も、
• ほかの static と一緒に STATIC_ROOT 配下にコピーされます。
• Nginx で location /static/ { ... } を貼っていれば、React の JS/CSS もそこから配信されるようになります。

（「Django 経由だけで配信する」運用なら collectstatic は必須ではないですが、本番構成では Nginx に任せることが多いので、やっておく想定が多いです。）

【５】動作確認の流れ

ビルド

cd /var/www/django-5/frontend
npm run build

Django 再起動（gunicorn 経由なら）

sudo systemctl restart gunicorn-django5

ブラウザでアクセス

• http://django-5.usual.tools/ にアクセス
• React のトップ画面が出る
• React からの API 呼び出しは /api/hello/ など相対パスにしておくと
• 本番ではオリジン一致になるので CORS 不要

【６】まとめ（Vite 版で重要な差分）

ビルド先

• CRA: frontend/build
• Vite: frontend/dist

静的ファイルディレクトリ

• STATICFILES_DIRS = [BASE_DIR / 'frontend/dist/assets']

テンプレートディレクトリ

• TEMPLATES['DIRS'] = [BASE_DIR / 'frontend/dist']

ビュー

• TemplateView で index.html を返す

URL ルーティング

• re_path(r'^.*$', [ReactAppView.as](http://ReactAppView.as)_view()) で SPA にまとめて渡す