如何构建Angular应用Docker镜像以通过K8s ClusterIP连接WebAPI

核心原因 #

Angular前端代码运行在用户浏览器中，浏览器处于K8s集群外部，无法解析K8s内部的ClusterIP服务域名（backend-service.managerappstack），因此硬编码该地址会导致前端无法与后端通信。

解决方案（推荐Nginx反向代理方案） #

1. 修正后端容器端口配置 #

确保后端.NET Core应用在容器内监听5000端口（对应你的ClusterIP服务端口）：

• 修改后端Dockerfile的base阶段，添加环境变量：

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 5000
ENV ASPNETCORE_URLS=http://*:5000  # 指定应用监听5000端口

• 重新构建后端镜像并更新K8s部署。

2. 修改Angular应用的API地址 #

将SharedService中的APIUrl改为相对路径，避免硬编码集群内部地址：

readonly APIUrl="/api";

3. 配置前端Nginx反向代理 #

创建nginx.conf文件，将前端的/api请求转发到后端ClusterIP服务：

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  # 处理Angular单页应用路由刷新问题
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 转发API请求到后端ClusterIP服务
  location /api {
    proxy_pass http://backend-service.managerappstack:5000/api;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

4. 编写前端Dockerfile #

使用Nginx作为前端容器的基础镜像，打包Angular应用并配置代理：

# 构建阶段：编译Angular应用
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 替换为你的Angular项目名称，执行生产构建
RUN ng build --configuration production --output-path dist/manager-app

# 部署阶段：用Nginx托管前端并做反向代理
FROM nginx:alpine
# 复制构建好的前端文件到Nginx默认静态目录
COPY --from=build /app/dist/manager-app /usr/share/nginx/html
# 替换Nginx默认配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

5. 重新构建前端镜像并部署 #

构建新的前端镜像，更新K8s前端部署，保持前端服务为LoadBalancer类型。此时浏览器访问前端的LoadBalancer地址后，前端的API请求会通过容器内的Nginx转发到后端ClusterIP服务——Nginx处于K8s集群内部，能够正常解析后端服务域名。

其他可选方案 #

• K8s Ingress方案：配置Ingress资源，将同一个域名的/路径路由到前端服务，/api路径路由到后端ClusterIP服务，前端同样使用相对路径/api调用后端。
• 动态环境变量注入：在前端容器启动时，通过脚本替换Angular环境配置文件中的API地址，使用前端LoadBalancer地址或Ingress域名作为后端地址（但此方案仍需后端对外暴露，不如反向代理或Ingress优雅）。

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