React部署至Nginx服务器后静态资源加载失败求助

问题根源 #

你的Nginx仅配置了监听80端口（HTTP协议），未开启HTTPS对应的443端口服务，导致浏览器发起HTTPS请求时服务器无响应，出现连接拒绝错误。而React构建后生成的静态资源链接为HTTPS开头，这直接引发了资源加载失败。

两种解决思路 #

思路1：配置Nginx启用HTTPS（推荐）

若你的服务需要通过HTTPS访问，按以下步骤操作：

1. 先获取SSL证书（可使用Let's Encrypt提供的免费证书）
2. 修改Nginx配置，添加443端口的server块：

# HTTPS服务配置
server {
    listen 443 ssl;
    server_name xx.xxx.xx.xxx; # 替换为你的服务器IP或域名

    # 填写SSL证书和私钥的实际路径
    ssl_certificate /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private.key;

    # React静态资源服务
    location / {
        root /var/www/myWebsite/client/;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
        # 此处无需proxy相关配置，因为是直接提供本地静态文件
    }

    # API接口反向代理
    location /api {
        proxy_pass http://xx.xxx.xx.xxx:8800;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

# 可选：将所有HTTP请求重定向到HTTPS
server {
    listen 80;
    server_name xx.xxx.xx.xxx;
    return 301 https://$host$request_uri;
}

3. 重启Nginx服务生效：sudo systemctl restart nginx
4. 检查服务器防火墙是否开放443端口，确保外部可正常访问。

思路2：修改React构建配置，生成HTTP路径的静态资源

若暂时不需要HTTPS，只需让静态资源使用HTTP请求：

• 若项目由Create React App创建，在package.json中添加：

  "homepage": "http://xx.xxx.xx.xxx"
  

• 重新构建项目：npm run build
• 将新生成的build文件夹内容重新部署到服务器的/var/www/myWebsite/client/目录

额外提示 #

你原有Nginx配置中，location /块内的proxy_http_version、proxy_set_header等proxy相关指令属于冗余配置（此处是直接提供本地静态文件，并非反向代理其他服务），建议删除这些指令，避免不必要的配置冲突。

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