AWS应用负载均衡后S3部署的create-react-app静态资源路径异常如何解决

问题核心是create-react-app默认构建时会以网站根路径作为静态资源的公共前缀，你只需要修改公共路径配置为你的子路径/react-app即可，以下是可落地的方案：

方案1：配置package.json的homepage字段（最简便，官方推荐） #

• 在项目根目录的package.json文件中新增homepage字段：

{
  "name": "你的项目名称",
  "version": "1.0.0",
  "homepage": "/react-app"
}

• 重新执行react-scripts build打包即可，构建后所有静态资源路径会自动加上/react-app前缀，生成的script标签会自动变为<script src="/react-app/static/js/xxx.chunk.js"></script>。

方案2：通过PUBLIC_URL环境变量配置 #

如果不想修改package.json，可通过环境变量指定公共路径：

• 方式A：构建命令中直接传入变量
  执行构建时修改命令为：

  PUBLIC_URL=/react-app react-scripts build
  

• 方式B：在.env文件中配置
  在项目根目录的.env文件（没有则新建）中新增一行：

  PUBLIC_URL=/react-app
  

  之后正常执行react-scripts build即可，该环境变量优先级高于package.json的homepage配置。

方案3：自定义Webpack配置（仅适用于已eject或使用配置覆盖工具的项目） #

如果你已经执行npm run eject暴露了webpack配置，或者使用了customize-cra、craco等工具覆盖CRA默认配置，可以直接修改webpack的publicPath配置：

• 找到webpack配置中的output项，修改publicPath为：

  output: {
    publicPath: '/react-app/'
  }
  

额外注意事项 #

如果你的项目使用了React Router做路由管理，需要给路由组件加上basename配置，避免路由跳转异常：

import { BrowserRouter } from 'react-router-dom'

// 根组件渲染时指定basename
<BrowserRouter basename="/react-app">
  {/* 你的应用其他组件 */}
</BrowserRouter>

配置完成后重新打包，检查build目录下的index.html文件里的静态资源引用路径是否符合预期即可。

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