Plesk Windows部署React应用静态资源404白屏问题咨询

问题复现 #

部署流程与报错信息如下：

1. 通过create-react-app创建项目，执行npm run build生成build静态资源目录
2. 项目根目录创建server.js作为Express启动脚本，代码如下：

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT);

3. Plesk Node.js配置面板设置server.js为启动脚本后，访问站点白屏，浏览器控制台报错：

Failed to load resource: the server responded with a status of 404 () main.2cadfda6.css:1
Failed to load resource: the server responded with a status of 404 () main.c6034903.js:1
Failed to load resource: the server responded with a status of 404 () /favicon.ico:1
Failed to load resource: the server responded with a status of 404 () manifest.json:1
Manifest: Line: 1, column: 1, Syntax error. manifest.json:1
Failed to load resource: the server responded with a status of 404 () main.2cadfda6.css:1
Failed to load resource: the server responded with a status of 404 () manifest.json:1

4. 本地终端执行serve -s build可正常启动运行应用。

故障原因 #

问题和Express基础逻辑无关，核心是Plesk Windows环境配置+路径适配问题：

• Plesk Windows的Node.js插件默认静态资源映射优先匹配站点根目录（通常为httpdocs文件夹），不会自动识别项目内的build目录，请求css、js等资源时找不到对应文件直接返回404
• Windows系统路径解析规则和Linux存在差异，如果Plesk面板内配置的应用根目录和项目实际存放路径不匹配，path.join生成的路径指向错误位置，无法读取build目录下的文件
• 原有server.js仅配置了根路径/的返回规则，没有做单页应用路由兜底，后续使用React Router访问子路径时也会出现404问题

修复步骤 #

按顺序操作即可解决：

• 修正Plesk Node.js面板配置
  进入对应站点的Node.js设置页：
  1. 「应用程序根目录」填写项目代码存放的完整物理路径（例如C:\Inetpub\vhosts\你的域名\react-project，不要默认指向httpdocs目录，除非你把项目直接上传在httpdocs下）
  2. 「文档根目录」填写项目下build目录的完整物理路径（例如C:\Inetpub\vhosts\你的域名\react-project\build）
  3. 确认配置后点击「重启应用」按钮使配置生效
• 调整server.js代码适配Windows路径与SPA路由
  替换原有server.js内容，使用path.resolve规避Windows相对路径解析问题，增加全路径路由兜底：

  const express = require('express');
  const path = require('path');
  const app = express();
  
  // 显式声明build目录绝对路径，规避Windows相对路径解析偏差
  const BUILD_DIR = path.resolve(__dirname, 'build');
  app.use(express.static(BUILD_DIR));
  
  // 所有前端路由统一返回index.html，适配React Router
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(BUILD_DIR, 'index.html'));
  });
  
  const PORT = process.env.PORT || 3000;
  app.listen(PORT);
  

• 校验权限与依赖
  1. 给项目下的build目录分配IIS运行用户、Plesk应用用户的读取、列目录、读取执行权限，避免因权限不足无法读取文件
  2. 在Plesk Node.js面板点击「NPM安装」，确认express依赖已安装在项目本地的node_modules目录中，不要依赖全局安装的express包
  3. 再次重启Node.js应用，按Ctrl+F5强制刷新浏览器清除缓存即可正常访问

校验标准 #

修复后直接访问你的域名/main.xxx.css（对应报错里的css文件名），如果能正常返回CSS文本内容，说明静态资源映射已经生效，页面不会再出现白屏。

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