【四】将vue部署到k8s中

准备dockerfile和jenkinsfile还有yml文件

因为我前三步将其他的都弄好了,我现在的目的只是为了简单部署上去,所以没做其他深入研究配置,我的简单代码:https://gitee.com/feiminjie/helloworldfront
我准备的dockerfile
bash 复制代码
# 使用官方 Node.js 镜像
FROM node:14
# 设置工作目录
WORKDIR /appf
# 将项目文件复制到容器中
COPY . .
# 安装项目依赖
RUN npm install
# 构建生产环境
RUN npm run build
# 暴露端口
EXPOSE 80
# 启动应用
CMD ["npm", "run", "start"]

我准备的Jenkinsfile

bash 复制代码
// 所有的脚本命令都放在当前的pipline中
pipeline{
	// 制定任务在哪个集群节点中执行
	agent any
	
	// 声明全局变量,方便后面使用
	environment {
		key = 'value'
	}
	
	stages {
        	stage('拉取git仓库代码') {
            		steps {
checkout scmGit(branches: [[name: '${tag}']], extensions: [], userRemoteConfigs: [[credentialsId: 'ee882b26-32f7-487f-af8b-8ce97ae6d923', url: 'https://gitee.com/feiminjie/helloworldfront.git']])
            }
        }
             stage('生成docker镜像') {
            		steps {
            		sh 'docker build -t hellofront:$tag .'
            }
        }
            stage('推送harbor') {
            		steps {
            		    sh '''docker login -u admin -p Harbor12345 103.39.222.98:80
docker tag hellofront:$tag 103.39.222.98:80/hellofront/hellofront:$tag
docker push 103.39.222.98:80/hellofront/hellofront:$tag'''
            		}
        	}
            stage('推送yml到master') {
            		steps {
            		    sshPublisher(publishers: [sshPublisherDesc(configName: 'k8s', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'pipefront.yml')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
            		}
        	}
        	stage('执行yml文件') {
            		steps {
            		sh '''ssh root@103.39.226.71 kubectl apply -f /usr/local/k8s/pipefront.yml
ssh root@103.39.226.71 kubectl rollout restart deployment helloworldfront-deployment -n front'''
            		}
        	}
     }
}

里面配置和后端写的区分开就行了

我准备的 front.yml
bash 复制代码
apiVersion: apps/v1
kind: Deployment
metadata:
  namespace: front
  name: helloworldfront-deployment
  labels:
    app: helloworldfront-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: helloworldfront
  template:
    metadata:
      labels:
        app: helloworldfront
    spec:
      containers:
      - name: helloworldfront
        image: 103.39.222.98:80/hellofront/hellofront:v4.0.0
        imagePullPolicy: Always
        ports:
        - containerPort: 80
      imagePullSecrets:
        - name: harbor-token
---
apiVersion: v1
kind: Service
metadata:
  namespace: front
  name: helloworldfront-deployment
  labels:
    app: helloworldfront-deployment
spec:
  selector:
    app: helloworldfront
  ports:
  - port: 80
    targetPort: 80
  type: NodePort
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  labels:
    app: helloworldfront-deployment
    k8s.kuboard.cn/name: helloworldfront-deployment
  name: helloworldfront-deployment
  namespace: front
spec:
  defaultBackend:
    service:
      name: helloworldfront-deployment
      port:
        number: 80
  ingressClassName: ingress
  rules:
    - host: bomj.shop
      http:
        paths:
          - backend:
              service:
                name: helloworldfront-deployment
                port:
                  number: 80
            path: /
            pathType: Prefix

kuboard配置

1、创建上面yml文件中的命名空间

2、在front命名空间内创建密文

步骤都和前面三步中的步骤差不多,如果有什么报错对着日志改一改就可以了。

任意节点+端口就可以访问了

相关推荐
zqx_713 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己30 分钟前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称1 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
大G哥1 小时前
记一次K8S 环境应用nginx stable-alpine 解析内部域名失败排查思路
运维·nginx·云原生·容器·kubernetes
长天一色1 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
妍妍的宝贝1 小时前
k8s 中微服务之 MetailLB 搭配 ingress-nginx 实现七层负载
nginx·微服务·kubernetes
NiNg_1_2341 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河2 小时前
CSS总结
前端·css
BigYe程普2 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H2 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