Minikube集群中Angular 15无法路由至K8s后端服务问题求助

1. 确认Angular环境变量配置与构建流程 #

Angular生产构建会固化环境变量，确保你用的是生产环境配置文件（environment.prod.ts），并在代码中正确引用：

• 在environment.prod.ts中定义后端地址：

  export const environment = {
    production: true,
    apiUrl: 'http://backend.namespace.svc.cluster.local:8000'
  };
  

• 前端请求代码必须使用该变量拼接路径：

  this.http.get(`${environment.apiUrl}/user/`);
  

• 构建时指定生产环境：ng build --configuration=production，禁止用ng serve构建镜像（该命令是本地开发用，会强制请求指向localhost:4200）。

2. 调整前端容器的Nginx配置 #

如果用Nginx托管前端，需要配置反向代理将API请求转发到后端服务，避免请求落到前端容器本地：

• 编写nginx/default.conf配置文件：

  server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
  
    # 代理所有API路径到后端服务
    location /user/ {
      proxy_pass http://backend.namespace.svc.cluster.local:8000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  
    # 处理Angular单页应用路由刷新问题
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

• 在Dockerfile中复制配置到镜像：

  FROM nginx:alpine
  COPY dist/your-angular-app /usr/share/nginx/html
  COPY nginx/default.conf /etc/nginx/conf.d/default.conf
  

3. 验证K8s环境变量注入（若使用运行时变量） #

如果需要在K8s中动态注入后端地址，需让Angular支持运行时读取环境变量：

• 在index.html的<head>中添加全局变量占位符：

  <script>
    window['env'] = {
      apiUrl: '{{API_URL}}'
    };
  </script>
  

• 在Dockerfile中用sed替换占位符：

  RUN sed -i "s|{{API_URL}}|$API_URL|g" /usr/share/nginx/html/index.html
  

• 在K8s Deployment中配置环境变量：

  env:
    - name: API_URL
      value: "http://backend.namespace.svc.cluster.local:8000"
  

• 前端代码中通过window['env'].apiUrl获取地址发起请求。

4. 排查请求路径错误 #

检查前端请求代码：如果直接写/user/而未拼接后端地址，Nginx会将请求转发到前端容器的80端口，因无对应路由导致404。确保所有API请求都带上完整后端地址，或通过Nginx代理路径转发。

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