菜单 搜索
首页 前端知识 Kubernetes(K8S) Harbor Ingress 部署 SpringBoot Vue 前后端分离项目

Kubernetes(K8S) Harbor Ingress 部署 SpringBoot Vue 前后端分离项目

2024-11-04 10:11:25 前端知识 前端哥 213 664 我要收藏

文章目录

  • 1、环境准备
  • 2、搭建 K8S
  • 3、搭建 Harbor
  • 4、搭建 MySQL
  • 5、构建 SpringBoot 项目镜像
  • 6、构建 Vue.js 项目镜像
  • 7、部署项目
    • 7.1、配置 NameSpace
    • 7.2、配置 Deployment、Service
    • 7.3、配置 Ingress-Nginx
    • 7.4、访问测试

1、环境准备

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

  • 服务器1：
    • 部署：K8S Master
    • 配置：CentOS 7.9，4核8G
  • 服务器2：
    • 部署：K8S Worker 1
    • 配置：CentOS 7.9，4核8G
  • 服务器3：
    • 部署：K8S Worker 2
    • 配置：CentOS 7.9，4核8G
  • 服务器4：
    • 部署：MySQL + Harbor
    • 配置：CentOS 7.9，2核4G
    • 开放端口：80、8080、3306、9999

整体部署架构图如下：
在这里插入图片描述

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 数据库容器：

docker run -p 3306:3306 --name mysql \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:8.0

通过 Navicat 连接到创建好的 MySQL（账号密码都是root），先创建 test 数据库，然后将上面提供的 MySQL 数据初始化脚本 init.sql 执行加载完毕，数据导入成功后如下图：
在这里插入图片描述

5、构建 SpringBoot 项目镜像

通过 IDEA 打开后端项目，记得调整一下配置文件，将MySQL URL调整为部署MySQL的内网IP地址：
在这里插入图片描述
在 IDEA 控制台上，通过 Maven 完成 SpringBoot 项目打包操作：

mvn clean package -Dmaven.test.skip=true

打包完毕后，可以看到 target 目录下生成的 Jar 文件：
在这里插入图片描述

将JAR包上传到服务器4的 /opt 目录上，然后在 /opt 目录上编写 BackendDockerfile 文件，用于 JAR 包镜像构建，BackendDockerfile 内容如下：

# 基础镜像
FROM openjdk:17
# 宿主机文件 COPY 镜像
ADD backend-project.jar /backend-project.jar
# 容器启动时执行（类似CMD）
ENTRYPOINT ["java", "-jar", "backend-project.jar"]

然后在服务器4的/opt目录下，进行镜像构建，命令如下：

cd /opt
docker build -f BackendDockerfile -t backend-project .

在这里插入图片描述
镜像构建完毕后，通过下述命令启动镜像，判断是否打包成功：

docker run -d -p 8080:8080 backend-project

最后通过 公网IP地址:8080/api 访问测试接口，可以查看到后端服务部署成功：
在这里插入图片描述
然后将该 SpringBoot项目 镜像推送到 Harbor 当中：

# 登录 Harbor，账号密码：admin/Harbor12345
docker login 服务器4内网IP:9999

# 为镜像打标签
docker tag backend-project:latest 服务器4内网IP:9999/test/backend-project:1.0

# 推送镜像到 Harbor
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 项目进行打包操作，控制台执行下述命令：

npm run build:prod

在这里插入图片描述
然后将打包后的 dist 文件上传到服务器4 /opt 目录，然后在 /opt 目录上编写 FrontendDockerfile 文件，用于 Vue.js 项目镜像构建：

# 基础镜像 Nginx
FROM nginx

# 拷贝当前目录的文件到指定文件夹下，改文件夹为镜像中的文件夹
COPY ./dist /usr/share/nginx/html

# 拷贝nginx.conf文件到镜像下，替换掉原有的nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf

接着在服务器4 /opt 目录下，创建 nginx.conf 文件，内容如下（记得调整内网IP地址）：

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;

  server {
    listen       80;
    server_name  localhost;

    location / {
      root   /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
      index  index.html index.htm;
    }

    location /api/ {
      proxy_http_version 1.1;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Connection "";
      # 这里用的是 K8S Service 服务名访问方式（先按照我这么写！）
      proxy_pass http://backend-service.prod-env.svc.cluster.local:8080;
    }
  }
}

执行下述命令，完成 Vue.js 镜像构建：

cd /opt
docker build -f FrontendDockerfile -t frontend-project .

最后，将构建好的 Vue.js 镜像上传到 Harbor 中：

# 为镜像打标签
docker tag frontend-project:latest 服务器4内网IP:9999/test/frontend-project:1.0

