持续集成交付CICD:Jenkins使用GitLab共享库实现前端项目镜像构建

news2024/11/26 13:28:36

目录

一、实验

1. GitLab修改项目文件与Harbor环境确认

2.Jenkins使用GitLab共享库实现前端项目镜像构建

3.优化CI流水线封装Harbor账户密码

4.Jenkins再次使用GitLab共享库实现前端项目镜像构建


一、实验

1. GitLab修改项目文件与Harbor环境确认

(1)GitLab共享库新建k8sci.jenkinsfile

(2) 查看目录

 

(3)修改k8sci.jenkinsfile

@Library("mylib@master") _
import org.devops.*


def checkout = new Checkout()
def build = new Build()
def unittest = new UnitTest()
def sonar = new Sonar()


pipeline {
    agent { label "build"}

    options {
        skipDefaultCheckout true
    }
    stages{
        stage("Checkout"){
            steps{
                script {
                    println("GetCode")
                    checkout.GetCode("${env.srcUrl}","${env.branchName}")
                }
            }
        }
        stage("build"){
            steps{
                script{
                    println("Build")
                    build.CodeBuild("${env.buildTool}")
                }
            }

        }

        stage("UnitTest"){
            steps{
                script{
                    println("Test")
                    unittest.CodeTest("${env.buildTool}")
                }
            }

        }
        stage("SonarScan"){
            steps {
                script {
                    groupName = "${JOB_NAME}".split("/")[0]
                    projectName ="${JOB_NAME}".split("/")[-1].split("_")[0]
                    sonar.CodeSonar("${env.buildTool}",projectName,groupName)
                }

            }

        }
        stage("PushImage"){
            steps {
                script {
                    repoName = "${JOB_NAME}".split("/")[0]
                    projectName ="${JOB_NAME}".split("/")[-1].split("_")[0]
                    env.registry = "192.168.204.15"
                    env.imageName = "${env.registry}/${repoName}/${projectName}:${env.branchName}"
                   
                        sh """
                            #重写HTML首页
                            echo "${env.imageName}" > dist/index.html 
    
                            #构建镜像
                            docker build -t ${env.imageName} .
                           
                            #登录镜像仓库
                            docker login -u admin -p Harbor12345 ${env.registry}
                            
                            #上传镜像
                            docker push  ${env.imageName}
    
                            #删除镜像
                            sleep 2
                            docker rmi ${env.imageName}
                        """



                }

            }

        }

    }

}

(4)前端项目新增Dockerfile


FROM nginx:1.17.7

COPY dist/ /usr/share/nginx/html

(5)Harbor确认devops03项目

2.Jenkins使用GitLab共享库实现前端项目镜像构建

(1)Jenkins新建流水线

(2)取消构建触发器

(3)修改SCM脚本路径

(4)手动构建前端项目流水线

(5)成功

(6)查看Blue Ocean

(7)Harbor已上传前端项目镜像

(8)本地拉取镜像测试

docker pull 192.168.204.15/devops03/devops03-devops-ui:master

docker run -itd --name devops03demo1 -p 8092:80 192.168.204.15/devops03/devops03-devops-ui:master

curl http://127.0.0.1:8092

(9)删除容器

docker rm devops03demo1 -f

3.优化CI流水线封装Harbor账户密码

(1)Jenkins新建凭据

(2)生成流水线脚本

(3)Jenkins新建视图

(4)列表添加流水线项目

(5)GitLab共享库修改k8sci.jenkinsfile

@Library("mylib@master") _
import org.devops.*


def checkout = new Checkout()
def build = new Build()
def unittest = new UnitTest()
def sonar = new Sonar()


