【四】将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命名空间内创建密文

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

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

相关推荐
LYFlied5 分钟前
在AI时代,前端开发者如何构建全栈开发视野与核心竞争力
前端·人工智能·后端·ai·全栈
用户479492835691515 分钟前
我只是给Typescript提个 typo PR,为什么还要签协议?
前端·后端·开源
馬致远15 分钟前
Vue -组件入门
javascript·vue.js·ecmascript
程序员爱钓鱼36 分钟前
Next.js SSR 项目生产部署全攻略
前端·next.js·trae
程序员爱钓鱼38 分钟前
使用Git 实现Hugo热更新部署方案(零停机、自动上线)
前端·next.js·trae
颜颜yan_1 小时前
DevUI + Vue 3 入门实战教程:从零构建AI对话应用
前端·vue.js·人工智能
国服第二切图仔2 小时前
DevUI Design中后台产品开源前端解决方案之Carousel 走马灯组件使用指南
前端·开源
无限大62 小时前
为什么浏览器能看懂网页代码?——从HTML到渲染引擎的奇幻之旅
前端
福尔摩斯张2 小时前
Linux信号捕捉特性详解:从基础到高级实践(超详细)
linux·运维·服务器·c语言·前端·驱动开发·microsoft
2401_860319522 小时前
DevUI组件库实战:从入门到企业级应用的深度探索 ,如何快速安装DevUI
前端·前端框架