如何让Nginx托管的React前端对接Gunicorn运行的Django后端？

核心问题 #

你的Nginx当前仅负责返回React静态文件，未将API请求转发给Gunicorn运行的Django后端，同时未适配React SPA路由，导致请求路径异常。

解决步骤 #

1. 修改Nginx配置 #

替换sites-enabled/example中的内容，让Nginx同时处理静态文件、SPA路由和API转发：

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /home/ubuntu/fandigger/frontend/build/;
    server_name 你的AWS公网IP;

    # 将所有/api开头的请求转发至Django后端
    location /api/ {
        proxy_pass http://127.0.0.1:8000;
        # 传递必要请求头，避免Django识别异常
        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;
    }

    # 处理React静态文件，找不到文件时返回index.html（适配SPA路由）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

注意：若你的DRF路由前缀不是/api/，需将location /api/替换为实际的路由前缀，比如/api/v1/。

2. 确认React请求路径 #

确保React中的请求均为相对路径，例如使用fetch('/api/users/')而非带域名的绝对路径。本地开发时的proxy配置仅在npm start时生效，生产环境依赖Nginx转发，可直接删除package.json中的proxy配置。

3. 重启服务使配置生效 #

• 重启Nginx：

  sudo systemctl restart nginx
  

• 配置Gunicorn为守护进程（避免终端关闭后进程终止）：
  创建/etc/systemd/system/gunicorn.service文件：

  [Unit]
  Description=gunicorn daemon
  After=network.target
  
  [Service]
  User=ubuntu
  Group=www-data
  WorkingDirectory=/home/ubuntu/fandigger  # 替换为你的Django项目根目录
  ExecStart=/usr/bin/gunicorn --workers 3 --bind 127.0.0.1:8000 myapp.wsgi
  
  [Install]
  WantedBy=multi-user.target
  

  启动并设置开机自启：

  sudo systemctl start gunicorn
  sudo systemctl enable gunicorn
  

4. 验证效果 #

• 访问AWS公网IP，确认React页面正常加载
• 在浏览器控制台测试API请求，例如fetch('/api/你的接口路径')，检查是否能正常返回数据

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