Django(8000端口)与React(3000端口)部署时单端口运行的另类方案

方案1：将React构建产物作为Django静态文件部署 #

该方案让Django同时承载API服务和前端静态资源，所有请求统一走Django端口，适合希望完全依托Django生态的场景。

步骤： #

1. 打包React应用
   在React项目根目录执行打包命令：

   npm run build
   

   生成的build文件夹包含编译后的前端静态资源（html、css、js、媒体文件等）。

2. 迁移并配置静态资源路径

   • 将React的build文件夹复制到Django项目根目录，重命名为react_build（可自定义，后续配置对应即可）。
   • 修改Django项目settings.py的静态文件与模板配置：

     import os
     from pathlib import Path
     
     BASE_DIR = Path(__file__).resolve().parent.parent
     
     # 静态文件根目录（部署时收集静态资源的目标路径）
     STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
     # 额外静态资源查找路径，指向React打包产物
     STATICFILES_DIRS = [
         os.path.join(BASE_DIR, 'react_build', 'static'),
     ]
     # 模板目录添加React的index.html所在路径
     TEMPLATES = [
         {
             'BACKEND': 'django.template.backends.django.DjangoTemplates',
             'DIRS': [os.path.join(BASE_DIR, 'react_build')],
             'APP_DIRS': True,
             'OPTIONS': {
                 'context_processors': [
                     'django.template.context_processors.debug',
                     'django.template.context_processors.request',
                     'django.contrib.auth.context_processors.auth',
                     'django.contrib.messages.context_processors.messages',
                 ],
             },
         },
     ]
     

3. 配置路由统一入口
   在Django主urls.py中添加规则，让非API请求都返回React的入口页面：

   from django.views.generic import TemplateView
   from django.urls import path, include
   
   urlpatterns = [
       # 你的API路由
       path('api/', include('your_api_app.urls')),
       # 所有非API请求转发到React index.html
       path('', TemplateView.as_view(template_name='index.html')),
   ]
   

4. 部署阶段收集静态资源
   执行Django静态资源收集命令，将所有分散的静态文件统一归集到STATIC_ROOT：

   python manage.py collectstatic
   

5. 启动服务
   开发环境直接运行python manage.py runserver，生产环境用Gunicorn等WSGI服务器启动，所有请求都走Django端口。

方案2：使用Nginx反向代理统一端口 #

该方案无需修改Django和React代码，通过Nginx将单个端口的请求按需转发到两个服务，适合需要保留独立服务架构的场景。

步骤： #

1. 启动基础服务

   • 启动Django服务（绑定所有IP，方便Nginx访问）：

     python manage.py runserver 0.0.0.0:8000
     

   • 启动React生产服务（用serve工具托管打包产物）：

     npm install -g serve
     serve -s build -l 3000
     

2. 配置Nginx反向代理规则
   创建Nginx站点配置文件（如/etc/nginx/sites-available/react-django.conf）：

   server {
       listen 80; # 对外统一端口，可改为8080等
       server_name localhost; # 替换为你的域名或IP
   
       # API请求转发到Django服务
       location /api/ {
           proxy_pass http://127.0.0.1:8000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
   
       # 前端请求转发到React服务，处理React路由刷新问题
       location / {
           proxy_pass http://127.0.0.1:3000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           try_files $uri $uri/ /index.html;
       }
   }
   

3. 启用配置并重启Nginx

   • 建立配置软链接到启用目录：

     sudo ln -s /etc/nginx/sites-available/react-django.conf /etc/nginx/sites-enabled/
     

   • 验证配置合法性：

     sudo nginx -t
     

   • 重启Nginx生效：

     sudo systemctl restart nginx
     

   此时访问http://localhost（或你的域名），所有请求都走80端口，API自动转发到Django，前端转发到React。

方案3：用django-webpack-loader整合开发与生产环境 #

该方案支持开发阶段热重载，生产环境自动打包整合，通过插件让Django与Webpack联动，适合需要统一开发体验的场景。

步骤： #

1. 安装依赖

   • React项目安装Webpack相关工具：

     npm install webpack webpack-cli webpack-dev-server webpack-manifest-plugin --save-dev
     

   • Django项目安装插件：

     pip install django-webpack-loader
     

2. 配置Webpack
   在React项目根目录创建webpack.config.js：

   const path = require('path');
   const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
   
   module.exports = {
       entry: './src/index.js', // React入口文件路径
       output: {
           path: path.resolve(__dirname, '../django_project/static/react'), // 输出到Django静态目录
           filename: '[name].[contenthash].js',
           publicPath: '/static/react/',
       },
       plugins: [
           // 生成manifest文件，供Django读取资源路径
           new WebpackManifestPlugin({
               fileName: '../webpack-stats.json',
           }),
       ],
       // 按需添加babel、css-loader等loader配置
       module: {
           rules: [
               {
                   test: /\.jsx?$/,
                   exclude: /node_modules/,
                   use: 'babel-loader',
               },
               {
                   test: /\.css$/,
                   use: ['style-loader', 'css-loader'],
               },
           ],
       },
   };
   

3. 配置Django

   • 在settings.py中注册插件并添加配置：

     INSTALLED_APPS = [
         ...
         'webpack_loader',
     ]
     
     WEBPACK_LOADER = {
         'DEFAULT': {
             'BUNDLE_DIR_NAME': 'react/',
             'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
         }
     }
     

   • 在Django模板中引入React资源：

     {% load render_bundle from webpack_loader %}
     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="UTF-8">
         <title>整合页面</title>
     </head>
     <body>
         <div id="root"></div>
         {% render_bundle 'main' %}
     </body>
     </html>
     

4. 开发与生产切换

   • 开发阶段：同时启动Webpack Dev Server和Django服务，支持热重载：

     # 终端1：启动Webpack Dev Server
     npx webpack serve --mode development
     # 终端2：启动Django服务
     python manage.py runserver
     

     访问Django的8000端口即可看到React页面，API请求正常。
   • 生产阶段：打包React资源，收集静态文件后启动服务：

     npx webpack --mode production
     python manage.py collectstatic
     python manage.py runserver # 生产环境用Gunicorn/uWSGI
     

内容的提问来源于stack exchange，提问作者Rohan Jangid