DjangoとReact連携、本番環境へ配信
#プログラミング

created: 2026/01/04, modified: 2026/01/04

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 にまとめて渡す

DjangoとReact連携、本番環境へ配信 #プログラミング