在开发 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 应用。这种集成方式适用于需要前后端共存的项目。
