如何将React+Django+MySQL应用部署到EC2并绑定域名？

1. 调整React服务监听地址 #

React默认仅监听localhost（127.0.0.1），导致外部请求无法触达。需修改服务绑定地址为0.0.0.0，让服务监听EC2的所有网络接口：

• 开发环境启动命令：npm start -- --host 0.0.0.0
• 生产环境：先执行npm run build生成静态文件，再用serve工具启动：serve -s build -l 3000 --host 0.0.0.0

2. 配置Nginx反向代理（生产环境推荐） #

直接暴露React服务稳定性不足，用Nginx做反向代理更可靠，同时能统一处理域名请求和后端转发：

• 安装Nginx：
  Ubuntu/Debian：sudo apt update && sudo apt install nginx
  Amazon Linux/CentOS：sudo yum install nginx
• 编辑站点配置：
  备份默认配置：sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
  打开配置文件：sudo nano /etc/nginx/sites-available/default
  替换为以下内容（替换your-domain.com为你的实际域名）：

  server {
      listen 80;
      server_name your-domain.com www.your-domain.com;
  
      # 转发前端请求到React服务
      location / {
          proxy_pass http://localhost:3000;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  
      # 转发后端API请求到Django服务（假设Django跑在8000端口）
      location /api {
          proxy_pass http://localhost: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;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  }
  

• 验证配置：sudo nginx -t
• 重启Nginx生效：sudo systemctl restart nginx

3. 配置Django允许域名访问 #

修改Django项目的settings.py文件，确保服务接受域名请求：

• 更新ALLOWED_HOSTS：ALLOWED_HOSTS = ['your-domain.com', 'www.your-domain.com', 'EC2弹性IP']
• 添加信任域名到CSRF_TRUSTED_ORIGINS：CSRF_TRUSTED_ORIGINS = ['http://your-domain.com', 'http://www.your-domain.com']（若后续配置HTTPS，替换为https://开头）
• 重启Django服务：如果用gunicorn部署，执行sudo systemctl restart gunicorn；开发环境用python manage.py runserver 0.0.0.0:8000启动

4. 检查EC2安全组规则 #

确保EC2安全组允许HTTP（80端口）入站流量：

• 登录AWS控制台，进入EC2实例的安全组配置页面
• 添加入站规则：类型选HTTP，端口范围80，来源设为0.0.0.0/0（允许所有访问）或指定IP范围

5. 验证域名解析 #

执行nslookup your-domain.com或dig your-domain.com，确认域名解析结果为EC2的弹性IP，确保DNS配置已生效

内容的提问来源于stack exchange，提问作者Revanth Kumar Perla