AWS前后端通信：本地Symfony与React应用Nginx 80端口转发配置问询

看起来你已经有了一个不错的开头，我来帮你完善这个Nginx配置，实现同时转发React（3000）和Symfony（8000）到80端口的需求。这里有两种常用的方案，你可以根据自己的场景选择：

方案一：同一域名下基于路径区分 #

适合前后端API通过固定前缀（比如/api）区分的场景，用户访问example.info会进入React前端，访问example.info/api会转发到Symfony后端。

完整Nginx配置如下：

server {
    listen 80;
    server_name example.info www.example.info;

    # 转发React前端服务（端口3000）
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        # 支持React开发环境的热重载（WebSocket）
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        # 传递真实请求信息给后端
        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;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }

    # 转发Symfony后端服务（端口8000）
    location /api {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        # Symfony需要这些头来生成正确的URL和识别客户端IP
        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;
        proxy_set_header Forwarded "for=$remote_addr;proto=$scheme";
    }
}

方案二：基于子域名区分 #

适合前后端完全独立的场景，用不同子域名分别指向两个服务，比如app.example.info对应React，api.example.info对应Symfony。

完整Nginx配置如下：

# React前端服务
server {
    listen 80;
    server_name app.example.info;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

# Symfony后端服务
server {
    listen 80;
    server_name api.example.info;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        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;
        proxy_set_header Forwarded "for=$remote_addr;proto=$scheme";
    }
}

配置后测试与生效步骤 #

1. 保存配置：把上面的配置保存到Nginx的站点配置目录，比如/etc/nginx/sites-available/example.conf（Linux/macOS）或者C:\nginx\conf\sites-enabled\example.conf（Windows）。
2. 启用配置：Linux/macOS下创建软链接到启用目录：

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

3. 验证配置语法：

   sudo nginx -t
   

   如果输出nginx: configuration file /etc/nginx/nginx.conf test is successful就说明配置没问题。
4. 重启Nginx：

   sudo systemctl restart nginx
   # 或者用service命令
   sudo service nginx restart
   

5. 启动后端服务：确保React（npm start）和Symfony（symfony server:start或php -S 127.0.0.1:8000 -t public）已经正常启动。
6. 本地测试：修改本地hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts；Linux/macOS：/etc/hosts），添加对应域名映射：

   127.0.0.1 example.info www.example.info app.example.info api.example.info
   

   之后就可以在浏览器访问对应的域名/路径测试了。

常见问题排查 #

• 502 Bad Gateway：检查React和Symfony服务是否正常启动，端口是否正确，Nginx是否能访问本地端口（一般无需额外权限，除非有防火墙拦截）。
• Symfony生成URL错误：在Symfony的config/packages/framework.yaml中添加信任代理配置：

  framework:
    trusted_proxies: ['127.0.0.1']
  

  确保框架识别Nginx的转发头。
• React热重载失效：确认配置中的Upgrade和Connection头是否正确，这两个头是支持WebSocket热重载的关键。
• 外部无法访问：确保服务器的80端口已经开放（防火墙规则允许入站），云服务器还需要在安全组中添加80端口的放行规则。

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