在Google Cloud App Engine部署CRA与Storybook遇路由异常

核心问题 #

Google App Engine 的 handler 规则是从上到下依次匹配，你的配置存在两个关键问题：

1. 缺少对/storybook（不带尾部斜杠）路径的直接匹配，访问该路径时会触发最后一条.*规则，返回CRA的页面
2. 路径匹配的优先级顺序没问题，但根路径漏匹配导致规则失效

修复后的完整配置 #

runtime: nodejs14
service: inkse-ui-staging
handlers:
  # 匹配 /storybook 根路径（不带尾部斜杠）
  - url: /storybook
    static_files: storybook-static/index.html
    upload: storybook-static/index.html
    expiration: "0m"
    secure: always

  # 匹配 /storybook/ 开头的静态资源目录
  - url: /storybook/static
    static_dir: storybook-static/static
    expiration: "0m"
    secure: always

  # 匹配 /storybook/ 开头的独立静态文件（json/ico/js/png）
  - url: /storybook/(.*\.(json|ico|js|png))$
    static_files: storybook-static/\1
    upload: storybook-static/.*\.(json|ico|js|png)$
    expiration: "0m"
    secure: always

  # 匹配 /storybook/ 下的所有其他路径（SPA路由 fallback）
  - url: /storybook/.*
    static_files: storybook-static/index.html
    upload: storybook-static/index.html
    expiration: "0m"
    secure: always

  # CRA 应用的静态资源目录
  - url: /static
    static_dir: build/static
    expiration: "0m"
    secure: always

  # CRA 应用的独立静态文件
  - url: /(.*\.(json|ico|js|png))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js|png)$
    expiration: "0m"
    secure: always

  # CRA 应用的 SPA 路由 fallback
  - url: .*
    static_files: build/index.html
    upload: build/index.html
    expiration: "0m"
    secure: always

关键修复点说明 #

• 新增/storybook路径匹配：专门处理不带尾部斜杠的根路径请求，直接返回Storybook的首页，避免被CRA的规则拦截
• 保持规则顺序：Storybook相关规则必须放在CRA规则之前，确保所有/storybook开头的请求优先匹配对应规则
• 验证文件结构：部署前确认已正确生成构建文件：CRA的产物在build目录，Storybook的静态文件在storybook-static目录，且目录结构和配置中的映射一致

额外检查项 #

• 执行npm run build-storybook时，确保Storybook的配置（.storybook/main.js）中设置了base: '/storybook'，避免资源路径错误
• 部署前本地测试静态文件路径，确认storybook-static下的资源能正常访问

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