AWS EC2实例Nginx部署React应用路径问题求助

1. 修正路径拼写错误 #

你的React构建文件实际路径是：

/home/ubuntu/Desktop/Restaurant_App/front-end/build

但配置文件react.conf里存在多处路径错误：

• 用户名拼写错误：ubantu → 正确为ubuntu
• 目录名拼写错误：Restaurant-App → 正确为Restaurant_App
• try_files指向了完全不存在的路径/home/ubantu/Desktop/app-deploy/public/index.html

修正后的react.conf应为：

server {
    listen 80;
    listen [::]:80;
    root /home/ubuntu/Desktop/Restaurant_App/front-end/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

添加index index.html;让Nginx默认加载目录下的首页文件，try_files的写法是React单页应用标准配置，确保路由跳转正常。

2. 确保Nginx加载该配置文件 #

• 将react.conf移动到/etc/nginx/sites-available/目录下
• 创建软链接到启用目录：

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

• 禁用默认Nginx配置（若仍在启用）：

  sudo unlink /etc/nginx/sites-enabled/default
  

3. 检查目录权限 #

确保Nginx运行用户（通常为www-data）能访问构建目录：

sudo chmod -R 755 /home/ubuntu/Desktop/Restaurant_App/front-end/build
sudo chown -R ubuntu:www-data /home/ubuntu/Desktop/Restaurant_App/front-end/build

4. 验证配置并重启Nginx #

• 检查配置语法是否正确：

  sudo nginx -t
  

• 若提示test is successful，重启Nginx：

  sudo systemctl restart nginx
  

5. 测试访问 #

清理浏览器缓存后，访问EC2实例的公网IP，即可正常显示React应用。

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