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

1. 创建流水线项目

2. 首先去流水线项目 创建三个凭证

• kubeconfig类型：默认内容为当前用户的 kubeconfig 配置。 选择此类型创建默认有值
• 用户名密码（my-login）：git账号和密码
• 用户名密码（my-aliyun-docker）：阿里云容器镜像仓库账号密码

3. 创建流水线

4. 流水线Jenkinsfile文件

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 -'
              }

            }

          }
        }

      }
    }

5. 可视化流水线设置说明

- 粘贴以上Jenkinsfile文件,点编辑流水线

- 拉取

• Url：git地址
• 凭证名称：选择我们创建的my-login名称的凭证，就是我们配置的git登录的账号密码
• 分支：就是拉取哪个分支

- 编译

• 指定容器，添加嵌套步骤
• 第二个shell脚本是下载资源包命令
• 第三个shell脚本进行打包

• 打包

• 指定容器，添加嵌套步骤
• 第二个shell脚本是运行Dockerfile文件进行打镜像命令

Dockerfile文件内容：

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'

nginx dream-yard-vue.conf配置文件：

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;
    }
}

- 推送

• 这里需要指定容器——>添加凭证
• 声明：我这里使用凭证的账号密码变量不好使，所以就写死了
• 第一个shell脚本是登录阿里云容器镜像仓库
• 第二个shell脚本是打镜像命令
• 第三个是将我们打的镜像推送到阿里云镜像仓库

- 部署

• 添加容器——>凭证，这个凭证是我们创建当前用户kubeconfig凭证
• shell脚本命令就是执行部署的命令，不要使用kubernetesDeploy部署，这个到后面会停止使用、

deploy.yaml文件：

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

6. 以上就完成啦

点个爱心和关注吧