下面是一个详细的部署指南，介绍如何使用 Kubernetes（K8s）+ Harbor + Ingress 来部署一个 SpringBoot + Vue 前后端分离项目。此教程涵盖从镜像打包、上传 Harbor、K8s 部署、Ingress 配置到前后端联调的完整流程，适合 DevOps 工程师和云原生开发者。

🧩 目录

  1. 环境准备
  2. Harbor 镜像仓库配置
  3. 构建前后端镜像并推送到 Harbor
  4. K8s 编写 Deployment & Service（SpringBoot + Vue）
  5. 配置 Ingress 实现外网访问
  6. 前后端联调与跨域处理
  7. HTTPS 与域名配置（可选）
  8. 常见问题排查
  9. 参考资料与出站链接

1️⃣ 环境准备

  • 已安装 Kubernetes 集群（可使用 Minikube, K3s, 或生产环境 K8s）
  • 安装并配置好 Harbor
  • 安装 Ingress Controller（如 Nginx Ingress）
  • kubectl, docker, helm, node, npm, maven 环境可用

2️⃣ Harbor 镜像仓库配置

Harbor 是私有镜像仓库。我们用它来存储 SpringBoot 和 Vue 构建好的 Docker 镜像。

步骤：

  • 访问 Harbor UI 创建项目（如：myproject）
  • 配置 ~/.docker/config.json 登录 Harbor：
docker login harbor.mydomain.com
  • 设置 Harbor 支持 HTTP（测试用）或启用 HTTPS（推荐）
  • 可在 kubelet 配置中添加 Harbor 认证，以便 K8s 自动拉取私有镜像

3️⃣ 构建前后端镜像并推送到 Harbor

🅰️ SpringBoot 构建后端镜像

Dockerfile：

FROM openjdk:17
VOLUME /tmp
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

构建并推送：

mvn clean package -DskipTests
docker build -t harbor.mydomain.com/myproject/backend:1.0 .
docker push harbor.mydomain.com/myproject/backend:1.0

🅱️ Vue 构建前端镜像

Dockerfile：

# 构建阶段
FROM node:18 AS builder
WORKDIR /app
COPY . .
RUN npm install && npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

构建并推送：

npm install
npm run build
docker build -t harbor.mydomain.com/myproject/frontend:1.0 .
docker push harbor.mydomain.com/myproject/frontend:1.0

4️⃣ Kubernetes 部署 SpringBoot + Vue

🅰️ 后端 Deployment + Service

backend-deployment.yaml：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: springboot-backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
      - name: backend
        image: harbor.mydomain.com/myproject/backend:1.0
        ports:
        - containerPort: 8080
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - port: 80
      targetPort: 8080

🅱️ 前端 Deployment + Service

frontend-deployment.yaml：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
      - name: frontend
        image: harbor.mydomain.com/myproject/frontend:1.0
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-service
spec:
  selector:
    app: frontend
  ports:
    - port: 80
      targetPort: 80

5️⃣ 配置 Ingress 实现外网访问

需要安装 Ingress 控制器（如 Nginx Ingress）：

kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.9.4/deploy/static/provider/cloud/deploy.yaml

ingress.yaml 配置：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: project-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
    - host: vue.mydomain.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend-service
                port:
                  number: 80
    - host: api.mydomain.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: backend-service
                port:
                  number: 80

配置 DNS 或 hosts：

echo "127.0.0.1 vue.mydomain.com api.mydomain.com" >> /etc/hosts

6️⃣ 前后端联调与跨域处理

方法一：Vue dev 模式代理

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.mydomain.com',
        changeOrigin: true
      }
    }
  }
}

方法二：SpringBoot 添加 CORS 配置

@Configuration
public class CorsConfig {
  @Bean
  public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
          .allowedOrigins("*")
          .allowedMethods("GET", "POST", "PUT", "DELETE")
          .allowCredentials(true);
      }
    };
  }
}

7️⃣ HTTPS 与域名配置（可选）

使用 Cert-Manager 自动申请 Let’s Encrypt 证书：

kubectl apply -f https://github.com/cert-manager/cert-manager/releases/latest/download/cert-manager.yaml

配置 Ingress 增加 TLS 支持。

8️⃣ 常见问题排查

问题解决方式
Harbor 无法拉取镜像确认 imagePullSecret 配置、Harbor 是否为 HTTPS
前端无法访问后端 API检查 CORS、代理设置、Ingress 路由是否配置正确
Ingress 404 / backend 服务未通查看 kubectl describe ingress 输出，确认 service 名称、端口匹配
Kubernetes 报 Unauthorized确认 kubeconfig 配置，或者 kubectl 是否有权限
容器 CrashLoopBackOff查看 pod 日志：kubectl logs <pod> 获取详细信息

📘 参考资料与出站链接

如果你需要我继续提供 Helm Chart 封装、自动 CI/CD（如 GitLab CI）、使用 Kustomize 管理环境等进阶内容，请告诉我，我可以为你生成后续教程。