自定义域名访问GAE部署的React+Flask应用部分页面无法打开 静态JS404报错排查

• 部署在Google App Engine、绑定了自定义域名的React+Flask应用，3天前上线的新版本前期运行正常，今日起自定义域名下部分页面无法打开
• 排查浏览器控制台发现JS包加载失败，具体报错为：GET https://MY_DOMAIN/static/js/main.4eaaa8ad.chunk.js net :: ERR_ABORTED 404
• 交叉验证：访问GAE默认域名MY_PROJECT.appsport.com下的应用，所有功能、静态资源加载均正常
• 待确认的两个疑点：一是故障根因是app.yaml配置错误还是自定义域名DNS映射不当，二是未手动设置$PORT环境变量是否为故障诱因

当前使用的app.yaml配置 #

runtime: python37
env: standard

default_expiration: '5m'

entrypoint: gunicorn -b :$PORT main:app --timeout 150

instance_class: F4

automatic_scaling:
  max_instances: 5
  min_instances: 1
  min_pending_latency: '5s'
  target_cpu_utilization: 0.75

inbound_services:
  - warmup

handlers:
  - url: /static/js/(.*)
    static_files: build/static/js/\1
    upload: build/static/js/(.*)
  - url: /static/css/(.*)
    static_files: build/static/css/\1
    upload: build/static/css/(.*)
  - url: /static/media/(.*)
    static_files: build/static/media/\1
    upload: build/static/media/(.*)
  - url: /(.*\.(json|ico))$
    static_files: build/\1
    upload: build/.*\.(json|ico)$
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /.*
    script: auto

关于$PORT环境变量的疑问 #

• GAE标准运行环境会在应用启动时自动注入$PORT环境变量，指向平台分配的可接收外部请求的端口，无需开发者手动配置。该变量配置逻辑和本次自定义域名下静态资源404的故障无关联，不属于故障诱因。

根因排除 #

• 首先排除DNS映射配置问题：DNS层面的配置故障会导致全站点请求无法正常路由到GAE服务，不会出现“部分静态资源404、其余路由正常、默认域名全量可用”的现象。
• 其次排除app.yaml静态路由配置错误：GAE默认域名下全链路访问正常，已经验证当前app.yaml内的静态资源匹配规则、动态路由规则均能被服务正常识别，不存在配置逻辑错误。

实际故障原因与修复操作 #

• 本次故障本质是自定义域名关联的边缘缓存异常：当前配置了default_expiration: '5m'，静态资源会被GAE边缘节点缓存5分钟，当新版本构建生成带hash值的新静态资源chunk时，自定义域名侧的边缘缓存未及时更新路由规则，会拦截新文件的回源请求，返回404。
• 对应修复步骤：
  • 清空自定义域名关联的所有边缘缓存条目，强制全量资源回源拉取最新版本
  • 验证报错的JS文件链接直接访问是否恢复200状态

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