K8S部署vue、springboot前后端分离项目

k8s环境部署

因为换工作,新公司使用k8s部署环境,之前没有接触过k8s,所以打算先学一下,之前有过docker的学习经验。
看着各种博客和教学视频用kubeadm安装了k8s集群,过程当时没有记录,就不详写,这篇主要记录一个简单前后端分离项目的k8s部署

vue项目准备

前端界面不是很熟就下载了一个已经写好的项目再这个基础上进行修改的,就是这个项目vue-element-admin,可以自己搜一下。
项目修改后执行命令

npm run build:prod

打包完成后再项目目录下生成dist目录
将dist目录通过FileZilla传输到linux虚拟机中,我的虚拟机是centos7
连接虚拟机在dist所在自建目录下增加两个文件default.config和Dockerfile
在这里插入图片描述
default.cfg是nginx的配置文件,内容如下

server {
    listen       9000;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

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

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    location /prod-api/ {
        proxy_pass http://192.168.106.165:30160/;
        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_http_version 1.1;
        proxy_set_header Connection "";
    }
}

其中需要注意的点是 location /prod-api/ 调用后端时配置的路径
/prod-api/ 这个对应的是vue项目中的.env.production中配置的VUE_APP_BASE_API
在这里插入图片描述
Dockerfile是docker build的文件,内容如下

FROM nginx:latest
MAINTAINER "lyl"
LABEL description="TODO LIST"
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

然后执行docker build -t web-todo .
注意执行的时候不要忘记最后的点号,-t 设置生成image的名字,可自定义
在这里插入图片描述
执行后可通过docker images |grep web-todo查看已生成的image
执行

docker tag web-todo:latest 192.165.168.165/harbor/web-todo:v1

写自己的docker仓库地址,我是按照网上教程搭了一个harbor的仓库
然后将image推到仓库

docker push 192.165.168.165/harbor/web-todo:v1

springboot项目准备

我的后端项目框架是springboot+shiro+jpa+redis+mysql
项目比较简单,代码就不展示了
主要是记录k8s部署相关内容
maven打jar,通过FileZilla传输到linux虚拟机
在jar包所在目录新增Dockerfile文件,文件内容如下

#基础镜像,如果本地仓库没有,会从远程仓库拉取
FROM openjdk:8-jdk-alpine
#容器中创建目录
RUN mkdir -p /usr/local/hapo
#编译后的jar包copy到容器中创建到目录内
COPY ./todo-list-1.0-SNAPSHOT.jar /usr/local/hapo/app.jar
#指定容器启动时要执行的命令
ENTRYPOINT ["java","-jar","/usr/local/hapo/app.jar"]

todo-list-1.0-SNAPSHOT.jar是我的jar名称,其他可保持不变
然后按照上面docker打包上传的步骤上传到docker仓库

k8s容器部署两个项目

k8s管理项目主要是靠yaml,这次部署的todo-list.yaml如下

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-todo
  namespace: default
  labels:
    app: web-todo
spec:
  replicas: 2
  selector:
    matchLabels:
      app: web-todo    # has to match .spec.template.metadata.labels
  template:
    metadata:
      labels:
        app: web-todo # has to match .spec.selector.matchLabels
    spec:
      imagePullSecrets:
      - name: harbor-secret
      containers:
      - name: web-todo
        image: 192.168.106.165/harbor/web-todo:v3
        imagePullPolicy: Always
        #args: [--spring.profiles.active=cluster]
        ports:
        - containerPort: 9000
          name: web-todo
        resources:
          requests:
            memory: 300Mi
            cpu: 200m
          limits:
            memory: 500Mi
            cpu: 400m

---
kind: Service
apiVersion: v1
metadata:
  name: web-todo
  namespace: default
  labels:
    app: web-todo
spec:
  type: NodePort
  ports:
  - port: 9000
    nodePort: 30260 #service对外开放端口
  selector:
    app: web-todo

