Angular Universal项目Docker镜像中新增API请求返回404如何解决

排查步骤及解决方案 #

1. 确认server.ts转发规则已编译到生产包 #

• 首先核对server.ts中新增的/new-api转发逻辑是否和原有/api-1、/api-2的规则完全对齐，重点检查是否漏写pathRewrite规则、路径匹配规则是否写错
• 本地执行npm run build:ssr后，打开dist/[你的项目名]/server/main.js，搜索new-api关键词，确认新增的转发逻辑确实被编译到了生产包中

注意：本地npm start走的是Angular CLI自带的开发服务加载proxy.config.json，但SSR生产环境的转发完全依赖server.ts中编写的Express路由规则，和proxy.config.json没有任何关联，你Dockerfile中拷贝的proxy.conf.json在生产环境不会被调用

2. 核对universal.interceptor.ts配置 #

• 确认拦截器中对/new-api前缀的请求处理逻辑和原有两个API完全一致，没有漏加前缀、误判前缀的问题
• 如果拦截器是基于环境变量匹配API前缀，检查生产环境配置文件environment.prod.ts中是否已经添加了new-api对应的配置项

3. 修正Docker构建逻辑避免本地产物问题 #

• 你当前的Dockerfile直接拷贝本地的./node_modules和./dist目录，很容易出现本地构建产物遗漏配置、和容器环境不匹配的问题，建议调整为在容器内完成全量构建：

FROM node:14.15.5-alpine3.13 as builder
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build:ssr

FROM node:14.15.5-alpine3.13
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY --from=builder /usr/src/app/package*.json ./
COPY --from=builder /usr/src/app/dist ./dist
RUN npm ci --only=production
ENV PORT=80
EXPOSE $PORT
CMD [ "npm", "run", "serve:ssr" ]

4. 新增日志确认路由优先级 #

• 在server.ts的/new-api转发逻辑中添加访问日志，部署后触发请求确认请求是否匹配到了对应转发路由：

server.get('/new-api/*', (req, res) => {
  console.log('收到new-api请求:', req.path);
  // 保留原有转发逻辑
})

• 如果日志中没有对应请求输出，说明/new-api的路由优先级低于Angular通用页面路由，把/new-api的路由注册代码移到server.get('*', ...)处理SSR页面渲染的代码前面即可。

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