如何将React应用部署到Plesk Obsidian 18.0.54？部署遇404求助

构建前必做步骤 #

• 配置package.json的homepage字段：
  • 根域名部署：设为"/"
  • 子路径部署（如https://xxx.com/my-app）：设为"/my-app/"
    这个字段决定了构建后静态资源的路径，配置错误会直接导致资源加载404。
• 路由适配：
  • 用BrowserRouter的话，部署时需要服务器配置请求转发；如果不想改服务器，换成HashRouter（URL会带#，但无需服务器额外配置）。
• 清理旧构建产物：
  构建前执行rm -rf build（Linux/macOS）或rmdir /s build（Windows），避免旧文件残留干扰。
• 本地预验证：
  安装serve工具（npm install -g serve），执行serve -s build，本地验证构建产物是否能正常运行，提前排除构建本身的问题。

标准部署步骤（以静态服务器为例） #

1. 执行构建：运行npm run build，确认项目根目录生成build文件夹，内含index.html和所有静态资源。
2. 上传文件：将build文件夹内的所有内容（不是build文件夹本身）上传到服务器的目标目录：
   • 根域名部署：上传到服务器的静态文件根目录（如Nginx的/usr/share/nginx/html）
   • 子路径部署：上传到对应子路径目录（如/usr/share/nginx/html/my-app）
3. 服务器配置（以Nginx为例）：
   编辑nginx.conf，添加请求转发规则，确保所有路由请求都指向index.html：

   # 根域名部署
   location / {
       try_files $uri $uri/ /index.html;
   }
   
   # 子路径部署（示例：/my-app）
   location /my-app {
       try_files $uri $uri/ /my-app/index.html;
   }
   

4. 重启服务器，访问对应域名/路径完成验证。

404问题排查要点 #

• 检查浏览器控制台：查看静态资源（CSS/JS）的请求URL是否正确，若资源404，大概率是homepage配置错误或部署路径不对。
• 路由访问404：直接访问子路由（如/about）出现404，说明服务器未配置请求转发到index.html，按上面的服务器配置调整即可。
• 部署文件错误：确认上传的是build文件夹内的内容，而非build文件夹本身，否则访问路径会多一层/build导致404。
• 缓存问题：强制刷新浏览器（Ctrl+Shift+R），排除旧缓存导致的异常。

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