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

前言

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

发布流程分析

  1. 拉取代码

  2. 打包生成静态文件

  3. 执行k8s发布命令

  4. 获取nginx持久化目录

  5. 将静态文件复制到持久化目录

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

开始编码

入参说明

参数名默认值说明
project_namemldong-vue项目名称
deploy_typedeploy发布类型，暂未使用
git_urlgit@gitee.com:mldong/mldong.git仓库地址
branch_namemaster分支名称
profilestest环境类型(prod/test)
registry_urlregistry.npm.taobao.orgnpm源地址
remote_host172.26.22.105远程服务器地址，复制静态资源到该服务器上
nfs_project_dir/mntnfs根目录
k8sCredentialsIdali-k8s-config绑定的域名
k8sCredentialsIdali-k8s-configk8s集群配置id
k8sServerUrlhttps://172.26.22.121:6443k8s集群服务地址

目录结构

├── 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{
    listen80;
    server_namea.mldong.com;
    location/{
    root/usr/share/nginx/html/mldong-vue;
    indexindex.htmlindex.htm;
    }
    error_page500502503504/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项目

``

以上是 手把手带你玩转k8s-jenkins流水线发布vue项目 的全部内容， 来源链接： utcz.com/a/34723.html

回到顶部