部署于Google Cloud的Angular项目出现404及静态资源加载失败求助

先排查本地构建产物 #

先确认ng build执行后，本地dist/angular-weather目录里有没有完整的文件——必须要有index.html，还有assets、js、css这些静态资源文件夹。如果你的Angular版本比较新，注意检查angular.json里的outputPath配置，确保构建产物确实输出到dist/angular-weather，别路径错了。

核心问题：app.yaml配置的两个bug #

你当前的app.yaml有两个关键问题，直接导致了404和资源找不到：

• handler顺序搞反了：GAE的handler是按从上到下匹配的，第一个url: /*会把所有请求都拦截，指向index.html，第二个处理静态资源的handler根本不会生效，所以.ico、js/css这些文件永远找不到。
• runtime选错了：纯静态的Angular应用用nodejs20完全没必要，用专门的static runtime更合适，也能避免额外的服务器配置。

推荐修复方案：改用static runtime #

把app.yaml改成下面这样，专门适配Angular单页应用：

runtime: static
service: weather-front

handlers:
  # 先匹配具体的静态资源（图片、css、js等）
  - url: /(.*\.(gif|png|ico|jpg|css|js|map))$
    static_files: dist/angular-weather/\1
    upload: dist/angular-weather/(.*\.(gif|png|ico|jpg|css|js|map))$
    secure: always

  # 剩下的所有请求都指向index.html，支持Angular路由
  - url: /(.*)
    static_files: dist/angular-weather/index.html
    upload: dist/angular-weather/index.html
    secure: always

这里把静态资源的handler放在前面，优先匹配具体的资源文件，剩下的请求都跳转到index.html，既解决了资源找不到的问题，也支持Angular的单页路由跳转。

如果必须用nodejs runtime的修复方法 #

要是你因为某些原因必须用nodejs20，那就得加个简单的Express服务器来处理静态资源和SPA路由：

1. 先装Express：

npm install express --save

2. 在项目根目录建个server.js文件：

const express = require('express');
const path = require('path');
const app = express();

// 托管Angular构建后的静态资源
app.use(express.static(path.join(__dirname, 'dist/angular-weather')));

// 所有非资源请求都返回index.html，支持SPA路由
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/angular-weather', 'index.html'));
});

// 监听GAE指定的端口
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

3. 修改app.yaml指定启动脚本：

runtime: nodejs20
service: weather-front

entrypoint: node server.js

handlers:
  - url: /.*
    script: auto

重新部署验证 #

1. 重新构建项目：

ng build  # 新版本Angular默认是生产构建，老版本可以加--prod参数

2. 重新部署到GAE：

gcloud app deploy

3. 打开应用看看，应该能正常加载index.html和所有静态资源了。

额外排查点 #

如果还是有问题，去看GAE的部署日志：

gcloud app logs read --service=weather-front

日志里会显示具体哪个文件找不到，方便进一步定位路径问题。

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