在Google App Engine中用Express直接托管静态文件的问题

问题 #

我使用Google App Engine标准环境托管create-react-app前端的静态文件，目前只能通过将client/build/文件复制到server/文件夹实现。我的文件结构如下：

.
├── app.yaml
├── package-lock.json
├── package.json
├── tsconfig.json
├── client
│   ├── build/
│   ├── package-lock.json
│   ├── package.json
│   ├── public/
│   ├── src/
│   └── tsconfig.json
└── server
    ├── dist/
    ├── package-lock.json
    ├── package.json
    ├── src/
    └── tsconfig.json

此前我会将所有源码上传至谷歌云（排除本地构建文件），在云端完成构建后，通过构建脚本将client文件复制到server：

"build": "npm run build:client && npm run build:server && rsync -av --delete client/build/ server/build/"

但我认为这种先构建再复制的方式没必要。我尝试参考示例，通过app.yaml中的handlers直接从client/托管静态文件，同时让服务器处理API请求。我在app.yaml中添加了以下配置：

handlers:
  - url: /static
    static_dir: client/build/static

  - url: /(.*\.(json|ico|js))$
    static_files: client/build/\1
    upload: client/build/.*\.(json|ico|js)$

  - url: /.*
    script: auto

并修改了app.ts中的路由：

// Routes
app.use('/auth', authRouter);
app.use('/api', apiRouter);
...

// Serve the React app
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../client/build', 'index.html')); // before it was just '../build' instead
});

但访问前端时出现404错误。请问：

1. 正确的做法是否就是将client/build/的构建文件复制到server/？如果是，原因是什么？
2. 在本地还是云端构建步骤中执行复制更好？
3. 否则，我需要修改哪些handlers或路由配置才能解决问题？

解答 #

1. 不是必须复制构建文件 #

你遇到404的原因是当前的app.yaml配置和路由逻辑存在冲突，同时可能忽略了部署时文件是否存在的问题，并非必须复制文件才能实现。

2. 问题出在哪里 #

• app.yaml配置缺陷：你的配置里没有处理根路径/和单页应用的其他路由，导致访问前端页面时直接走到script: auto交给服务器，但服务器的get('*')可能因为路径问题无法找到index.html，或者部署时client/build目录未被正确包含（比如被.gcloudignore排除）。
• 路由冲突：app.yaml中url: /.*会让所有请求都先走服务器，而服务器返回index.html的路径是否正确取决于__dirname的位置——如果server编译后输出到server/dist，../../client/build是正确的，但前提是client/build在部署包中存在。

3. 正确的配置修改 #

调整app.yaml handlers

优先处理静态资源和前端页面，再把API请求交给服务器：

handlers:
  # 处理React打包后的静态资源目录
  - url: /static
    static_dir: client/build/static
    expiration: "365d" # 静态资源设置长期缓存

  # 处理其他独立静态文件（含css、图片等，之前漏了这些类型）
  - url: /(.*\.(json|ico|js|css|png|jpg|jpeg|gif|svg))$
    static_files: client/build/\1
    upload: client/build/.*\.(json|ico|js|css|png|jpg|jpeg|gif|svg)$
    expiration: "30d"

  # 处理根路径，直接返回首页
  - url: /
    static_files: client/build/index.html
    upload: client/build/index.html

  # 仅把API和Auth请求交给服务器处理
  - url: /api/*
    script: auto

  - url: /auth/*
    script: auto

  # 单页应用的所有其他路由，返回index.html（解决刷新页面404问题）
  - url: /.*
    static_files: client/build/index.html
    upload: client/build/index.html

调整服务器路由

因为app.yaml已经处理了所有前端页面的请求，服务器只需要保留API路由即可，删掉app.get('*')这段代码，避免冲突：

// Routes
app.use('/auth', authRouter);
app.use('/api', apiRouter);
// 移除 Serve the React app 的代码

确保部署时client/build存在

• 如果是云端构建：确保你的构建脚本正确生成client/build，并且.gcloudignore没有排除这个目录。
• 如果是本地构建：提前在本地执行npm run build:client，再把client/build一起上传，注意.gcloudignore不要排除它。

4. 本地还是云端构建？ #

• 本地构建：推荐在CI/CD流程（比如GitHub Actions）中完成构建，提前验证构建结果，减少云端构建时间，避免云端环境的依赖问题。
• 云端构建：适合需要依赖云端特定资源或环境的场景，但要确保构建脚本稳定，并且构建后的文件能被部署流程正确识别。

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