GCP App Engine部署React应用无法加载GLTF文件求助

核心问题分析 #

你的app.yaml配置里，url: .*规则排在GLTF文件匹配规则前面，App Engine的请求处理是按顺序匹配第一个符合的规则，所以所有请求（包括scene.gltf）都被导向了build/index.html，自然找不到GLTF文件。另外，React项目public文件夹里的文件，执行npm run build后会被复制到build根目录下，你的static_files路径也存在错误。

修正后的app.yaml配置 #

runtime: nodejs20
env: standard
service: default
 
handlers:
# 先匹配静态资源和特定文件，再处理SPA的兜底路由
- url: /static
  static_dir: build/static

- url: /(.*\.(json|ico|js|gltf|bin))$
  static_files: build/\1
  upload: build/.*\.(json|ico|js|gltf|bin)$
  mime_type: >
    application/json; charset=utf-8,
    image/x-icon,
    application/javascript,
    model/gltf+json,
    application/octet-stream

# 最后处理SPA的兜底路由，确保前面的资源都匹配完再走这里
- url: .*
  static_files: build/index.html
  upload: build/index.html

关键修改点 #

• 调整规则顺序：把url: .*放到最后，确保静态资源文件的规则先被匹配到。
• 合并文件类型规则：把gltf、bin和已有的json/ico/js合并到同一个规则里，避免重复配置，同时正确设置对应的mime类型。
• 修正文件路径：React build后，public里的文件在build根目录下，所以static_files应该是build/\1，而不是直接写/scene.gltf，这样能匹配所有根目录下的对应格式文件。

额外验证步骤 #

• 重新执行npm run build，确认build目录下存在scene.gltf和scene.bin文件。
• 使用gcloud app deploy重新部署应用，部署完成后访问https://你的项目ID.uc.r.appspot.com/scene.gltf验证是否能正常下载文件。

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