ToB企服应用市场:ToB评测及商务社交产业平台

标题: Kubernetes(K8S) + Harbor + Ingress 部署 SpringBoot + Vue 前后端分离项 [打印本页]
作者: 灌篮少年    时间: 2024-10-29 02:40
标题: Kubernetes(K8S) + Harbor + Ingress 部署 SpringBoot + Vue 前后端分离项
1、环境准备

本次团体项目部署利用的是阿里云ECS服务器，服务器地区选择的是香港（选择香港的原因 7.2 章节 Ingress 域名分析用的是阿里云的真实域名所在，如果地区是大陆服务器还需要域名备案），团体部署配置如下：
   
  团体部署架构图如下：

2、搭建 K8S

在服务器1，2，3搭建1主2从K8S集群，详细部署流程参照下述文章链接：https://xuzhibin.blog.csdn.net/article/details/139649056
3、搭建 Harbor

在服务器4上，进行Harbor部署，参考该链接：
https://blog.csdn.net/weixin_46594796/article/details/143113896
Harbor 搭建完毕后，要在 Harbor 中创建一个项目名为test，留着背面操作 Docker 镜像利用：

4、搭建 MySQL

本次部署的前端项目、后端项目、数据库脚本我已经上传到了 Github 上，请自行下载：
https://github.com/Binx98/test-project

在服务器4上，创建启动 MySQL 数据库容器：
  1. docker run -p 3306:3306 --name mysql \
  2. -e MYSQL_ROOT_PASSWORD=root \
  3. -d mysql:8.0
复制代码
通过 Navicat 连接到创建好的 MySQL（账号暗码都是root），先创建 test 数据库，然后将上面提供的 MySQL 数据初始化脚本 init.sql 执行加载完毕，数据导入成功后如下图：

5、构建 SpringBoot 项目镜像

通过 IDEA 打开后端项目，记得调解一下配置文件，将MySQL URL调解为部署MySQL的内网IP所在：

在 IDEA 控制台上，通过 Maven 完成 SpringBoot 项目打包操作：
  1. mvn clean package -Dmaven.test.skip=true
复制代码
打包完毕后，可以看到 target 目录下生成的 Jar 文件：

将JAR包上传到服务器4的 /opt 目录上，然后在 /opt 目录上编写 BackendDockerfile 文件，用于 JAR 包镜像构建，BackendDockerfile 内容如下：
  1. # 基础镜像
  2. FROM openjdk:17
  3. # 宿主机文件 COPY 镜像
  4. ADD backend-project.jar /backend-project.jar
  5. # 容器启动时执行（类似CMD）
  6. ENTRYPOINT ["java", "-jar", "backend-project.jar"]
复制代码
然后在服务器4的/opt目录下，进行镜像构建，命令如下：
  1. cd /opt
  2. docker build -f BackendDockerfile -t backend-project .
复制代码

镜像构建完毕后，通过下述命令启动镜像，判定是否打包成功：
  1. docker run -d -p 8080:8080 backend-project
复制代码
末了通过 公网IP所在:8080/api 访问测试接口，可以查看到后端服务部署成功：

然后将该 SpringBoot项目 镜像推送到 Harbor 当中：
  1. # 登录 Harbor，账号密码：admin/Harbor12345
  2. docker login 服务器4内网IP:9999
  4. # 为镜像打标签
  5. docker tag backend-project:latest 服务器4内网IP:9999/test/backend-project:1.0
  7. # 推送镜像到 Harbor
  8. docker push 服务器4内网IP:9999/test/backend-project:1.0
复制代码
镜像上传完毕后，可以在 Harbor 的 test 项目中查看刚刚上传的镜像：

6、构建 Vue.js 项目镜像

在构建镜像之前，先要调解一下 Vue.js 项目的后端接口URL配置信息（.env.production），利用域名/api，我的域名是k8s.joydevelop.com：

调解完毕后，将 Vue.js 项目进行打包操作，控制台执行下述命令：
  1. npm run build:prod
复制代码

然后将打包后的 dist 文件上传到服务器4 /opt 目录，然后在 /opt 目录上编写 FrontendDockerfile 文件，用于 Vue.js 项目镜像构建：
  1. # 基础镜像 Nginx
  2. FROM nginx
  4. # 拷贝当前目录的文件到指定文件夹下，改文件夹为镜像中的文件夹
  5. COPY ./dist /usr/share/nginx/html
  7. # 拷贝nginx.conf文件到镜像下，替换掉原有的nginx.conf
  8. COPY ./nginx.conf /etc/nginx/nginx.conf
