云实验室(21) - kubesphere的vue流水线

0. 效果

1. 准备工作

1.1 开启流水线

见官方文档

https://kubesphere.com.cn/docs/devops-user-guide/how-to-use/create-a-pipeline-using-graphical-editing-panel/

1.2 仓库

docker仓库 : dockerhub / 私有镜像仓库
前端代码仓库 : git / gitlab / gitee ...

1.2.1 前端代码准备

nginx , k8s

deploy.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  namespace: $DEPLOY_NAMESPACE
  name: $APP_NAME
  labels:
    app: $APP_NAME
spec:
  replicas: 1
  selector:
    matchLabels:
      app: $APP_NAME
  template:
    metadata:
      labels:
        app: $APP_NAME
    spec:
      containers:
      - name: $APP_NAME
        image: $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$TAG
        ports:
        - containerPort: 80
          protocol: TCP
        imagePullPolicy: Always
      dnsPolicy: ClusterFirst
      restartPolicy: Always
---
apiVersion: v1
kind: Service
metadata:
  namespace: $DEPLOY_NAMESPACE
  name: $APP_NAME
spec:
  type: ClusterIP
  ports:
  - port: 80        
    targetPort: 80 
    protocol: TCP
  selector:
    app: $APP_NAME   

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
		listen       80;
		listen  [::]:80;
		server_name  localhost;

		location / {
			root   /usr/share/nginx/html/;
			index  index.html index.htm;
		}

		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root   /usr/share/nginx/html;
		}
	}
}

Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY deploy/nginx/nginx.conf /etc/nginx/nginx.conf

2. 流水线

2.1 创建devops项目

2.2 创建流水线

注意,代码中不含jenkinsFile的话 ,可以先不填代码仓库这样可以在kubesphere中图形化编辑流水线;

2.3 编辑流水线

2.4 编辑环境变量

2.5 编辑jenkinsFile

样例 :

pipeline {
  agent {
    node {
      label 'nodejs'
    }

  }
  stages {
    stage('代码拉取') {
      steps {
        git(url: '$GIT_URL', credentialsId: 'gitlab-infra-secret', changelog: true, poll: false, branch: 'main')
        sh 'echo 拉取成功:$GIT_URL $PROJECT_BRANCH'
      }
    }

    stage('编译') {
      agent none
      steps {
        container('nodejs') {
          sh 'rm -rf ./dist && ls -l'
          sh 'npm config set registry https://registry.npm.taobao.org'
          sh 'npm install'
          sh 'npm run build'
          sh 'pwd'
        }

      }
    }

    stage('构建和推送镜像') {
      agent none
      steps {
        container('nodejs') {
          sh 'echo 镜像名:$REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME'
          sh '''docker build --no-cache -f Dockerfile -t $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME .
docker build --no-cache -f Dockerfile -t $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$TAG .'''
          withCredentials([usernamePassword(credentialsId : 'aliyun-harbor-secret' ,passwordVariable : 'DOCKER_PASSWORD' ,usernameVariable : 'DOCKER_USERNAME' ,)]) {
            sh 'echo "$DOCKER_PASSWORD" | docker login $REGISTRY -u "$DOCKER_USERNAME" --password-stdin'
            sh '''docker push  $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME
docker push  $REGISTRY/$DOCKERHUB_NAMESPACE/$APP_NAME:$TAG'''
          }

        }

      }
    }

    stage('部署') {
      agent none
      steps {
        sh 'echo 即将部署至:本地集群,$DEPLOY_NAMESPACE项目,$APP_NAME'
        container('nodejs') {
          withCredentials([kubeconfigFile(credentialsId : 'login-cube-front-kubeconfig' ,variable : 'KUBECONFIG' ,)]) {
            container('nodejs') {
              sh '''
                  envsubst < deploy/k8s/deploy.yaml | kubectl apply -f -
                  '''
            }

          }

        }

      }
    }

  }
}