⼿把⼿带你玩转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:mldong/mldong.git仓库地址branch_name master分⽀名称
profiles test环境类型(prod/test)
registry_url registry. npm源地址
remote_host172.26.22.105远程服务器地址，复制静态资源到该服务器上
nfs_project_dir/mnt nfs根⽬录
k8sCredentialsId ali-k8s-config绑定的域名
k8sCredentialsId ali-k8s-config k8s集配置id
k8sServerUrl 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:
server {
listen      80;
server_name  a.mldong;
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;
}
}nginx部署前端项目
---
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
volumeHandle: mldong-vue-test-pv
volumeAttributes:
server:"9fdd94bf87-wfq72-zhangjiakou.nas.aliyuncs"
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
selector:
matchLabels:
app: nginx
replicas:1
template:
metadata:
labels:
app: nginx
spec:
containers:
-name: nginx
image: registry-vpc-zhangjiakou.aliyuncs/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:
-host: a.mldong
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
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:mldong/mldong-vue.git', description:'仓库地址')
string(name:'registry_url', defaultValue:"registry.", 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:'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 /mirrors/node-sass/"
sh "npm --registry=${istry_url} install --unsafe-perm"
sh "npm run build:${params.profiles}"
sh "tar -zcvf dist"
stash name:"dist", includes:""
}
}
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 "
// 移出index.html，留最后复制
sh "mv dist/index.html ./"
/
/ 初始化⽬录
sh "ssh -o StrictHostKeyChecking=no -i $identity $userName@${_host} mkdir -p ${params.nfs_project_dir}/${params.project _name}"
// 复制⽂件
sh "scp -r -i $identity dist/* $userName@${_host}:${params.nfs_project_dir}/${params.project_name}"
// 复制index.html
sh "scp -r -i $identity index.html $userName@${_host}:${params.nfs_project_dir}/${params.project_name}"
//还原index.html
sh "mv index.html dist/index.html"
}
}
}
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。