kubeSphere DevOps部署vue项目

devops部署vue项目

🌔环境说明


🌏创建DevOps工程



🌏填写流水线信息



🌏创建流水线


1 我们编写JenkinsFile

流水线的部署流程如下图
拉取代码 编译代码 打包镜像 推送镜像 部署应用

🌔部署应用所需脚本

Jenkinsfile

groovy 复制代码
pipeline {
  agent {
    node {
      label 'nodejs'
    }

  }
  stages {
    stage('拉取代码') {
      agent none
      steps {
        git(url: '代码地址', credentialsId: 'git-code-auth', branch: 'pro', changelog: true, poll: false)
      }
    }

    stage('构建代码') {
      agent none
      steps {
        container('nodejs') {
          sh '''ls
npm install --force
npm run build:k8sprod'''
        }

      }
    }

    stage('构建镜像') {
      agent none
      steps {
        container('nodejs') {
          sh 'ls'
          sh 'docker build -t tingyuan-cloud-service-web-admin:latest .'
        }

      }
    }

    stage('推送镜像') {
      agent none
      steps {
        container('nodejs') {
          withCredentials([usernamePassword(credentialsId: 'aliyun-docker', passwordVariable: 'DOCKER_PASSWORD_VAR', usernameVariable: 'DOCKER_USER_VAR',)]) {
            sh 'echo "$DOCKER_PASSWORD_VAR" | docker login $REGISTRY -u "$DOCKER_USER_VAR" --password-stdin'
            sh 'docker tag admin:latest 镜像仓库地址:SNAPSHOT-$BUILD_NUMBER'
            sh 'docker push 镜像仓库地址:SNAPSHOT-$BUILD_NUMBER'
          }

        }

      }
    }

    stage('发布应用') {
      agent none
      steps {
        kubernetesDeploy(configs: 'deploy/**', enableConfigSubstitution: true, kubeconfigId: "$KUBECONFIG_CREDENTIAL_ID")
      }
    }

  }
  environment {
    DOCKER_CREDENTIAL_ID = 'dockerhub-id'
    GITHUB_CREDENTIAL_ID = 'github-id'
    KUBECONFIG_CREDENTIAL_ID = 'demo-kubeconfig'
    REGISTRY = '镜像仓库地址'
    GITHUB_ACCOUNT = 'kubesphere'
    DOCKERHUB_NAMESPACE = '镜像仓库命名空间'
  }
  parameters {
    string(name: 'TAG_NAME', defaultValue: '', description: '')
  }
}

Dockerfile

sh 复制代码
FROM nginx
LABEL maintainer=hrd
COPY dist /usr/share/nginx/html/
EXPOSE 80
yaml 复制代码
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: 我用的是前端项目,可以自行决定叫什么
  name: 我用的是前端项目,可以自行决定叫什么
  namespace: ty   #一定要写名称空间
spec:
  progressDeadlineSeconds: 600
  replicas: 1
  selector:
    matchLabels:
      app: 我用的是前端项目,可以自行决定叫什么
  strategy:
    rollingUpdate:
      maxSurge: 50%
      maxUnavailable: 50%
    type: RollingUpdate
  template:
    metadata:
      labels:
        app: 我用的是前端项目,可以自行决定叫什么
    spec:
      imagePullSecrets:
        - name: aliyun-docker  #提前在项目下配置访问阿里云的账号密码
      containers:
        - image: 镜像仓库地址,我用阿里云镜像仓库
          imagePullPolicy: Always
          name: app
          ports:
            - name: http-80
              containerPort: 80
              protocol: TCP
          resources: {}
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
      dnsPolicy: ClusterFirst
      restartPolicy: Always
      terminationGracePeriodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:
  labels:
    app: 我用的是前端项目,可以自行决定叫什么
  name: 我用的是前端项目,可以自行决定叫什么
  namespace: ty
spec:
  ports:
    - name: http
      port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: 我用的是前端项目,可以自行决定叫什么
  sessionAffinity: None
  type: ClusterIP

🌔脚本一些参数如何设置说明

🌏deploy.yaml中的:imagePullSecrets:name属性

yaml 复制代码
imagePullSecrets:
        - name: aliyun-docker  #提前在项目下配置访问阿里云的账号密码 


选择刚才添加的,添加凭证设置变量

🌏jenkinsfile中的kubeconfigId: "$KUBECONFIG_CREDENTIAL_ID"


🌏jenkinsfile中的git-code-auth属性

相关推荐
麦麦大数据4 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
java_logo5 小时前
Docker 部署 WordPress 全流程
运维·docker·容器·word·php·1024程序员节
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小小的木头人5 小时前
Ubuntu 自动挂载移动硬盘
运维
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Mr. Sun_6 小时前
Dell Networking SmartFabric OS10 如何设置虚拟链路中继 (VLT)
运维·网络·dell vlt
麦麦大数据7 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
北城笑笑7 小时前
Server 15 ,VMware ESXi 实战指南:Ubuntu 20.04.6 版本虚拟机静态 IP 配置、分辨率固定及远程访问实践
linux·运维·ubuntu·1024程序员节
汪汪大队u7 小时前
IPv4与IPv6的对比
运维·网络·智能路由器
橙子199110167 小时前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin