preface

With the back end project released, this article starts with the front end project, the previously open source Vue project. In fact, the idea of assembly line is the same. After the process is sorted out and defined, Jenkins’ assembly line grammar is used to write the assembly line. The VUE project release here is similar.

Release Process Analysis

  1. Pull the code
  2. Package to generate static files
  3. Execute k8S to issue commands
  4. Get the nginx persistence directory
  5. Copy static files to persistent directories

Since the process was already implemented in the one-click script, you just need to streamline the original shell

Start coding

Ginseng explanation to

Parameter names The default value instructions
project_name mldong-vue The project name
deploy_type deploy Release type, not currently in use
git_url [email protected]:mldong/mldong.git The warehouse address
branch_name master The name of the branch
profiles test Environment Type (PROD/Test)
registry_url registry.npm.taobao.org NPM source address
remote_host 172.26.22.105 Address of the remote server to which static resources are copied
nfs_project_dir /mnt NFS root directory
k8sCredentialsId ali-k8s-config Bound domain name
k8sCredentialsId ali-k8s-config K8s Cluster configuration ID
k8sServerUrl https://172.26.22.121:6443 K8s Cluster service address

The directory structure

├─ ├─ ├─ ├─ k8S-prod.yaml ├─ package.jsonCopy the code

File,

  • mldong-vue/k8s-test.yaml

    Test environment K8S release definition file

    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(/|$)(.*)
Copy the code

  • mldong-vue/k8s-prod.yaml

    Production environment pipeline, modify the namespace and bound domain name

  • mldong-vue/Jenkinsfile

    Pipeline definition file

    pipeline {
    agent any
    parameters {
        string(name: 'project_name'.defaultValue: 'mldong-vue'.description: 'Project Name')        
        string(name: 'git_url'.defaultValue: '[email protected]:mldong/mldong-vue.git'.description: 'Warehouse address')

        string(name: 'registry_url'.defaultValue: "https://registry.npm.taobao.org".description: 'NPM source address')
        string(name: 'remote_host'.defaultValue: "172.26.22.105".description: 'Remote server address')
        string(name: 'deploy_type'.defaultValue: 'deploy'.description: 'Publication Type')
        string(name: 'branch_name'.defaultValue: 'master'.description: 'git branch')
        string(name: 'profiles'.defaultValue: 'test'.description: 'the environment')
        string(name: 'k8sCredentialsId'.defaultValue: 'ali-k8s-config'.description: 'K8S cluster configuration ID')
        string(name: 'k8sServerUrl'.defaultValue: 'https://172.26.22.121:6443'.description: 'K8S Cluster Service Address')
        string(name: 'nfs_project_dir'.defaultValue: '/mnt'.description: 'NFS root')
        
    }
    stages {
        stage('Check out code') {
        	steps{
                // Check out the code
            	checkout([$class: 'GitSCM'.branches: [[name: "*/${params.branch_name}"]], 
            	doGenerateSubmoduleConfigurations: false.            	extensions:[].            	submoduleCfg:[].                userRemoteConfigs: [[
                    credentialsId: 'mldong-gitbash'.                	url: "${params.git_url}"]]])
            }
        }
        stage('Package to generate static files') {
            agent {
                docker {
                    image '14.4 alpine node:
                    args '-p 3000:3000'
                }
            }
            steps {
                sh "node -v"
                sh "npm -v"
				// Set the sass download address
                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')]) {// Delete local dist
              	sh "rm -rf dist"
              	// Remove the stash file
              	unstash("dist")
              	/ /
              	sh "tar zxvf dist.tar.gz"
              	// Remove index.html for last copy
              	sh "mv dist/index.html ./"
                // Initialize the directory
                sh "ssh -o StrictHostKeyChecking=no -i $identity $userName@${params.remote_host} mkdir -p ${params.nfs_project_dir}/${params.project_name}"		
                // Copy the file
                sh "scp -r -i $identity dist/* $userName@${params.remote_host}:${params.nfs_project_dir}/${params.project_name}"
                / / copy index. HTML
                sh "scp -r -i $identity index.html $userName@${params.remote_host}:${params.nfs_project_dir}/${params.project_name}"
                / / reduction index. HTML
  				sh "mv index.html dist/index.html"
            }
          }
        }
      }
    }
}
Copy the code

    Directions for use

    1. New assembly line taskmldong-vue-test
    2. The SCM is used here to automatically check out the code

The results

summary

Jenkins assembly line can be written a lot of content, here four in a row is basically a door. To here temporarily stop, follow-up needs, and then consider supplement. Such as distributed build tasks, custom runtime environments, message notifications, release audits, and more

Project source code address

  • The back-end

Gitee.com/mldong/mldo…

  • The front end

Gitee.com/mldong/mldo…

Related articles

Walk you through K8S – cluster creation and Hello World

Take you through K8S-ConfigMap and persistent storage

Take you hand in hand to play K8S – complete release of an externally accessible service

Docker-compose k8S-docker advanced Dockerfile and docker-compose

K8s – One click deployment of springboot project

Take you through k8S – One-click deployment of VUE projects

Take you hand in hand to play K8S – common object details

Walk you through k8S-Jenkins installation and assembly line

Walk you through k8S-Jenkins assembly line grammar

Take you hand in hand through the K8S-Jenkins assembly line to launch springboot project

` `