复制代码
接着在服务器4 /opt 目录下，创建 nginx.conf 文件，内容如下（记得调解内网IP所在）：
  1. worker_processes  1;
  3. events {
  4.   worker_connections  1024;
  5. }
  7. http {
  8.   include       mime.types;
  9.   default_type  application/octet-stream;
  10.   sendfile        on;
  11.   keepalive_timeout  65;
  13.   server {
  14.     listen       80;
  15.     server_name  localhost;
  17.     location / {
  18.       root   /usr/share/nginx/html;
  19.       try_files $uri $uri/ /index.html;
  20.       index  index.html index.htm;
  21.     }
  23.     location /api/ {
  24.       proxy_http_version 1.1;
  25.       proxy_set_header Host $host;
  26.       proxy_set_header X-Real-IP $remote_addr;
  27.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  28.       proxy_set_header Connection "";
  29.       # 这里用的是 K8S Service 服务名访问方式（先按照我这么写！）
  30.       proxy_pass http://backend-service.prod-env.svc.cluster.local:8080;
  31.     }
  32.   }
  33. }
复制代码
执行下述命令，完成 Vue.js 镜像构建：
  1. cd /opt
  2. docker build -f FrontendDockerfile -t frontend-project .
复制代码
末了，将构建好的 Vue.js 镜像上传到 Harbor 中：
  1. # 为镜像打标签
  2. docker tag frontend-project:latest 服务器4内网IP:9999/test/frontend-project:1.0
  4. # 推送镜像到 Harbor
  5. docker push 服务器4内网IP:9999/test/frontend-project:1.0
复制代码
镜像上传完毕后，可以在 Harbor 的 test 项目中查看刚刚上传的镜像：

7、部署项目

注意：在项目部署之前，先要保证K8S每一台服务器（服务器1，2，3）的/etc/docker/daemon.json都配置上了 Harbor 的内网IP和端标语，否则会导致K8S集群无法成功拉取Harbor私有镜像：
  1. {
  2.   "registry-mirrors": [
  3.           "https://8er86g8v.mirror.aliyuncs.com",
  4.           "https://docker.1panel.live/"
  5.   ],
  6.   "insecure-registries": ["服务器4内网IP:9999"]
  7. }
复制代码
然后服务器1，2，3通过下述命令重新加载配置：
  1. systemctl daemon-reload && systemctl restart docker
复制代码
7.1、配置 NameSpace

定名空间namespace主要是用于 K8S 集群中资源隔离的，所以在这里我为项目创建一个定名空间prod-env，命令如下：
  1. kubectl create ns prod-env
复制代码

7.2、配置 Deployment、Service

具体配置内容如下，表明写的很清楚，不多表明啦！
前端部署配置 frontend.yaml：
  1. apiVersion: apps/v1
  2. kind: Deployment
  3. metadata:
  4.   # Deployment 名称
  5.   name: frontend-deployment
  6.   # 命名空间
  7.   namespace: prod-env
  8.   labels:
  9.     app: frontend-label
  10. spec:
  11.   # 生成 Pod 数量
  12.   replicas: 3
  13.   # Pod 标签选择器，用于匹配管理
  14.   selector:
  15.     matchLabels:
  16.       app: frontend-label
  17.   template:
  18.     # Pod 标签，必须与 selector 匹配
  19.     metadata:
  20.       labels:
  21.         app: frontend-label
  22.     spec:
  23.       containers:
  24.         # 容器名
  25.       - name: frontend
  26.         # Harbor 前端镜像地址
  27.         image: 服务器4内网IP:9999/test/frontend-project:1.0
  28.         imagePullPolicy: Always
  29.         # 容器端口
  30.         ports:
  31.         - containerPort: 80
  32.         # 指定容器的资源请求和限制
  33.         resources:
  34.           requests:
  35.             memory: 300Mi
  36.             cpu: 200m
  37.           limits:
  38.             memory: 500Mi
  39.             cpu: 400m
  40.             
  41. ---
  43. kind: Service
  44. apiVersion: v1
  45. metadata:
  46.   name: frontend-service
  47.   namespace: prod-env
  48.   labels:
  49.     app: frontend-label
  50. spec:
  51.   selector:
  52.     app: frontend-label
  53.   # Service 类型：ClusterIP、NodePort、LoadBalancer
  54.   # 这里使用 ClusterIP，代表只在集群内部通讯（实际企业中也是用 ClusterIP）
  55.   # NodePort可以将Service对外暴露访问（一般没人用）
  56.   type: ClusterIP
  57.   ports:
  58.   - protocol: TCP
  59.     # 容器端口
  60.     port: 80
  61.     # Service 端口
  62.     targetPort: 80
