Nginx无法找到index.html，部署React应用遇404问题求助

核心问题排查与修复步骤 #

1. 路径拼写错误
   你提到静态文件目录是/home/ec2-user/difo/digital-input-for-operators-react/dist，但第一个配置里的root路径写的是digital-interfaces-for-operators-react——目录名里的input和interfaces不一致，这会直接导致Nginx找不到文件，返回404。先把路径修正为正确的绝对路径。

2. 单页应用路由处理
   React是单页应用，前端路由需要Nginx配合处理：当用户刷新页面或直接访问子路由时，Nginx会尝试找对应路径的文件，而这些文件实际不存在，所以不能返回404，应该转发到index.html让React路由处理。把location /里的try_files规则修改为：

   try_files $uri $uri/ /index.html;
   

3. 避免相对路径
   第二个配置里的root page用了相对路径，Nginx的相对路径是相对于它的工作目录（通常是/usr/share/nginx/html），很容易出错，一律使用绝对路径更稳妥。

4. 文件权限检查
   确保Nginx进程有权限访问你的静态文件目录：

   # 给Nginx用户（通常是nginx）赋予目录权限
   sudo chown -R nginx:nginx /home/ec2-user/difo/digital-input-for-operators-react/dist
   # 设置目录和文件的合理权限
   sudo chmod -R 755 /home/ec2-user/difo/digital-input-for-operators-react/dist
   sudo chmod -R 644 /home/ec2-user/difo/digital-input-for-operators-react/dist/*
   

5. 配置验证与重载
   修改配置后，先验证语法是否正确：

   sudo nginx -t
   

   如果提示test is successful，再重载配置：

   sudo nginx -s reload
   

6. 端口与防火墙检查

   • 确认服务器的防火墙（比如firewalld/iptables）已经放行3000端口：

     # firewalld示例
     sudo firewall-cmd --add-port=3000/tcp --permanent
     sudo firewall-cmd --reload
     

   • 如果是AWS EC2，还要检查安全组是否允许3000端口的入站流量。

修正后的完整Server块配置 #

server {
    listen 3000;
    server_name difo.ucnet.g-ushin.com localhost;
    access_log /etc/nginx/logs/difo-react.log;
    # 修正后的正确路径
    root /home/ec2-user/difo/digital-input-for-operators-react/dist;
    index index.html index.htm;

    location / {
        # 适配React单页应用路由
        try_files $uri $uri/ /index.html;
    }

    # 可选：给静态资源设置缓存，提升性能
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

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