pipeline {
    agent { label "build"}

    options {
        skipDefaultCheckout true
    }
    stages{
        stage("Checkout"){
            steps{
                script {
                    println("GetCode")
                    checkout.GetCode("${env.srcUrl}","${env.branchName}")
                }
            }
        }
        stage("build"){
            steps{
                script{
                    println("Build")
                    build.CodeBuild("${env.buildTool}")
                }
            }

        }

        stage("UnitTest"){
            steps{
                script{
                    println("Test")
                    unittest.CodeTest("${env.buildTool}")
                }
            }

        }
        stage("SonarScan"){
            steps {
                script {
                    groupName = "${JOB_NAME}".split("/")[0]
                    projectName ="${JOB_NAME}".split("/")[-1].split("_")[0]
                    sonar.CodeSonar("${env.buildTool}",projectName,groupName)
                }

            }

        }
        stage("PushImage"){
            steps {
                script {
                    repoName = "${JOB_NAME}".split("/")[0]
                    projectName ="${JOB_NAME}".split("/")[-1].split("_")[0]
                    env.registry = "192.168.204.15"
                    env.imageName = "${env.registry}/${repoName}/${projectName}:${env.branchName}"
                    withCredentials([usernamePassword(credentialsId: '8c662308-4991-4576-9826-74a5417de685', passwordVariable: 'DOCKER_PASSWD', usernameVariable: 'DOCKER_USER')]) {
                        sh """
                            #重写HTML首页
                            echo "${env.imageName}" > dist/index.html 
    
                            #构建镜像
                            docker build -t ${env.imageName} .
                           
                            #登录镜像仓库
                            docker login -u ${DOCKER_USER} -p ${DOCKER_PASSWD} ${env.registry}
                            
                            #上传镜像
                            docker push  ${env.imageName}
    
                            #删除镜像
                            sleep 2
                            docker rmi ${env.imageName}
                        """
                    }


                }

            }

        }

    }

}

4.Jenkins再次使用GitLab共享库实现前端项目镜像构建

(1)GitLab前端项目新建RELEASE-1.1.5分支

(2)Jenkins手动构建流水线

(3)成功

(4)Blue Ocean查看

(5)Harbor已上传前端项目镜像

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

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

相关文章

Day64力扣打卡

打卡记录 方格取数(线性DP) import sys input sys.stdin.readline 输入样例: 8 2 3 13 2 6 6 3 5 7 4 4 14 5 2 21 5 6 4 6 3 15 7 2 14 0 0 0 输出样例: 67 n int(input()) w [[0] * (n 1) for _ in range(n 1)] while Tru…

三大主流前端框架介绍

在前端项目中,可以借助某些框架(如React、Vue、Angular等)来实现组件化开发,使代码更容易复用。此时,一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成,而是按照组件的思想将网页划分成一个个组…

Android-----AndroidManifests.xml 之meta-data

一、概念 meta-data:元数据、文件元数据。主要用来定义一些组件相关的配置值。 metadata是一组供父组件使用的名值对(name-value pair),一个组件元素可以包含任意数量的meta-data子元素。这些子元素的值存放在一个 Bundle 对象中…

Qt-QTransform介绍与使用

QTransform是一个用于二维坐标系转换的类。我们知道Qt的坐标系是左上角为原点,x轴向右,y轴向下,屏幕上每个像素代表一个单位,那么,如果我们想要在屏幕上建立自己的坐标系用于绘制,就需要借助QTransform。 …

分布式链路追踪 —— 基于Dubbo的traceId追踪传递

文章目录 原文链接RpcContext 上下文对象Dubbo 过滤器(Filter)对象基于Dubbo的traceId追踪传递实现 原文链接 RpcContext 上下文对象 在实现 Dubbo 调用之间的链路跟踪之前,先简单了解 RpcContext 上下文对象和 Filter 过滤器对象&#xff…

Koa.js 入门手册:洋葱模型插件机制详解以及常用中间件

前言 Nodejs 提供了 http 能力,我们通过如下代码可以快速创建一个http server服务 const http require(http);http.createServer((req, res) > {res.write(hello\n);res.end();}).listen(3000);使用nodejs提供的原生能力启动一个http server并不麻烦&#xff…

详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第六节(js版) ——模块化设计实现复杂页面

随着HarmonyOS生态的日渐完善,越来越多的厂商加入鸿蒙系统应用开发的行列。然而从其他系统转到鸿蒙开发,很多开发者还是需要一个适应的过程,特别是面对比较复杂的页面,应该如何合理进行模块化拆分是一个难点。 本文将通过一个实例,来分析如果采用模块化的方式实现一个包含丰富内…