# 推送镜像到 Harbor
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私有镜像：

{
  "registry-mirrors": [
          "https://8er86g8v.mirror.aliyuncs.com",
          "https://docker.1panel.live/"
  ],
  "insecure-registries": ["服务器4内网IP:9999"]
}

然后服务器1，2，3通过下述命令重新加载配置：

systemctl daemon-reload && systemctl restart docker

7.1、配置 NameSpace

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

kubectl create ns prod-env

在这里插入图片描述

7.2、配置 Deployment、Service

具体配置内容如下，注释写的很清楚，不多解释啦！
前端部署配置 frontend.yaml：

apiVersion: apps/v1
kind: Deployment
metadata:
  # Deployment 名称
  name: frontend-deployment
  # 命名空间
  namespace: prod-env
  labels:
    app: frontend-label
spec:
  # 生成 Pod 数量
  replicas: 3
  # Pod 标签选择器，用于匹配管理
  selector:
    matchLabels:
      app: frontend-label
  template:
    # Pod 标签，必须与 selector 匹配
    metadata:
      labels:
        app: frontend-label
    spec:
      containers:
        # 容器名
      - name: frontend
        # Harbor 前端镜像地址
        image: 服务器4内网IP:9999/test/frontend-project:1.0
        imagePullPolicy: Always
        # 容器端口
        ports:
        - containerPort: 80
        # 指定容器的资源请求和限制
        resources:
          requests:
            memory: 300Mi
            cpu: 200m
          limits:
            memory: 500Mi
            cpu: 400m
            
---

kind: Service
apiVersion: v1
metadata:
  name: frontend-service
  namespace: prod-env
  labels:
    app: frontend-label
spec:
  selector:
    app: frontend-label
  # Service 类型：ClusterIP、NodePort、LoadBalancer
  # 这里使用 ClusterIP，代表只在集群内部通讯（实际企业中也是用 ClusterIP）
  # NodePort可以将Service对外暴露访问（一般没人用）
  type: ClusterIP
  ports:
  - protocol: TCP
    # 容器端口
    port: 80
    # Service 端口
    targetPort: 80

后端部署配置 backend.yaml：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend-deployment
  namespace: prod-env
  labels:
    app: backend-label
spec:
  replicas: 3
  selector:
    matchLabels:
      app: backend-label
  template:
    metadata:
      labels:
        app: backend-label
    spec:
      containers:
      - name: backend
        image: 服务器4内网IP:9999/test/backend-project:1.0
        imagePullPolicy: Always
        ports:
        - containerPort: 8080
        resources:
          requests:
            memory: 300Mi
            cpu: 200m
          limits:
            memory: 500Mi
            cpu: 400m
            
---

kind: Service
apiVersion: v1
metadata:
  name: backend-service
  namespace: prod-env
  labels:
    app: backend-label
spec:
  selector:
    app: backend-label
  type: ClusterIP
  ports:
  - protocol: TCP
    port: 8080
    targetPort: 8080

最后，通过下述命令对前端、后端项目进行启动：

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：

# 删除 Ingress-Nginx
kubectl delete -f ingress-deploy.yaml

# 安装 Ingress-Nginx
kubectl apply -f ingress-deploy.yaml

此时可以看到，ingress-nginx-controller 部署在 k8s-master 上了：
在这里插入图片描述
部署完毕后，接下来要做的是配置一下 ingress-project.yaml 完成访问配置，由于我的服务器都在香港地区，所以这次我就用真实的域名解析到我的主服务器IP上（没有可用于名，就得通过修改 hosts 文件使用假域名测试了），配置内容如下：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  # Ingress-Nginx 名称
  name: my-ingress
  namespace: prod-env
spec:
  # Ingress Class
  ingressClassName: nginx
  # 路由规则
  rules:
  # 域名
  - host: k8s.joydevelop.com
    http:
      paths:
      # 访问域名根路径，就会路由到 front-service 服务上
      - path: /
        pathType: Prefix
        backend:
          service:
            # 前端服务名称
            name: frontend-service
            # 服务端口
            port:
              number: 80
              
#      后端服务 Service 就不用暴露了，不需要直接把后端接口给别人调用啊！          
#      - path: /api
#        pathType: Prefix
#        backend:
#          service: 
#            name: backend-service
#            port: 
#              number: 8080

然后通过下述命令进行 Ingress-Nginx 创建启动：

kubectl apply -f ingress-project.yaml

7.4、访问测试

最后，在浏览器上通过访问域名，可以看到 K8S 部署 SpringBoot + Vue.js 项目成功！
在这里插入图片描述
在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/19944.html
标签
dockerspringbootk8sharboringress
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！