如何创建并部署React+Django项目至Elastic Beanstalk？求分步指南

核心问题：是否需要分离前后端？ #

分两种场景选择：

• 前后端分离：适合中大型项目、前后端团队独立开发的场景，后端作为API服务，前端单独部署，各自迭代互不影响。
• 整合部署：适合小型项目或快速原型，将React构建后的静态文件嵌入Django，通过Django的静态文件服务和路由统一对外提供，仅需一个EB环境。

方案一：前后端分离部署（推荐中大型项目） #

1. 后端Django准备 #

• 配置跨域：安装django-cors-headers，在settings.py中添加：

  INSTALLED_APPS = [
      # ... 其他应用
      'corsheaders',
  ]
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # ... 其他中间件
  ]
  CORS_ALLOWED_ORIGINS = [
      "https://你的前端EB域名",  # 上线后替换为实际前端地址
      "http://localhost:3000",  # 本地开发用
  ]
  

• 生产环境配置：
  • 设置DEBUG = False
  • ALLOWED_HOSTS添加EB环境域名（如xxx.elasticbeanstalk.com）
  • 将SECRET_KEY改为从环境变量读取：SECRET_KEY = os.environ.get('SECRET_KEY')
• 依赖与静态文件：
  • 生成requirements.txt：pip freeze > requirements.txt，确保包含django、django-cors-headers、gunicorn
  • 收集Django自身静态资源（如admin后台）：python manage.py collectstatic
• EB配置文件：在项目根目录创建.ebextensions/django.config：

  option_settings:
    aws:elasticbeanstalk:application:environment:
      DJANGO_SETTINGS_MODULE: "你的项目名.settings"
      PYTHONPATH: "/opt/python/current/app:$PYTHONPATH"
    aws:elasticbeanstalk:container:python:
      WSGIPath: "你的项目名/wsgi.py"
  container_commands:
    01_migrate:
      command: "python manage.py migrate"
      leader_only: true
    02_collectstatic:
      command: "python manage.py collectstatic --noinput"
  

2. 前端React准备 #

• 构建生产包：在React项目根目录执行npm run build，生成build文件夹
• 单独部署到EB：
  • 初始化EB环境（选择Node.js平台）
  • 将build文件夹内容作为部署包，或通过eb deploy推送，EB会自动配置Nginx服务静态文件

3. 部署与验证 #

• 分别部署后端和前端到各自的EB环境
• 在EB控制台配置后端的环境变量（如SECRET_KEY、数据库连接）
• 测试前端能否正常调用后端API

方案二：整合Django与React（小型项目首选） #

1. 项目结构调整 #

将React项目放在Django根目录下，命名为frontend，最终结构：

your-django-project/
├── frontend/          # React项目
│   ├── src/
│   ├── public/
│   └── package.json
├── your_django_app/
├── manage.py
├── requirements.txt
└── .ebextensions/

2. 配置Django静态与路由 #

• 修改settings.py：

  import os
  
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'frontend/build/static'),
  ]
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  
  TEMPLATES = [
      {
          # ... 其他配置
          'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
          'APP_DIRS': True,
          # ... 其他配置
      },
  ]
  

• 修改主urls.py，添加路由返回React的index.html：

  from django.views.generic import TemplateView
  
  urlpatterns = [
      # ... 你的API路由
      path('', TemplateView.as_view(template_name='index.html')),
  ]
  

3. 构建React与部署准备 #

• 进入frontend文件夹执行npm run build
• 生成requirements.txt（同方案一，需包含django、gunicorn等）
• 添加.ebextensions/django.config（同方案一，确保包含migrate和collectstatic命令）

4. 部署到EB #

• 初始化EB：eb init，选择Python平台
• 创建环境：eb create
• 推送代码：eb deploy
• 部署完成后，EB环境域名将直接访问到React前端，同时可以调用Django API

通用注意事项 #

• 数据库：不要用Django自带的SQLite（EB重启后数据丢失），建议在EB控制台关联RDS实例，通过环境变量配置数据库连接
• 环境变量：敏感配置（如SECRET_KEY、数据库密码）一律通过EB控制台的「配置 > 软件 > 环境属性」设置，不要硬编码到代码
• 安全组：EB环境的安全组需开放80（HTTP）和443（HTTPS）端口，若有内部API调用需配置对应端口规则

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