Plesk Windows托管部署React应用时静态资源路径错误无法访问

核心是三层路径规则未对齐，导致资源请求路径和服务端匹配规则错位：

• CRA的homepage字段唯一作用是定义打包产物中index.html内所有静态资源的引用前缀，该值会直接拼接在资源路径前，不会自动适配服务端目录结构或代理规则。
• 当前编写的Express服务将项目内build目录映射为Web服务根路径，服务端可直接响应的资源路径为/static/*（对应本地build/static目录文件）、/index.html（对应本地build/index.html），本身不存在/build/*的路径层级。
• Plesk Windows主机使用IIS做反向代理，默认不会剥离部署子路径前缀：当前Node应用实际挂载在域名下的/build子路径，所有转发到Node服务的请求都自带/build前缀，直接请求/static的流量会被IIS判定为站点根目录下的静态文件，不会转发到Node服务，直接返回404。

两种错误配置的直接触发逻辑：

• 配置"homepage": "./build"时，CRA打包生成的资源前缀为相对路径./build，浏览器访问/build路径下的index.html时，相对路径解析后最终请求地址为/build/build/static/*，Express服务内无对应目录映射，资源加载失败。
• 配置"homepage": "./"时，CRA打包生成的资源前缀为站点根路径/，资源请求直接发往/static/*，该路径请求未被IIS转发到Node服务，直接被IIS拦截返回404。

按以下顺序修改，修改完成后在Plesk面板重启Node应用即可：

• 修改package.json中的homepage字段为应用实际访问的绝对子路径，配置值为"homepage": "/build"。不要使用.开头的相对路径，配置完成后重新执行npm run build，可打开build/index.html校验：所有script、link标签的src、href属性均以/build/static/开头即为配置正确。
• 调整server.js的路由规则，兼容Plesk的代理路径前缀，同时增加前端路由fallback支持（避免后续使用react-router时页面刷新加载404），修改后完整代码如下：

const express = require('express');
const path = require('path');
const app = express();

// 匹配带/build前缀的静态资源请求，适配Plesk代理转发规则
app.use('/build/static', express.static(path.join(__dirname, 'build/static')));
// 兼容直接访问根路径的静态资源请求
app.use(express.static(path.join(__dirname, 'build')));

// 所有路由返回index.html，支持客户端路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT);

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