如何将Django+React项目部署至托管平台？域名配置疑问

一、域名配置：单个域名完全可行 #

不需要为前后端分别配置独立域名，两种主流实现方式：

• 子路径模式：主域名yourdomain.com指向React前端，yourdomain.com/api路由转发至Django后端
• 子域名模式：app.yourdomain.com承载前端，api.yourdomain.com作为后端入口（仍属于同一主域名体系）
  其中子路径模式更贴合“单个域名”的需求，下文重点说明该方案。

二、Heroku 全栈部署（前后端同平台） #

适合希望统一管理部署的场景，步骤如下：

1. 调整项目结构：将React项目放在Django根目录的frontend/子文件夹中
2. Django静态文件配置：
   • 在settings.py中设置STATIC_ROOT = BASE_DIR / 'staticfiles'
   • 安装whitenoise并添加至中间件，用于处理静态文件及React打包后的资源
   • 配置Django URL：将根路径''指向React打包后的index.html，API路径统一使用api/前缀
3. 构建配置：
   • 在项目根目录创建Procfile，内容为web: gunicorn your_project.wsgi --log-file -
   • 确保requirements.txt包含gunicorn、whitenoise、django-cors-headers等依赖
   • React项目的package.json中添加build脚本，打包后将build/目录的内容复制到Django的静态文件目录
4. 部署操作：
   • 使用Heroku CLI提交代码，设置环境变量（DEBUG=False、数据库URL、CORS允许域名等）
   • 运行heroku run python manage.py collectstatic收集静态文件

三、前后端分离部署（React→Netlify，Django→Heroku） #

这种方案利用Netlify对静态前端的优化支持，步骤更清晰：

React 部署至 Netlify #

1. 配置package.json的homepage字段，若使用主域名则设为"/"，子路径则对应具体路径
2. 在public/目录添加_redirects文件，内容为/* /index.html 200，解决React Router刷新404问题
3. 登录Netlify，关联GitHub仓库，设置构建命令为npm run build，输出目录为build/
4. 配置自定义域名，将主域名指向Netlify前端项目

Django 部署至 Heroku #

1. 安装django-cors-headers，在settings.py中添加前端域名（Netlify分配域名或自定义域名）至CORS_ALLOWED_ORIGINS
2. 所有API接口路径统一使用api/前缀，避免与前端路由冲突
3. 按照常规Django部署流程：设置DEBUG=False、配置PostgreSQL数据库、添加whitenoise处理静态文件、创建Procfile

单个域名整合（子路径转发） #

在Netlify的netlify.toml中添加重写规则，将/api路径的请求转发至Heroku后端：

[[redirects]]
  from = "/api/*"
  to = "https://your-django-heroku-app.herokuapp.com/api/:splat"
  status = 200
  force = true

完成后，用户访问yourdomain.com加载前端，yourdomain.com/api/xxx自动转发至后端接口。

四、核心注意事项 #

• 环境变量：前后端的敏感配置（如API地址、密钥）需分别在Netlify环境变量和Heroku Config Vars中设置
• CORS校验：后端必须严格配置允许的前端域名，避免跨域请求被浏览器拦截
• 路由隔离：确保前端路由与后端API路径无重叠，推荐用api/作为后端统一前缀
• 静态文件服务：Django需正确收集静态文件，Netlify则自动托管React打包后的静态资源

内容的提问来源于stack exchange，提问作者genuine-developer