如何用Nginx+域名部署React应用？Docker Compose遇Cloudflare 522错误排查

1. Nginx监听地址配置问题 #

你的Nginx配置中listen 80;可能默认仅绑定本地回环地址（127.0.0.1），导致外部请求（包括Cloudflare节点）无法连接到Nginx。需修改为监听所有网卡：

listen 0.0.0.0:80;

2. ServerName不匹配 #

当前server_name mydomain;为不完整域名，需填写你实际购买的完整域名（如mydomain.com或www.mydomain.com），多域名可用空格分隔：

server_name mydomain.com www.mydomain.com;

确保Nginx能正确匹配对应域名的请求。

3. Docker端口映射与防火墙配置 #

• 在docker-compose.yml中，确认Nginx服务的80端口已正确映射到主机80端口：

  services:
    nginx:
      # 其他配置省略
      ports:
        - "80:80" # 主机端口:容器端口
  

• 检查主机防火墙（如ufw、iptables），开放80端口的入站请求，同时放行Cloudflare节点IP段的80端口流量。

4. 源服务器可达性验证 #

• 确认服务器拥有公网IP，且该IP可通过外部设备/在线工具直接访问http://<你的公网IP>，能正常返回页面。
• 522错误核心是Cloudflare无法连接到源服务器，需确保服务器未被运营商防火墙、安全组等拦截Cloudflare的访问请求。

5. Proxy头优化 #

将proxy_set_header Host $http_host;改为proxy_set_header Host $host;，$host会优先匹配server_name的值，避免客户端Host头异常导致后端服务识别问题：

proxy_set_header Host $host;

内容的提问来源于stack exchange，提问作者Zé Brasa