部署于App Engine的React Webapp显示空白页问题求助

1. 修正Webpack Encore的公共路径配置 #

你的前端资源生成了带/build/前缀的路径（比如/build/images/logo.png），但GAE的配置是从build/目录下读取资源，导致路径重复（实际会查找build/build/images/logo.png），最终触发404。需要调整Encore的公共路径：

打开项目的webpack.config.js，添加或修改setPublicPath配置：

Encore
  // ... 其他现有配置
  .setPublicPath('/') // 设置公共路径为根目录
  .setManifestKeyPrefix('build/') // 保留manifest文件的前缀，不影响前端资源路径

执行npm run build重新构建项目，此时生成的资源路径会变为/images/logo.png，与GAE的配置匹配。

2. 修正app.yaml的路由配置 #

原配置存在两个关键问题：静态文件匹配顺序错误（图片规则被通用规则覆盖）、兜底路由指向了根目录的index.html（但构建后的文件在build/目录下）。替换为以下配置：

runtime: nodejs16
handlers:
# 优先匹配图片资源
- url: /images/(.*\.(gif|png|jpg))$
  static_files: build/images/\1
  upload: build/images/(.*\.(gif|png|jpg))$
# 匹配其他带后缀的静态资源（JS、CSS、字体等）
- url: /(.*\..+)$
  static_files: build/\1
  upload: build/(.*\..+)$
# SPA兜底路由，所有非静态资源请求指向build下的index.html
- url: /.*
  static_files: build/index.html
  upload: build/index.html

3. 重新部署并验证 #

• 执行gcloud app deploy重新部署应用
• 清除浏览器缓存后访问页面，检查资源加载情况

额外排查点 #

• 确认build目录下的index.html中，资源引用路径已变为/images/logo.png这类无build前缀的格式
• 检查GAE控制台的日志，查看是否有资源404的错误信息，进一步定位问题

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