Google Cloud App Engine自定义域名MIME类型异常求助

核心问题定位 #

根据描述，本质是自定义域名首页请求静态资源时返回404（服务器返回404页面的HTML，导致MIME类型不匹配），但子域名、其他路由或通过路由切换到首页时正常，说明静态资源路径解析在首页直接请求场景下存在异常。

针对性解决方案 #

1. 修正Express静态资源路径配置 #

确保express.static使用绝对路径，适配App Engine的部署环境：

const path = require('path');
// 用绝对路径指定静态资源目录，避免部署时相对路径解析错误
app.use(express.static(path.join(__dirname, 'dist/client')));

同时确认Vite生产环境的base配置正确：

// vite.config.js
export default defineConfig({
  base: '/', // 自定义域名下保持根路径即可
  // ...其他SSR相关配置
})

2. 调整App Engine handlers优先级 #

确保静态资源handler优先级高于SSR的catch-all规则，修改app.yaml：

runtime: nodejs20

handlers:
  # 优先匹配静态资源，覆盖所有JS/CSS/静态文件请求
  - url: /(.*\.(js|css|png|jpg|svg|ico))$
    static_files: dist/client/\1
    upload: dist/client/(.*\.(js|css|png|jpg|svg|ico))$
    secure: always

  # 剩余请求交给SSR服务处理
  - url: /.*
    script: auto
    secure: always

注意：static_files路径必须和部署后实际的静态资源目录完全一致，App Engine会优先匹配更具体的URL规则。

3. 清除自定义域名的CDN缓存 #

若自定义域名配置了Cloud CDN，缓存的旧响应可能导致问题：

• 登录GCP控制台，进入Cloud CDN页面，清除对应域名的缓存
• 检查负载均衡配置，确保后端服务指向当前正确的App Engine版本
• 确认域名解析记录（A/AAAA）正确指向GCP负载均衡IP，无旧记录残留

4. 验证静态资源路径有效性 #

在浏览器开发者工具中，复制首页请求失败的静态资源URL（如/assets/index-xxxx.js）直接访问：

• 若返回404，说明路径映射错误，需检查Express或App Engine的静态资源配置
• 若返回正确资源，可添加缓存控制头优化请求：

app.use(express.static(path.join(__dirname, 'dist/client'), {
  maxAge: '1d',
  setHeaders: (res, filePath) => {
    if (filePath.match(/\.(js|css)$/)) {
      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
    }
  }
}));

5. 检查部署后的文件结构 #

通过Cloud Shell确认App Engine实例中的文件结构：

# 查看当前版本信息
gcloud app versions describe [你的版本ID] --service default
# 进入应用实例检查文件
gcloud app ssh --service default --version [你的版本ID]
ls -la dist/client/

确认静态资源确实存在于dist/client目录下，无路径缺失或名称错误。

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