---
#ingress
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: web-todo
#  annotations:
#    nginx.ingress.kubernetes.io/auth-type: basic
#    nginx.ingress.kubernetes.io/auth-secret: basic-auth
#    nginx.ingress.kubernetes.io/auth-realm: 'Authentication Required - hapo'
spec:
#  tls:
#    - hosts:
#      - ling.hapo.com
#      secretName: tls-secret
  rules:
  - host: ling.hapo.com
    http:
      paths:
      - path:
        backend:
          serviceName: web-todo # 这里对应着service 的 名字
          servicePort: 9000 # 对应着需要映射的service的端口
---
apiVersion: v1
kind: Service
metadata:
  name: todo-list
  namespace: default
  labels:
    app: todo-list
spec:
  type: NodePort
  ports:
  - port: 8000
    nodePort: 30160 #service对外开放端口
  selector:
    app: todo-list
---
apiVersion: apps/v1
kind: Deployment #对象类型
metadata:
  name: todo-list #名称
  labels:
    app: todo-list #标注
spec:
  replicas: 2 #运行容器的副本数,修改这里可以快速修改分布式节点数量
  selector:
    matchLabels:
      app: todo-list
  template:
    metadata:
      labels:
        app: todo-list
    spec:
      imagePullSecrets:
      - name: harbor-secret
      containers: #docker容器的配置
      - name: todo-list
        image: 192.168.106.165/harbor/todo-list:v1 # pull镜像的地址 ip:prot/dir/images:tag
        imagePullPolicy: IfNotPresent #pull镜像时机,
        ports:
        - containerPort: 8000 #容器对外开放端口

因为部署时使用了ingress,可以先按教程安装ingress
在master机器上添加yaml文件
执行命令

kubectl create -f todo-list.yaml

查看pod
在这里插入图片描述
如果pod都在running状态,项目就都起好了
在自己的电脑上配置host ,将ingress中的域名与master地址配置在hosts文件中
然后用域名就可以访问项目了,这步不可省略
在这里插入图片描述
在这里插入图片描述
前后端调用成功

遇到的问题

整个部署成功了,中间遇到了各种各样的问题,无法调用后端,docker仓库连不上等问题
中间harbor总是出现各种问题,docker login间歇性连不上
因为用的是笔记本,性能也不太好,又在上面加了三个虚拟机,所有性能可以预料到,我把harbor和k8s的master放到一个虚拟机上,端口占用问题,性能问题虚拟机会重启,docker login经常会失败,失败时请先查防火墙是否关闭,一定要看一下,如果防火墙不是永久关闭,重启之后防火墙会打开,一定要先排查这个问题!!!
再就是前后端无法调通的问题,我前端项目打了n次报,主要都是在改后端调用的地址,后端没有加https,我写过全地址(域名加端口号)这种在80端口调用的时候是没有问题的,但是用443端口的时候就会出现后端调用不是https的问题,后面就在default.conf加上了location /prod-api/那段配置,用nginx来连后端。
还有很多问题做的时候没有做记录,好不容易整个过程通了记录一下,怕后面再忘记。

  • 3
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue SpringBoot前后端分离项目是一种常见的开发模式,其中前端使用Vue框架进行开发,后端使用SpringBoot框架进行开发。在这种项目中,前后端通过API进行数据交互,实现前后端的解耦和独立开发。 在建立项目时,可以选择使用路由选项,这样就不需要再次安装路由。同时,需要安装axios库来进行前后端的数据交互。 项目的搭建过程包括前端Vue的搭建和后端项目的构建。前端搭建可以使用IDEA和Vue Element UI等工具,后端项目可以使用SpringBoot和Mybatis-Plus等框架。在构建过程中,需要在pom文件中引入相应的jar包,并在yml文件中配置数据库连接和端口设置。同时,还需要编写controller层、service层、imp层、mapper和实体类等代码,以及解决跨域问题。 在项目完成后,可以进行测试,确保前后端的数据交互和功能正常运行。 总结来说,Vue SpringBoot前后端分离项目是一种通过API进行数据交互的开发模式,前端使用Vue框架,后端使用SpringBoot框架,通过搭建和配置实现前后端的解耦和独立开发。 #### 引用[.reference_title] - *1* [springboot+vue前后端分离项目(后台管理系统)](https://blog.csdn.net/qq_52050769/article/details/119685283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [spring boot+vue前后端项目的分离(我的第一个前后端分离项目)](https://blog.csdn.net/weixin_43304253/article/details/122093289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值