kubeSphere DevOps部署vue项目

news2025/3/2 1:24:38

devops部署vue项目

  • 🌔环境说明
    • 🌏创建DevOps工程
    • 🌏填写流水线信息
    • 🌏创建流水线
  • 🌔部署应用所需脚本
    • Jenkinsfile
    • Dockerfile
  • 🌔脚本一些参数如何设置说明
    • 🌏deploy.yaml中的:imagePullSecrets:name属性
    • 🌏jenkinsfile中的kubeconfigId: "$KUBECONFIG_CREDENTIAL_ID"
    • 🌏jenkinsfile中的git-code-auth属性

🌔环境说明


  • 已经安装kubesphere的devops组件
  • 安装教程可参考官方文档:https://v3-1.docs.kubesphere.io/zh/docs/pluggable-components/devops/

🌏创建DevOps工程


在这里插入图片描述
在这里插入图片描述

🌏填写流水线信息


在这里插入图片描述
在这里插入图片描述

🌏创建流水线


1 我们编写JenkinsFile
在这里插入图片描述

流水线的部署流程如下图

拉取代码
编译代码
打包镜像
推送镜像
部署应用

🌔部署应用所需脚本

Jenkinsfile

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

FROM nginx
LABEL maintainer=hrd
COPY dist /usr/share/nginx/html/
EXPOSE 80

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属性

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

在这里插入图片描述
在这里插入图片描述
选择刚才添加的,添加凭证设置变量
在这里插入图片描述

🌏jenkinsfile中的kubeconfigId: “$KUBECONFIG_CREDENTIAL_ID”

在这里插入图片描述
在这里插入图片描述

🌏jenkinsfile中的git-code-auth属性

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1382226.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ovtio不同版本下载

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩! 主要专栏内容包括: †《LAMMPS小技巧》: ‾ \textbf…

Windows python下载

1、下载 进入到地址:https://www.python.org/dowmloads 可以直接下载最新的版本 或者点击Windows,查看下方更多的版本 点击文档就下载下来啦 2、安装 双击下载的文件,勾选Add python.exe to PATH添加到环境变量中,选择Coutomi…

NLP技术在搜索推荐场景中的应用

NLP技术在搜索推荐中的应用非常广泛,例如在搜索广告的CTR预估模型中,NLP技术可以从语义角度提取一些对CTR预测有效的信息;在搜索场景中,也经常需要使用NLP技术确定展现的物料与搜索query的相关性,过滤掉相关性较差的物…

milvus安装及langchain调用

milvus安装及langchain调用 安装milvus安装docker-compose安装milvus安装可视化界面attu 通过langchain调用milvus安装langchain安装pymilvus调用milvus 安装milvus 安装docker-compose 下载文件 curl -L https://github.com/docker/compose/releases/download/1.21.1/docke…

【QT】QMessageBox 弹出消息框,对话确认框(确定/取消)