复制代码
后端部署配置 backend.yaml：
  1. apiVersion: apps/v1
  2. kind: Deployment
  3. metadata:
  4.   name: backend-deployment
  5.   namespace: prod-env
  6.   labels:
  7.     app: backend-label
  8. spec:
  9.   replicas: 3
  10.   selector:
  11.     matchLabels:
  12.       app: backend-label
  13.   template:
  14.     metadata:
  15.       labels:
  16.         app: backend-label
  17.     spec:
  18.       containers:
  19.       - name: backend
  20.         image: 服务器4内网IP:9999/test/backend-project:1.0
  21.         imagePullPolicy: Always
  22.         ports:
  23.         - containerPort: 8080
  24.         resources:
  25.           requests:
  26.             memory: 300Mi
  27.             cpu: 200m
  28.           limits:
  29.             memory: 500Mi
  30.             cpu: 400m
  31.             
  32. ---
  34. kind: Service
  35. apiVersion: v1
  36. metadata:
  37.   name: backend-service
  38.   namespace: prod-env
  39.   labels:
  40.     app: backend-label
  41. spec:
  42.   selector:
  43.     app: backend-label
  44.   type: ClusterIP
  45.   ports:
  46.   - protocol: TCP
  47.     port: 8080
  48.     targetPort: 8080
复制代码
末了，通过下述命令对前端、后端项目进行启动：
  1. kubectl apply -f frontend.yaml && kubectl apply -f backend.yaml
复制代码

7.3、配置 Ingress-Nginx

直接通过 K8S Service 的 NordPort 模式可以完成服务对外提供访问的要求，但是真正企业级场景来说，更多的是利用 Ingress-Nginx 构建应用入口，所以这里还需要部署一下 Ingress-Nginx，请参考下述连接部署：https://xuzhibin.blog.csdn.net/article/details/143227591
按照上述部署完毕后其实有个问题，我们需要保证ingress-nginx-controller部署在 Master 节点上，否则无法进行正确的访问，所以还需要修改Ingress部署配置文件的一处位置，让其部署在主节点上：

修改完毕后，重新卸载安装 Ingress-Nginx：
  1. # 删除 Ingress-Nginx
  2. kubectl delete -f ingress-deploy.yaml
  4. # 安装 Ingress-Nginx
  5. kubectl apply -f ingress-deploy.yaml
复制代码
此时可以看到，ingress-nginx-controller 部署在 k8s-master 上了：

部署完毕后，接下来要做的是配置一下 ingress-project.yaml 完成访问配置，由于我的服务器都在香港地区，所以这次我就用真实的域名分析到我的主服务器IP上（没有可用于名，就得通过修改 hosts 文件利用假域名测试了），配置内容如下：
  1. apiVersion: networking.k8s.io/v1
  2. kind: Ingress
  3. metadata:
  4.   # Ingress-Nginx 名称
  5.   name: my-ingress
  6.   namespace: prod-env
  7. spec:
  8.   # Ingress Class
  9.   ingressClassName: nginx
  10.   # 路由规则
  11.   rules:
  12.   # 域名
  13.   - host: k8s.joydevelop.com
  14.     http:
  15.       paths:
  16.       # 访问域名根路径，就会路由到 front-service 服务上
  17.       - path: /
  18.         pathType: Prefix
  19.         backend:
  20.           service:
  21.             # 前端服务名称
  22.             name: frontend-service
  23.             # 服务端口
  24.             port:
  25.               number: 80
  26.               
  27. #      后端服务 Service 就不用暴露了，不需要直接把后端接口给别人调用啊！         
  28. #      - path: /api
  29. #        pathType: Prefix
  30. #        backend:
  31. #          service:
  32. #            name: backend-service
  33. #            port:
  34. #              number: 8080
复制代码
然后通过下述命令进行 Ingress-Nginx 创建启动：
  1. kubectl apply -f ingress-project.yaml
复制代码
7.4、访问测试

末了，在浏览器上通过访问域名，可以看到 K8S 部署 SpringBoot + Vue.js 项目成功！



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4