手把手带你玩转k8s-jenkins流水线发布vue项目

最新推荐文章于 2023-05-19 20:45:14 发布

mldong666

最新推荐文章于 2023-05-19 20:45:14 发布

阅读量1.1k

点赞数

分类专栏： Kubernetes 文章标签： kubernetes docker

本文链接：https://blog.csdn.net/ai524719755/article/details/116712579

版权

Kubernetes 专栏收录该内容

19 篇文章 10 订阅

订阅专栏

前言

后端项目发布完了，本篇开始讲到前端项目，也就是前面开源的vue项目。其实编写流水线的思路都差不多，先梳理好流程，把流程定义好后，再使用Jenkins的流水线语法去编写流水线。这里的vue项目的发布也差不多。

发布流程分析

拉取代码
打包生成静态文件
执行k8s发布命令
获取nginx持久化目录
将静态文件复制到持久化目录

因为在前面的一键脚本已经将流程实现过了，这里只需要将原来的shell转成流水线

开始编码

入参说明

参数名	默认值	说明
project_name	mldong-vue	项目名称
deploy_type	deploy	发布类型，暂未使用
git_url	git@gitee.com:mldong/mldong.git	仓库地址
branch_name	master	分支名称
profiles	test	环境类型(prod/test)
registry_url	https://registry.npm.taobao.org	npm源地址
remote_host	172.26.22.105	远程服务器地址，复制静态资源到该服务器上
nfs_project_dir	/mnt	nfs根目录
k8sCredentialsId	ali-k8s-config	绑定的域名
k8sCredentialsId	ali-k8s-config	k8s集群配置id
k8sServerUrl	https://172.26.22.121:6443	k8s集群服务地址

目录结构

├── mldong-vue			源码根目录
	├── Jenkinsfile
	├── k8s-test.yaml
	├── k8s-prod.yaml
	└── package.json

文件详解

mldong-vue/k8s-test.yaml

测试环境k8s发布定义文件

apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-cm
  namespace: mldong-admin-test
data:
  a.conf: |-
    server {
      listen       80;
      server_name  a.mldong.com;
      location / {
        root   /usr/share/nginx/html/mldong-vue;
        index  index.html index.htm;
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
        root   /usr/share/nginx/html;
      }
    }
---
apiVersion: v1
kind: PersistentVolume
metadata:
  name: mldong-vue-test-pv
  labels:
    alicloud-pvname: mldong-vue-test-pv
spec:
  capacity:
    storage: 5Gi
  accessModes:
    - ReadWriteMany
  csi:
    driver: nasplugin.csi.alibabacloud.com
    volumeHandle: mldong-vue-test-pv
    volumeAttributes:
      server: "9fdd94bf87-wfq72.cn-zhangjiakou.nas.aliyuncs.com"
      path: "/"
      vers: "3"
  storageClassName: nas
---
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  annotations:
    pv.kubernetes.io/bind-completed: 'yes'
    pv.kubernetes.io/bound-by-controller: 'yes'
  finalizers:
    - kubernetes.io/pvc-protection
  name: mldong-vue-test-pvc
  namespace: mldong-admin-test
spec:
  accessModes:
    - ReadWriteMany
  resources:
    requests:
      storage: 1Gi
  selector:
    matchLabels:
      alicloud-pvname: mldong-vue-test-pv
  storageClassName: nas
  volumeMode: Filesystem
  volumeName: mldong-vue-test-pv
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx
  namespace: mldong-admin-test
spec:
  selector:
    matchLabels:
      app: nginx
  replicas: 1
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
        - name: nginx
          image: registry-vpc.cn-zhangjiakou.aliyuncs.com/mldong/java/nginx:latest
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: 80
              name: port
              protocol: TCP
          volumeMounts:
            - name: mldong-vue-test-pvc
              mountPath: "/usr/share/nginx/html"
            - name: nginx-cm
              mountPath: "/etc/nginx/conf.d"
      volumes:
        - name: mldong-vue-test-pvc
          persistentVolumeClaim: 
            claimName: mldong-vue-test-pvc
        - name: nginx-cm
          configMap:
            name: nginx-cm
---
apiVersion: v1
kind: Service
metadata:
  name: nginx-nodeport
  namespace: mldong-admin-test
spec:
  type: NodePort
  ports:
  - port: 80
    targetPort: 80
  selector:
    app: nginx
---
apiVersion: v1
kind: Service
metadata:
  name: nginx
  namespace: mldong-admin-test
spec:
  type: ClusterIP
  ports:
  - port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: nginx
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
  name: nginx-ingress
  namespace: mldong-admin-test
spec:
  rules:
    - host: a.mldong.com
      http:
        paths:
          - backend:
              serviceName: nginx
              servicePort: 80
            path: /
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
  name: mldong-admin-api
  namespace: mldong-admin-test
spec:
  rules:
  - host: a.mldong.com
    http:
      paths:
      - backend:
          serviceName: mldong-admin
          servicePort: 8080
        path: /api(/|$)(.*)

