阅读 353

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

前言

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

发布流程分析

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

因为在前面的一键脚本已经将流程实现过了,这里只需要将原来的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 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"
                }
              }
            }
          }
        }
    }
    复制代码

    使用说明

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

运行结果

小结

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

项目源码地址

  • 后端

gitee.com/mldong/mldo…

  • 前端

gitee.com/mldong/mldo…

相关文章

手把手带你玩转k8s-集群创建和Hello World

手把手带你玩转k8s-ConfigMap与持久化存储

手把手带你玩转k8s-完整的发布一个可对外访问的服务

手把手带你玩转k8s-docker进阶Dockerfile与docker-compose

手把手带你玩转k8s-一键部署springboot项目

手把手带你玩转k8s-一键部署vue项目

手把手带你玩转k8s-常用对象详解

手把手带你玩转k8s-jenkins安装与流水线

手把手带你玩转k8s-jenkins流水线语法

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

``