部署React应用至G-Cloud后出现白屏问题求助

你的问题出在app.yaml的静态资源路由配置错误，导致React打包后的静态资源无法被正确加载，最终引发页面白屏。

问题分析 #

原配置中第一个handler的static_dir: build配置错误：React执行npm run build后，编译后的js、css、图片等静态资源会统一放在build/static目录下。而你的配置把/static路径映射到build根目录，GCP会去build根目录下查找对应资源，自然找不到目标文件，触发404错误。

修正后的app.yaml配置 #

runtime: nodejs20
env_variables:
 REACT_APP_BASE_URL: https://api-dot-gd-goenka-school.uc.r.appspot.com/
handlers:
  # 匹配所有/static开头的请求，指向正确的静态资源目录
  - url: /static
    static_dir: build/static
  # 处理所有其他请求，返回index.html以支持React单页路由
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

额外检查项 #

• 部署前确认已执行npm run build生成完整的build目录，且build/static文件夹存在并包含编译后的静态资源
• 重新部署时使用gcloud app deploy命令，确保新配置被正确应用

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