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

最新推荐文章于 2022-08-29 19:17:54 发布
最新推荐文章于 2022-08-29 19:17:54 发布
阅读量1.1k 收藏 5
点赞数
分类专栏： Kubernetes 文章标签： kubernetes docker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ai524719755/article/details/116712579
版权

前言

后端项目发布完了，本篇开始讲到前端项目，也就是前面开源的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_urlhttps://registry.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 {
      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的方式自动检出代码

运行结果

项目源码地址

  • 后端

https://gitee.com/mldong/mldong

  • 前端

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

小结

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

mldong666
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jenkins-k8s-docker:Kubernetes与Jenkins和Docker的集成
05-06
Kubernetes与Jenkins和Docker的集成 看看这篇文章，它是如此酷的设置。 最了解更多的信息，请访问
阿里云k8s kubectl 一键部署vue+nginx
01-10
阿里云k8s kubectl 一键部署vue+nginx
k8s企业级DevOps实践_下半场
06-12
最近的三年多时间，随着容器技术的火爆及Kubernetes成为容器编排管理的标准，国内外厂商均已开始了全面拥抱Kubernetes的转型， 无数中小型企业已经落地 Kubernetes，或正走在容器化的道路上 。介绍docker的前世今生，了 解docker的实现原理，以Django项目为例，教大家如何编写最佳的Dockerfile实现构业务镜像的制作。通过本章的学习，大家会知道docker的概念及基本操作，并学会构建自己的业务镜像，并通过抓包的方式掌握Docker最常用的bridge网络模式的通信。
vue项目通过jenkins部署到K8s
weixin_37069728的博客
08-03 1661
前端vue部署的项目自动打包发布部署到K8S上
jenkins发布vue项目 到k8s
山巅
01-08 1785
jenkins发布vue项目 到k8s一、定义参数、环境变量二、从gitlab拉取代码三、 打包生成静态文件四、通过yaml文件部署nginx到k8s五、把打包后的文件放到nginx解析目录下六、配置nginx 反向代理到后端接口 一、定义参数、环境变量 pipeline { agent any parameters { string(name: 'project_name', defaultValue: 'xx-ui', description: '项目名称')
jenkins流水线部署，项目一键部署到k8s，项目一键部署K8S
了迹奇有没
08-29 693
jenkins流水线部署，项目一键部署到k8s，项目一键部署K8S
k8s中Jenkins流水线配置自动化部署java+vue等服务.rar
06-10
通过Jenkins流水线发布Java服务到k8s集群上，主要是通过在Jenkins slave上集成宿主机docker，helm，kubectl工具来打包镜像部署服务到k8s集群上。
gitlab10.6.3+jenkins2.164.3-k8s-1.14.2-cicd-java项目-jenkins在k8s之外
最新发布
05-27
gitlab10.6.3+jenkins2.164.3-k8s-1.14.2-cicd-java项目-jenkins在k8s之外-安装包和笔记
基于k8s-jenkins cicd部署文档.pdf
03-03
基于k8s-jenkins cicd部署文档
基础jenkins镜像构建k8s-jenkins-master镜像
07-23
docker超详细基础教程,基础jenkins镜像构建k8s-jenkins-master镜像
用代码描述流水线-JenkinsPipeline详解
01-27
自从Jenkins2.0版本升级之后，支持了通过代码...而在2016JenkinsWorld大会上，Jenkins发布了1.0版本的声明式流水线 -DeclarativePipeline，目前已经到发布了1.2版本，它是一种新的结构化方式定义一个流水线。今天
手把手带你玩转k8s-一键部署vue项目
mldong的博客
05-11 2268
前言 在快速开发框架-前端篇中少了一个章节，就是关于vue工程的一键发布脚本设计和实现。本文就在此展开，并部署到k8s环境中。 传统部署方式与k8s部署区别 在没有使用k8s之前的前后端分离项目部署，一般是依托于宿主机上的nginx。前端静态资源走nginx,后端接口会使用nginx做代理。而此时，nginx是提前安装的，所以一键脚本并不会考虑nginx的安装与运行，只会将打包好静态资源放在指定目录。使用k8s之后，一键脚本会有的区别，除了打包静态资源放在指定目录上，还要考虑nginx实例的运行。 传统
k8s部署vue项目
花&败
06-27 4194
1、环境准备 提前搭建好的k8s集群准备： 192.168.56.30（master节点） 192.168.56.31（node节点） harbor远程仓库准备： 192.168.56.14 2、创建nginx镜像 1）准备一个nginx安装包，我们这里的版本是1.18.0的 2）在同级目录下创建一个Dockerfile文件，内容如下 #基于centos基础镜像 FROM centos:7 #作者信息 MAINTAINER kgf #...
jenkins部署vue，利用Nginx部署并推送到k8s
k393393的博客
11-09 1343
以下项目是个纯vue项目，在项目中加入k8s、nginx、Dockerfile模块 1、配置Dockerfile 将nginx文件下的nginx.conf复制到Nginx配置文件下 并将vue打包后的dist复制到指定目录下 FROM nginx RUN mkdir /usr/share/nginx/dist \ && rm -rf /etc/nginx/nginx.conf \ && /bin/cp /usr/share/zoneinfo/Asia/Sha
【Kubernetes系列】K8s下部署前端Vue应用
邓邓子的博客
06-20 2446
K8s下部署前端Vue应用
k8s 部署 vue 项目
糖小七_Zz的博客
07-21 4167
打包vue项目 npm run build 命令执行后，会产生dist文件夹，将dist文件夹通过xftp拷贝到服务器上自己新建的文件夹下 创建Nginx config配置文件 在同目录下新建 default.conf server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/n
容器化k8s-流水线发布镜像k8s jenkins协同
feilong2483的博客
01-15 531
1.新建部署job fangliProvider部署测试环境 流水线脚本 简单测试参数化构建 podTemplate(name: 'jenkins-slave', cloud: 'kubernetes', namespace: 'jenkins', label: 'jenkins-slave',volumes: [ hostPathVolume(mountPath: '/usr/bin/kubectl', hostPath: '/usr/bin/kubectl'), hos...
Jenkins+Gitlab自动部署Vue项目到远程服务器
u010797364的博客
08-12 1199
Jenkins+Gitlab自动部署Vue到远程服务器
jenkins结合k8s构建流水线如何提升运行性能和构建效率
weixin_38320674的博客
11-25 981
一、调节jenkins从节点的内存和cpuJenkins是目前最主流的CI/CD工具，我们常用jenkins对接kubernetes实现DevOps。那配置的Jenkins Slave模板...
gitee+jenkins+hatbor+k8s编写一个发布go项目的流水线
06-06
2. 在 Jenkins 中创建一个新的 Pipeline 项目，并配置对应的 Git 仓库，以便在代码提交时自动触发构建。 3. 在 Jenkins 中添加 Docker 插件，使用 Docker 构建 Go 项目的镜像。 4. 配置 Harbor 仓库，将构建好的镜像...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值