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

KubeSphere流水线部署Vue前端项目

  • 1. 创建流水线项目
  • 2. 首先去流水线项目 创建三个凭证
  • 3. 创建流水线
  • 4. 流水线Jenkinsfile文件
  • 5. 可视化流水线设置说明
      • - 粘贴以上Jenkinsfile文件,点编辑流水线
      • - 拉取
      • - 编译
      • 打包
        • Dockerfile文件内容:
        • nginx dream-yard-vue.conf配置文件:
      • - 推送
      • - 部署
        • deploy.yaml文件:
  • 6. 以上就完成啦

1. 创建流水线项目

k8s KubeSphere流水线部署Vue前端项目 详细教程_第1张图片

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

在这里插入图片描述

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

3. 创建流水线

k8s KubeSphere流水线部署Vue前端项目 详细教程_第2张图片

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文件,点编辑流水线

- 拉取

k8s KubeSphere流水线部署Vue前端项目 详细教程_第3张图片

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

- 编译

k8s KubeSphere流水线部署Vue前端项目 详细教程_第4张图片

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

k8s KubeSphere流水线部署Vue前端项目 详细教程_第5张图片

  • 指定容器,添加嵌套步骤
  • 第二个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;
    }
}

- 推送

k8s KubeSphere流水线部署Vue前端项目 详细教程_第6张图片

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

- 部署

k8s KubeSphere流水线部署Vue前端项目 详细教程_第7张图片

  • 添加容器——>凭证,这个凭证是我们创建当前用户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. 以上就完成啦

点个爱心和关注吧

你可能感兴趣的:(Linux,DevOps,k8s,前端,vue.js,docker,shardingsphere,devops)