部署存于Cloud Storage的React构建包至Google App Engine出现404错误

核心问题 #

你误解了gcloud app deploy --bucket参数的用途，同时app.yaml的配置没有正确指向Cloud Storage桶中的静态资源：

• --bucket参数仅用于指定部署工具上传本地部署资源的临时存储桶，不是让App Engine直接从该桶加载运行时的静态文件。
• 当本地没有build目录时，部署工具只上传了app_engine.yaml等3个文件，App Engine服务器上根本没有React构建文件，因此返回404；当本地有build目录时，工具会将构建文件一起上传到指定桶，再部署到App Engine，所以能正常渲染。

正确配置方案 #

要让App Engine直接读取Cloud Storage桶中的React构建文件，需要修改app.yaml，使用google.cloud.storage类型的handler，替代原有的本地静态文件配置：

service: demo-react-app
runtime: python39

handlers:
  # 适配React单页应用路由，所有未匹配的请求返回index.html
  - url: /.*
    google.cloud.storage: gs://dinesh_test_bucket_2023/build/index.html
    secure: always
    redirect_http_response_code: 301

  # 匹配各类静态资源文件（js、css、图片等）
  - url: /(.*\.(json|ico|js|css|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot))$
    google.cloud.storage: gs://dinesh_test_bucket_2023/build/\1
    secure: always

  # 匹配static目录下的资源
  - url: /static/(.*)
    google.cloud.storage: gs://dinesh_test_bucket_2023/build/static/\1
    secure: always

必要的权限配置 #

确保App Engine默认服务账号具有Cloud Storage对象读取权限：

1. 进入Google Cloud控制台的IAM页面
2. 找到App Engine默认服务账号（格式为[项目ID]@appspot.gserviceaccount.com）
3. 为该账号添加Storage Object Viewer角色，授予读取桶内对象的权限

部署验证 #

1. 确认Cloud Storage桶内的构建文件路径正确（如gs://dinesh_test_bucket_2023/build/index.html存在）
2. 执行部署命令（此时本地无需存在build目录）：

gcloud app deploy app_engine.yaml --version=1-0-3 --quiet

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