Google Cloud部署NodeJS/React应用访问报404错误排查

部署后返回404是app.yaml静态资源路径配置错误导致的：
你本地执行npm run preview能正常运行，本质是vite会读取vite-project/dist目录下的构建产物提供服务，但你当前的app.yaml配置里，根路径/指向的是Top_Level_Directory根目录下的index.html，这个文件在你的目录结构里根本不存在，GAE找不到对应文件自然返回404。

另外你当前配置还有三个遗留问题：

• 配置的/vite-project路由指向源码目录完全无效，部署静态站点不需要上传jsx源码、node_modules这类开发阶段文件，只需要dist目录下的构建产物即可
• 没有配置SPA路由回退规则，就算修复了首页路径，后续刷新React Router控制的子路由时还是会出现404
• 配置的nodejs14运行时早已结束官方支持，存在兼容和安全风险

1. 先进入vite-project目录执行npm run build，确认dist目录内是最新的构建产物（你本地preview正常说明这步大概率已经完成，校验即可）
2. 替换Top_Level_Directory下的app.yaml为以下配置：

runtime: nodejs20
env: standard

handlers:
  # 匹配静态资源目录
  - url: /assets
    static_dir: vite-project/dist/assets
  # 匹配站点图标
  - url: /favicon.svg
    static_files: vite-project/dist/favicon.svg
    upload: vite-project/dist/favicon.svg
  # 所有其余路径统一返回index.html，适配前端路由
  - url: /.*
    static_files: vite-project/dist/index.html
    upload: vite-project/dist/index.html

3. 在Top_Level_Directory根目录新建.gcloudignore文件，排除不需要上传的文件，缩减部署体积：

node_modules/
vite-project/node_modules/
*.jsx
*.css
vite-project/index.html
.git
.gitignore

4. 回到Top_Level_Directory目录重新执行gcloud app deploy，部署完成后访问目标地址即可正常加载应用。

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