k8s KubeSphere流水线部署Vue前端项目 详细教程

pipeline {
  agent {
    node {
      label 'nodejs'
    }
  }
  stages {
    stage('拉取') {
      agent none
      steps {
        container('nodejs') {
          git(url: 'https://gitee.com/wy521a/dream-yard-vue.git', credentialsId: 'my-login', branch: 'master', changelog: true, poll: false)
          sh 'ls '
        }
      }
    }
    stage('编译') {
      agent none
      steps {
        container('nodejs') {
          sh 'ls'
          sh 'npm install --registry=https://registry.npm.taobao.org'
          sh 'npm run build:stage'
        }
      }
    }
    stage('打包') {
      agent none
      steps {
        container('nodejs') {
          sh 'ls '
          sh 'docker build -t dream-yard-vue:latest -f docker/Dockerfile  .'
        }
      }
    }
    stage('推送') {
      agent none
      steps {
        container('nodejs') {
          withCredentials([usernamePassword(credentialsId : 'my-aliyun-docker' ,passwordVariable : 'DOCKER_USER' ,usernameVariable : 'DOCKER_PASSWORD' ,)]) {
            sh 'echo 镜像库账号| docker login  镜像库克地址 -u 镜像库账号 -p 镜像库密码'
            sh 'docker tag dream-yard-vue:latest registry.cn-hangzhou.aliyuncs.com/dream-yard/dream-yard-vue:$BUILD_NUMBER'
            sh 'docker push  registry.cn-hangzhou.aliyuncs.com/dream-yard/dream-yard-vue:$BUILD_NUMBER'
          }
        }
      }
    }
    stage('部署') {
      agent none
      steps {
        container('nodejs') {
          withCredentials([
                                                      kubeconfigFile(
                                                                credentialsId: 'kubeconfig',
                                                                variable: 'KUBECONFIG')
                                                                ]) {
                sh 'envsubst < docker/deploy.yaml | kubectl apply -f -'
              }
            }
          }
        }
      }
    }

FROM nginx
COPY ./dist /data
RUN rm /etc/nginx/conf.d/default.conf
ADD ./docker/dream-yard-vue.conf /etc/nginx/conf.d/default.conf
RUN /bin/bash -c 'echo init ok'

server {
    listen 80;
    server_name localhost;
    gzip on;
    gzip_static on;     # 需要http_gzip_static_module 模块
    gzip_min_length 1k;
    gzip_comp_level 4;
    gzip_proxied any;
    gzip_types text/plain text/xml text/css;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.(?!.*SV1)";
    # 前端打包好的dist目录文件
    root /data/;
    # 若新增后端路由前缀注意在此处添加（|新增）
    location ~* ^/(dev-api) {
       proxy_connect_timeout 15s;
       proxy_send_timeout 15s;
       proxy_read_timeout 15s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto http;
       rewrite ^/dev-api/(.*)$ /$1 break;
       proxy_pass http://dream-yard-admin-service.dream-yard:8080;
    }
}

apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: dream-yard-vue
  name: dream-yard-vue
  namespace: dream-yard
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  strategy:
    type: RollingUpdate #  Recreate：在创建新Pods之前，所有现有的Pods会被杀死 RollingUpdate：滚动升级，逐步替换的策略，同时滚动升级时，支持更多的附加参数
    rollingUpdate:
      maxSurge: 1  #maxSurge：1 表示滚动升级时会先启动1个pod
      maxUnavailable: 1 #maxUnavailable：1 表示滚动升级时允许的最大Unavailable的pod个数，也可以填写比例，maxUnavailable=50%
  selector:
    matchLabels:
      app: dream-yard-vue
  template:
    metadata:
      labels:
        app: dream-yard-vue
    spec:
      containers:
        - env:
            - name: CACHE_IGNORE
              value: js|html
            - name: CACHE_PUBLIC_EXPIRATION
              value: 3d
          image: registry.cn-hangzhou.aliyuncs.com/dream-yard/dream-yard-vue:$BUILD_NUMBER
          readinessProbe:
            httpGet:
              path: /
              port: 80
            timeoutSeconds: 10
            failureThreshold: 30
            periodSeconds: 5
          imagePullPolicy: Always
          name: dream-yard-vue
          ports:
            - containerPort: 80
              protocol: TCP
          resources:
            limits:
              cpu: 300m
              memory: 600Mi
            requests:
              cpu: 100m
              memory: 100Mi
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      terminationGracePeriodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:
  labels:
    app: dream-yard-vue-service
  name: dream-yard-vue-service
  namespace: dream-yard
spec:
  ports:
    - name: http
      port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: dream-yard-vue
  sessionAffinity: None
  type: NodePort