（三）整合 React 项目静态文件到 Django 项目

在开发 Web 应用时，有时我们需要将前端项目（例如 React 项目）构建后的静态文件整合到 Django 项目中，以便在同一个服务器上提供服务。本文将介绍如何完成这个过程。

步骤

步骤 1：构建 React 项目

首先，确保你的 React 项目已经构建完成。在 React 项目的根目录下运行以下命令：

npm run build

这将生成一个包含静态文件的 build 目录。

步骤 2：准备 Django 项目

确保你的 Django 项目已经设置好，并且具有基本的目录结构和配置。

步骤 3：将静态文件复制到 Django 项目

将 React 项目构建后的静态文件复制到 Django 项目的静态文件目录。

假设 React 项目的 build 目录结构如下：

myreactproject/
|-- build/
|   |-- index.html
|   |-- static/
|       |-- js/
|       |-- css/
|       |-- ...
|-- ...

将 build/static 目录下的所有内容复制到 Django 项目的 static 目录中。你可以使用以下命令：

cp -r myreactproject/build/static/* mydjangoapp/static/

步骤 4：配置 Django 项目

在 Django 项目的 settings.py 文件中，配置 STATICFILES_DIRS，指定包含 React 项目静态文件的目录：

# settings.py

BASE_DIR = Path(__file__).resolve().parent.parent

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    # 其他静态文件目录...
]

步骤 5：运行 collectstatic

运行以下命令，将静态文件收集到 Django 项目的 STATIC_ROOT 目录：

python manage.py collectstatic

步骤 6：配置 Django 路由

在 Django 项目的 urls.py 文件中，配置根路径的路由，以渲染 React 项目的入口文件：

# urls.py

from django.views.generic import TemplateView
from django.urls import re_path

urlpatterns = [
    # 其他路由...
    re_path(r'^.*', TemplateView.as_view(template_name='index.html')),
]

步骤 7：运行 Django 项目

最后，运行 Django 项目的开发服务器：

python manage.py runserver

访问 http://127.0.0.1:8000/，你应该能够看到 React 项目的界面。

结论

通过按照上述步骤将 React 项目构建后的静态文件整合到 Django 项目中，你可以在同一个服务器上方便地托管整个 Web 应用。这种集成方式适用于需要前后端共存的项目。