1.无互动 QMessageBox::information(nullptr,"信息","登陆成功");2.互动:确定、取消 QMessageBox::StandardButton box; box QMessageBox::question(this, "提示", "确定要添加吗?", QMessageBox::Yes|QMessageBox::…

【论文阅读笔记】MobileSal: Extremely Efficient RGB-D Salient Object Detection

1.介绍 MobileSal: Extremely Efficient RGB-D Salient Object Detection MobileSal:极其高效的RGB-D显著对象检测 2021年发表在 IEEE Transactions on Pattern Analysis and Machine Intelligence。 Paper Code 2.摘要 神经网络的高计算成本阻碍了RGB-D显着对象…

数据结构与算法教程,数据结构C语言版教程!(第三部分、栈(Stack)和队列(Queue)详解)六

第三部分、栈(Stack)和队列(Queue)详解 栈和队列,严格意义上来说,也属于线性表,因为它们也都用于存储逻辑关系为 "一对一" 的数据,但由于它们比较特殊,因此将其单独作为一章,做重点讲解。 使用栈…

vue3 - 自定义弹框组件

写了一个弹框组件 <template><transition name"modal-fade"><div v-if"showFlag" class"myModal"><div class"content"><div class"topBox"><div class"leftTitle"><spa…

爬虫—抓取表情党热门栏目名称及链接

爬虫—抓取表情党热门栏目名称及链接 表情党网址&#xff1a;https://qq.yh31.com/ 目标&#xff1a;抓取表情党主页的热门栏目名称及对应的链接&#xff0c;如下图所示&#xff1a; 按F12&#xff08;谷歌浏览器&#xff09;&#xff0c;进入开发者工具模式&#xff0c;进行…

机器学习数据处理

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

【图形学】探秘图形学奥秘:DDA与Bresenham算法的解密与实战

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《图形学 | 图像解码》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 ​ 目录 &#x1f30c;1. 初识模式识别…

28 星际旋转

效果演示 实现了一个太阳系动画&#xff0c;其中包括了地球、火星、金星、土星、水星、天王星、海王星以及火卫二号等行星的动画效果。太阳系的行星都被放在一个固定的容器中&#xff0c;并使用CSS动画来实现旋转和移动的效果。当太阳系的行星绕着太阳运行时&#xff0c;它们会…

鸿蒙开发-UI-组件-状态管理

鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 文章目录 前言 一、什么是状态管理 二、管理组件拥有的状态 1.组件内状态 State装饰器 2.父子组价单向同步 Prop装饰器 3.父子双向同步 Link装…

Gitlab中的CICD的使用方法

一、CI/CD执行机制 二、离线安装gitlab-runner 下载相应版本的gitlab-runner &#xff08;下载地址&#xff1a;https://packages.gitlab.com/runner/gitlab-runner&#xff09; dpkg -i gitlab-runner_12.8.0_amd64.debgitlab-runner register第3步中需要的信息可从下图所示…

mysql关于创建表的小试题

目录 例题&#xff1a; 解题思路及步骤&#xff1a; 实验步骤&#xff1a; 步骤一&#xff1a;创建数据库 步骤二&#xff1a;创建表 步骤三&#xff1a;插入数据 例题&#xff1a; 1、创建一个英雄表(hero)&#xff0c;管于四大名著的主键 nam…

翻译: Streamlit从入门到精通 基础控件 一

这个关于Streamlit的教程旨在帮助数据科学家或机器学习工程师&#xff0c;他们不是网络开发者&#xff0c;也不想花费数周时间学习使用这些框架来构建网络应用程序。 1. 什么是Streamlit&#xff1f; Streamlit是一个免费且开源的框架&#xff0c;用于快速构建和共享美观的机器…

基于Go框架,Cloudreve个人免费开源网盘系统源码,支持云存储(七牛、阿里云OSS、腾讯云COS、又拍云、OneDrive)

源码介绍 在数字化时代&#xff0c;我们经常需要存储、分享大量的文件&#xff0c;如照片、视频、文档等。然而&#xff0c;许多商业网盘服务却存在限速、收费等问题&#xff0c;给用户带来诸多不便。现在&#xff0c;我们为您推荐一款免费开源的网盘系统——Cloudreve。 Clo…

【PACS Web系统】全网首发JAVA开发PACS医疗影像工作站

目录 业务分析&#xff1a; 市场前景&#xff1a; Web版相对单机版优势&#xff1a; 主干功能&#xff1a; RBAC用户权限管理、服务监控、字典维护、通知公告等基础模块&#xff1b; 手动上传Dicom文件/文件夹&#xff0c;及接收Dicom服务器的Dicom文件集功能&#xff1b…

Sqoop与其他数据采集工具的比较分析

比较Sqoop与其他数据采集工具是一个重要的话题&#xff0c;因为不同的工具在不同的情况下可能更适合。在本博客文章中&#xff0c;将深入比较Sqoop与其他数据采集工具&#xff0c;提供详细的示例代码和全面的内容&#xff0c;以帮助大家更好地了解它们之间的差异和优劣势。 Sq…

LLVM系列(1): 在微软Visual Studio下编译LLVM

参考链接&#xff1a; Getting Started with the LLVM System using Microsoft Visual Studio — LLVM 18.0.0git documentation 1.安装visualstudio&#xff0c;版本需要大于vs2019 本机环境已安装visual studio2022&#xff0c;省略 2安装Makefile&#xff0c;版本需要大…