React部署gcloud生产环境无法访问favicon及public资源报manifest语法错误

• 静态资源路径配置错误：index.html中favicon引用了src目录下的资源，React生产打包时仅会将public目录下的文件原封不动输出到构建产物中，src目录的非业务代码资源不会被打包，因此本地开发时dev server能代理访问，生产环境无法加载。
• gcloud路由配置错误：当前配置将所有请求都 fallback 到了index.html，因此请求manifest.json、favicon、图标等静态资源时，返回的都是HTML内容而非对应资源文件，浏览器解析manifest时拿到HTML第一行内容就会报语法错误。
• 资源路径不匹配：manifest中配置的icon路径是根目录下的文件，但当前你并未将对应图标放到public目录下，打包后产物中不存在对应路径的资源。

1. 修正资源存放和引用路径 #

• 将src/images/thymelessfavicon.ico、logo192.png、logo512.png全部移动到public文件夹根目录
• 修改index.html中的favicon引用为：

<link rel="icon" href="%PUBLIC_URL%/thymelessfavicon.ico" />

不要使用相对路径指向src目录的资源。

2. 修正gcloud服务配置 #

根据你使用的gcloud服务类型选择对应配置：

如果你使用App Engine部署 #

修改app.yaml配置，增加静态资源路由规则，示例配置如下：

runtime: nodejs18
handlers:
  # 优先匹配所有静态资源请求
  - url: /(.*\.(js|css|json|ico|png|jpg|gif|svg))$
    static_files: build/\1
    upload: build/(.*\.(js|css|json|ico|png|jpg|gif|svg))$
  # 剩余请求走SPA路由 fallback到index.html
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

如果你使用Cloud Run + Nginx部署 #

修改Nginx配置，优先匹配静态文件，不存在再返回index.html：

location / {
  root /usr/share/nginx/html;
  try_files $uri $uri/ /index.html;
}

3. 优化manifest引用（可选） #

移除index.html中manifest标签的冗余crossorigin="use-credentials"属性，避免不必要的跨域校验：

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

4. 重新打包部署 #

执行npm run build重新打包项目，再将新的构建产物部署到gcloud即可。

部署完成后直接访问站点的/manifest.json路径，确认返回内容为正确的JSON格式而非HTML，即说明配置生效。

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