Jenkins 结合 Angular 展示构建版本

简介: 刚好最近在巩固相关的知识内容,以 angular 为主,那么咱就来参与下活动,希望能够坚持下去,顺便拿点小奖励。

image.png


一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情


刚好最近在巩固相关的知识内容,以 angular 为主,那么咱就来参与下活动,希望能够坚持下去,顺便拿点小奖励。


I am In.


Angular 结合 Git Commit 版本处理 文末我们留下了疑问🤔️ 下面将问题具体化


结合 jenkins 构建,我们能够获取到构建的信息,比如构建号,回填到页面否?


如下:


image.png


Uha,我们在原基础上修改下。


根目录添加文件 build_info.json


{}
复制代码


你没看错,build_info.json 的内容就是 {}


build_info.json 文件是给 Jenkinsfile 构建的时候生成的。


具体的实现思路如下:


  1. 在构建的过程中执行 Jenkinsfile 生成 build_info.json 文件


  1. 在对项目打包的时候,针对不同的环境考虑是否获取 build_info.json 文件的内容


为了方便演示,这里的环境只考虑生产环境


上面的步骤简单两步,最重要的一点是如何写入 build_info.json 文件内容


如果你不熟悉 Jenkinsfile 相关内容,请结合Jenkins Pipeline 结合 Gitlab 实现 Node 项目自动构建文章来阅读。此时你关注的重点是文章 Jenkinsfile 的内容,如下:


pipeline {
    agent any
    tools { 
        nodejs "nodejs" 
    }
    stages {
        stage('Dependency') {
            steps {
                sh 'npm install'
            }
        }
        # 我们在此添加过一个 stage,见下面👇
        stage('Build') { 
            steps {
                sh 'npm run clean' 
                sh 'npm run build' 
            }
        }
    }
}
复制代码


我们添加过一个 stage 来完成我们对 build_info.json 文件的写入。


stage('Version') {
  steps {
    script {
      def amap = 
        'build_number': BUILD_NUMBER, # 构建号
        'job_name': JOB_NAME # 任务名称
      ]
      # 写入文件
      writeJSON file: WORKSPACE+'build_info.json', json: amap # WORKSPACE 根目录
    }
  }
}
复制代码


Yeah,思路还可以... Right?


下面进入第二步骤:读取 build_info.json 的内容,我截取 version.js 生产环境那部分的内容:


// 引入生成的 build_info.json 文件
let buildInfo = require('./build_info.json');
if(config.env === 'production') { 
    // 获取构建的版本号,否则获取默认的版本
    versionObj.version = buildInfo.build_number || config.version 
}
复制代码


完成上面的文件之后,你就可以发布到相关的环境,顺利的话,在页面上你可以看到相关的版本号了。


这篇文章跟 angular 的关联不是很大,只是用来打配合 jenkins。下一篇文章是关于使用 Angular 进行 spa 开发的内容,敬请期待。



相关文章
|
2月前
|
前端开发 jenkins 持续交付
新的centos7.9安装docker版本的jenkins2.436.1最新版本-前端项目发布(五)
新的centos7.9安装docker版本的jenkins2.436.1最新版本-前端项目发布(五)
66 1
|
2月前
|
jenkins Devops 机器人
【DevOps】(五)Jenkins构建给企业微信推送消息
【DevOps】(五)Jenkins构建给企业微信推送消息
55 1
|
2月前
|
资源调度 jenkins 持续交付
jenkins 自动安装nodejs16.16.0版本报错处理
jenkins 自动安装nodejs16.16.0版本报错处理
95 0
|
2天前
|
敏捷开发 jenkins 测试技术
阿里云云效产品使用问题之如何进行类似于jenkins那样参数化构建
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
24天前
|
Kubernetes Cloud Native jenkins
云原生时代:从Jenkins到Argo Workflows,构建高效CI Pipeline
基于Argo Workflows可以构建大规模、高效率、低成本的CI流水线
|
2月前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
2月前
|
Java 开发工具 git
新的centos7.9安装docker版本的jenkins2.436.1最新版本-项目发布(三)
新的centos7.9安装docker版本的jenkins2.436.1最新版本-项目发布(三)
38 4
|
2月前
|
存储 jenkins 持续交付
Jenkins 构建环境指南
Delete workspace before build starts(常用) 在每次构建开始前清空工作空间。这确保了每次构建开始时都是在一个干净的环境下进行,避免了旧的文件或数据对新构建的影响。特别是对于需要频繁构建的项目,保持工作空间的干净能够确保构建过程的可靠性。 Use secret text(s) or file(s) (常用) 允许你在构建过程中使用加密的文本或文件作为凭证。这对于需要访问受保护资源的构建任务非常有用,可以安全地存储和使用密码、API 密钥等敏感信息,而不用担心泄漏。
207 2
|
2月前
|
jenkins Shell 持续交付
Jenkins job 创建、参数化、定时构建及时区偏差问题
在Jenkins中创建新任务,步骤:设置任务名,选择自由风格,输入描述并配置丢弃旧构建的规则(保留最近3次)。接着,参数化构建过程,添加字符参数并设定其名称、默认值和描述。在构建触发器中,设定定时构建为每2分钟一次(H2/ * * * *)。在构建阶段执行Shell命令,打印参数param。构建结果显示每2分钟执行一次,保留最近3次构建,参数默认值为Jenkins。定时构建的cron语法详解,并给出常见定时构建示例。当遇到Jenkins显示时间与系统时间不一致(UTC时间差8小时)的问题,解决办法是在Docker启动时添加参数调整时区至上海,确认时区修改成功后,构建历史时间将与系统时间同步。
37 2
|
2月前
|
jenkins 持续交付
Jenkins构建简单流水线
Jenkins构建简单流水线
25 0

热门文章

最新文章