mldong-vue/k8s-prod.yaml

生产环境的流水线，自行修改一下命名空间和绑定的域名

mldong-vue/Jenkinsfile

流水线定义文件

pipeline {
    agent any
    parameters {
        string(name: 'project_name', defaultValue: 'mldong-vue', description: '项目名称')        
        string(name: 'git_url', defaultValue: 'git@gitee.com:mldong/mldong-vue.git', description: '仓库地址')

        string(name: 'registry_url', defaultValue: "https://registry.npm.taobao.org", description: 'npm源地址')
        string(name: 'remote_host', defaultValue: "172.26.22.105", description: '远程服务器地址')
        string(name: 'deploy_type', defaultValue: 'deploy', description: '发布类型')
        string(name: 'branch_name', defaultValue: 'master', description: 'git分支')
        string(name: 'profiles', defaultValue: 'test', description: '环境')
        string(name: 'k8sCredentialsId', defaultValue: 'ali-k8s-config', description: 'k8s集群配置id')
        string(name: 'k8sServerUrl', defaultValue: 'https://172.26.22.121:6443', description: 'k8s集群服务地址')
        string(name: 'nfs_project_dir', defaultValue: '/mnt', description: 'nfs根目录')
        
    }
    stages {
        stage('检出代码') {
        	steps{
                // 检出代码
            	checkout([$class: 'GitSCM', branches: [[name: "*/${params.branch_name}"]], 
            	doGenerateSubmoduleConfigurations: false, 
            	extensions: [], 
            	submoduleCfg: [], 
                userRemoteConfigs: [[
                    credentialsId: 'mldong-gitbash', 
                	url: "${params.git_url}"]]])
            }
        }
        stage('打包生成静态文件') {
            agent {
                docker {
                    image 'node:14.4-alpine'
                    args '-p 3000:3000'
                }
            }
            steps {
                sh "node -v"
                sh "npm -v"
				// 设置sass下载地址
                sh "npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/"
                sh "npm --registry=${params.registry_url} install --unsafe-perm"
                sh "npm run build:${params.profiles}"
                sh "tar -zcvf dist.tar.gz dist"
                stash name: "dist", includes: "dist.tar.gz"
            }
        }
        stage("kubectl deploy"){
            agent {
                docker {
                    image 'lwolf/helm-kubectl-docker'
                }
            }

            steps {
                withKubeConfig([credentialsId: "${params.k8sCredentialsId}", serverUrl: "${params.k8sServerUrl}"]) {
                    script {
                        sh "kubectl apply -f k8s-${params.profiles}.yaml"
                    }
                }
            }
		}
        stage("scp to remote") {
          steps {
            script {
                withCredentials([
           	 	sshUserPrivateKey(
                    credentialsId: 'mldong-gitbash', 
                    keyFileVariable: 'identity', 
                    passphraseVariable: '', 
                    usernameVariable: 'userName')
            	]) {
              	// 删除本地dist
              	sh "rm -rf dist"
              	// 取出stash的文件
              	unstash("dist")
              	// 解压
              	sh "tar zxvf dist.tar.gz"
              	// 移出index.html,留最后复制
              	sh "mv dist/index.html ./"
                // 初始化目录
                sh "ssh -o StrictHostKeyChecking=no -i $identity $userName@${params.remote_host} mkdir -p ${params.nfs_project_dir}/${params.project_name}"		
                // 复制文件
                sh "scp -r -i $identity dist/* $userName@${params.remote_host}:${params.nfs_project_dir}/${params.project_name}"
                // 复制index.html
                sh "scp -r -i $identity index.html $userName@${params.remote_host}:${params.nfs_project_dir}/${params.project_name}"
                // 还原index.html
  				sh "mv index.html dist/index.html"
            }
          }
        }
      }
    }
}

使用说明

新建流水线任务mldong-vue-test
这里使用scm的方式自动检出代码

运行结果

项目源码地址

后端

https://gitee.com/mldong/mldong

前端

https://gitee.com/mldong/mldong-vue

小结

jenkins流水线的内容其实还可以写很多，这里连续四篇也基本上算是入了个门。到这里就暂时先告一段落，后续需要，再考虑补充。比如分布式构建任务、自定义运行环境、消息通知、发布审核等等

mldong666

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
手把手带你玩转k8s-jenkins流水线发布vue项目

前言后端项目发布完了，本篇开始讲到前端项目，也就是前面开源的vue项目。其实编写流水线的思路都差不多，先梳理好流程，把流程定义好后，再使用Jenkins的流水线语法去编写流水线。这里的vue项目的发布也差不多。发布流程分析拉取代码打包生成静态文件执行k8s发布命令获取nginx持久化目录将静态文件复制到持久化目录因为在前面的一键脚本已经将流程实现过了，这里只需要将原来的shell转成流水线开始编码入参说明参数名默认值说明project_namemldong-
复制链接

扫一扫