在Kubernetes部署中为Angular的main.js配置SpringBoot连接URL

问题背景 #

我正在开发一个包含MySQL、SpringBoot和Angular前端的项目，需部署到Kubernetes集群中。目前已通过Service实现MySQL与SpringBoot的正常运行，但不清楚如何配置Angular以连接SpringBoot后端。此前尝试在main.js中配置http://sample-service:8080作为连接URL但未成功，希望获取正确的配置方式。

现有配置文件 #

springboot-deployment.yml #

apiVersion: apps/v1
kind: Deployment
metadata:
  name: sample-service
spec:
  selector:
    matchLabels:
      app: sample-service
  replicas: 1
  template:
    metadata:
      labels:
        app: sample-service
    spec:
      containers:
      - name: sample-service
        image: username/sample-service
        imagePullPolicy: IfNotPresent
        ports:
          - containerPort: 8091
        env:
        - name: SPRING_DATASOURCE_URL
          value: jdbc:mysql://mysql:3306/buddyto_mstr_local?useSSL=false&allowPublicKeyRetrieval=true
        - name: SPRING_DATASOURCE_USERNAME
          value: root
        - name: SPRING_DATASOURCE_PASSWORD
          value: root
---
apiVersion: v1
kind: Service
metadata:
  name: sample-service
spec:
  ports:
    - protocol: "TCP"
      port: 8091
      targetPort: 8091
  selector:
    app: sample-service
  type: NodePort

angular-deployment.yml #

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular
spec:
  selector:
    matchLabels:
      app: angular
  replicas: 1
  template:
    metadata:
      labels:
        app: angular
    spec:
      hostname: "sample-service"
      containers:
        - name: angular
          image: username/angular
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: 8080
          env:
          - name: BACKEND_BASE_URL
            value: http://sample-service:8091
---
apiVersion: v1
kind: Service
metadata:
  name: angular
spec:
  ports:
    - protocol: "TCP"
      port: 8080
      targetPort: 8080
  selector:
    app: angular
  type: LoadBalancer

Dockerfile #

FROM nginx:alpine
EXPOSE 8080
EXPOSE 8091
COPY ./dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
ARG BACKEND_BASE_URL=http://sample-service:8091

问题原因 #

之前配置失败的核心原因：Angular代码运行在用户浏览器中，无法解析Kubernetes集群内部的Service域名（sample-service）。该域名仅在K8s集群内部的Pod之间可访问，外部浏览器无法识别。

正确配置方案 #

推荐使用Nginx反向代理的方式，既保证后端服务不直接暴露到外部，又能让前端通过相对路径访问后端API。

步骤1：修改Nginx配置文件（nginx.conf） #

创建支持环境变量替换的Nginx模板，添加反向代理规则：

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 8080;
        server_name localhost;

        root /usr/share/nginx/html;
        index index.html;

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

        # 反向代理后端API请求
        location /api/ {
            proxy_pass ${BACKEND_BASE_URL}/api/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

步骤2：更新Dockerfile #

调整Dockerfile，使用Nginx模板支持环境变量注入，移除无用配置：

FROM nginx:alpine
EXPOSE 8080
# 将Angular构建产物复制到Nginx静态目录
COPY ./dist/ /usr/share/nginx/html
# 将Nginx模板复制到默认模板目录，自动替换环境变量
COPY nginx.conf /etc/nginx/templates/nginx.conf.template
# 构建时传入默认后端地址
ARG BACKEND_BASE_URL=http://sample-service:8091
# 设置环境变量，供Nginx模板使用
ENV BACKEND_BASE_URL=$BACKEND_BASE_URL

步骤3：修正Angular Deployment配置 #

移除无用的hostname配置（不影响前端访问），保持环境变量配置不变：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular
spec:
  selector:
    matchLabels:
      app: angular
  replicas: 1
  template:
    metadata:
      labels:
        app: angular
    spec:
      containers:
        - name: angular
          image: username/angular
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: 8080
          env:
          - name: BACKEND_BASE_URL
            value: http://sample-service:8091
---
apiVersion: v1
kind: Service
metadata:
  name: angular
spec:
  ports:
    - protocol: "TCP"
      port: 8080
      targetPort: 8080
  selector:
    app: angular
  type: LoadBalancer

步骤4：修改Angular前端代码 #

将API请求改为相对路径，无需硬编码后端地址：

// 示例：Angular服务中的API请求
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserService {
  // 使用相对路径，由Nginx反向代理到后端
  private baseUrl = '/api';

  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get(`${this.baseUrl}/users`);
  }
}

其他可选方案 #

1. 暴露SpringBoot服务到外部：将SpringBoot的Service类型改为LoadBalancer，或配置Ingress，然后在Angular中使用该服务的外部IP/域名。但此方式会直接暴露后端服务，安全性较低。
2. 构建时注入环境变量：在Angular构建时通过--configuration或构建参数传入后端地址，生成包含固定地址的前端产物。但此方式无法在K8s部署后动态修改地址，灵活性差。

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