使用Google Cloud Storage绑定自定义域名部署React应用白屏

• 静态资源路径错位修复
  • 重新构建React应用前，在项目根目录的package.json中新增"homepage": "."配置，保证构建产物内的静态资源全部使用相对路径引用，避免不同域名下出现绝对路径拼接错误。修改完成后重新执行npm run build生成最新构建文件。
  • 排查混合内容拦截问题：控制台报错的脚本请求为http://开头，若自定义域名仅启用HTTPS访问，浏览器会默认拦截非安全HTTP资源请求，导致脚本加载失败。需要在Google Cloud自定义域名配置页，开启HTTP到HTTPS的强制跳转规则，同时检查构建产物内index.html的所有资源引用，确认没有硬编码的HTTP绝对地址。
• App Engine部署配置修正
  • 当前app.yaml的路径配置和实际文件结构不匹配：通过gsutil rsync拉取的example目录，根目录就是build文件夹的内容，不存在嵌套的build/子目录，原有配置中static_files: build/index.html、static_dir: build的路径规则无法匹配到实际文件。同时原配置中两个handler都匹配/路径，会出现规则优先级冲突。
  • 替换为适配React SPA路由的正确app.yaml配置，原配置使用的nodejs10运行时已停止官方支持，需替换为受维护的运行时版本：

    runtime: nodejs20
    handlers:
      - url: /static
        static_dir: static
      - url: /(.*\.(json|ico|js|css|png|jpg|woff2?))$
        static_files: \1
        upload: .*\.(json|ico|js|css|png|jpg|woff2?)$
      - url: /.*
        static_files: index.html
        upload: index.html
    

• 无效操作排障
  • 执行的gsutil web set命令是Cloud Storage静态网站托管的专属配置，对App Engine的流量转发逻辑完全不生效，这部分操作不影响当前部署的运行结果，无需在该方向继续排查。
• 部署后验证
  • 应用重新部署完成后，通过无痕窗口访问自定义域名，排除本地浏览器缓存保存的旧版错位HTML文件的影响，确认静态资源可以正常加载。

内容的提问来源于stack exchange，提问作者Anna Kallenborn