redis各种数据类型的应用场景

String应用场景 单值缓存 SET key value GET key 对象缓存 SET user:1 value(json格式数据)MSET user:1:name zhuge user:1:balance 1888 MGET user:1:name user:1:balance 分布式锁 SETNX product:10001 true //返回1代表获取锁成功 …

7天速成Python——第三天

[7天速成Python——第三天] 3 数据类型 布尔值(bool):True False整型(int) :1 19 22 300字符串(str) :"中国联通" upper/lower/isdecimal/strip/lstrip/r…

Postman使用总结--关联

当接口和接口之间,有依赖关系时,需要借助 postman 关联技术来实现

【算法与数据结构】LeetCode55、45、跳跃游戏 I 、II

文章目录 一、跳跃游戏I二、跳跃游戏II三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、跳跃游戏I 思路分析:本题目标是根据跳跃数组的元素,判断最终能够到达数组末端。我们引入了一个跳跃范围…

后端低代码平台探索总结

业务需求快速变化的背景 我们在对业务需求进行梳理后,在进行程序设计时,对于将来可能发生变化的常量、变量、阀值、开关、条件、公式等等,可能会配置在环境变量或数字字典来支持可配置。但是需求变化往往会更加复杂、更加不可预测&#xff0…

Java中Exception的使用方法

Exception介绍异常处理机制的优缺点常见的Exception异常处理的常见错误优雅的处理异常异常处理中存在的性能问题Java自定义异常示例 Exception介绍 在Java中,异常(Exception)是一种特殊类型的对象,表示程序运行过程中发生的意外或…

智慧养老:创新科技让老年生活更美好

智慧养老:创新科技让老年生活更美好 随着人口老龄化的加剧,智慧养老成为了关注焦点。智慧养老以创新科技为核心,旨在改善老年人的生活品质、促进健康、增强安全感和社会融入感。本文将详细介绍智慧养老的关键技术和应用场景,带您了…

iPhone16:首款AI iPhone?

随着科技水平的不断发展,智能手机逐渐成为人们最依赖的电子产品之一。为能够满足用户需求,手机的硬件、外观设计与性能飞速提升,这也导致智能手机市场快速进入到瓶颈期。 为了能够带来更优秀的表现,苹果可能会为iPhone 16系列带来…

黑马React:基础拓展

黑马React: D10-基础拓展 Date: December 18, 2023 useReducer 基础使用 作用: 让 React 管理多个相对关联的状态数据 补充:和useState的作用类似,用来管理相对复杂的状态数据 **特点:**useReducer返回值为一个数组, 可以解构处数值stat…

【具身智能评估9】Open X-Embodiment: Robotic Learning Datasets and RT-X Models

论文标题:Open X-Embodiment: Robotic Learning Datasets and RT-X Models 论文作者:– 论文原文:https://arxiv.org/abs/2310.08864 论文出处:– 论文被引:–(12/18/2023) 论文代码&#xff1a…

力扣日记12.18-【二叉树篇】合并二叉树

力扣日记:【二叉树篇】合并二叉树 日期:2023.12.18 参考:代码随想录、力扣 617. 合并二叉树 题目描述 难度:简单 给你两棵二叉树: root1 和 root2 。 想象一下,当你将其中一棵覆盖到另一棵之上时&#xf…

公共字段自动填充——后端

场景:当处理一些请求时,会重复的对数据库的某些字段进行赋值(如:在插入和更新某个物品时,需要更新该物品的更新时间和更新者的信息),这样会导致代码冗余。 如: 思路: 自…

Arma3/武装突袭3东风战役最后一关游戏无法保存的解决办法

Arma3这个游戏玩进去还是非常有可玩性的,可是在玩过了它本体自带的东风系列战役后,在最精髓的最后一关——game over这个关卡,却有个非常头疼的问题。 逃跑其实是非常简单的,但是想要无伤环游全岛确十分困难,因为这关卡…