React配置非根路径部署后执行serve -s build黑屏报错如何解决

你遇到的Unexpected token '<'报错本质是：请求JS/CSS等静态资源时，服务器未匹配到对应静态文件，返回了SPA的fallback页面index.html，浏览器尝试把HTML内容当作JS解析，自然会把开头的<识别为非法字符。

1. 配置校验 #

先确认打包后的配置是否正确：

• 执行npm run build后，打开build/index.html，检查所有静态资源引用路径是否为/app/static/xxx开头，确认package.json的homepage配置生效
• 所有引用public目录下静态资源的地方，都要加上process.env.PUBLIC_URL前缀，避免资源404
• 如果你使用React Router v6，更推荐给BrowserRouter加basename属性，不需要每个Route都拼接前缀：

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Route exact path="/home" element={<h1>My home</h1>} />
  {/* 其余路由保持正常路径即可 */}
</BrowserRouter>

2. Nginx核心配置 #

你需要在Nginx配置中添加/app路径的匹配规则，示例配置如下：

server {
    listen 80;
    server_name 你的服务IP或域名;

    location /app {
        alias /你的项目绝对路径/build; # 此处填打包生成的build文件夹的完整路径
        index index.html index.htm;
        try_files $uri $uri/ /app/index.html; # 未匹配到的请求统一fallback到app下的index.html，解决路由刷新404问题
    }
}

注意此处要用alias不要用root，root会自动把location路径拼接到根路径后面，和预期不符；如果你非要用root，需要把build文件夹重命名为app，放到root指定的目录下。

配置修改完成后执行nginx -s reload重启Nginx即可生效。

3. PM2配置（如果需要用PM2托管静态服务） #

如果你不直接用Nginx托管静态文件，要用PM2运行静态服务，按如下操作：

• 全局安装pm2：npm install pm2 -g
• 在项目根目录新建ecosystem.config.js：

module.exports = {
  apps : [{
    name: "react-app",
    script: "npx",
    args: "serve -s build -l 3001",
    env: {
      NODE_ENV: "production"
    }
  }]
}

• 启动服务：pm2 start ecosystem.config.js
• 修改Nginx配置反向代理到PM2启动的服务：

location /app {
    proxy_pass http://127.0.0.1:3001;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    try_files $uri $uri/ /app/index.html;
}

可通过pm2 status命令查看PM2服务运行状态。

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