前端工程化之Jenkins

本文最后更新于:8 个月前

下文安装通过「war安装包」安装,使用Docker安装方式可忽略本文

img

安装运行

  1. 安装Java环境
  2. 下载Jenkins的war包,下载地址
  3. 运行war包java -jar jenkins.war --httpPort=8080
  4. 打开http://localhost:8080,等待Jenkins启动
  5. 初次进入页面会要求输入初始密码,初始密码可以启动时在shell看到

img

  1. 跟随提示进行设置。设置管理员账户和密码、安装插件、设置网址等
  2. 完成

配置

推荐插件

Environment Injector Plugin 用于注入环境变量
Git Parameter Plug-In 构建时选择git参数
Publish Over FTP 执行FTP相关操作
Publish Over SSH 执行Shell相关操作
NodeJS Plugin 安装Nodejs环境

配置Git

  1. Jenkins服务器生成Git密钥,Git - 生成 SSH 公钥
  2. id_dsa私钥配置到Jenkins凭证当中

img

  1. id_dsa.pub公钥配置到Git Server中

imgimg

配置FTP Server

imgimg

配置Node环境

imgimg

尝试新建一个构建项目

  1. 新建构建项目,并进入配置页面

  2. 配置「构建前选择代码分支」(需要安装插件)

img

  1. 配置Git仓库地址,没有凭证则需要添加

img

  1. 配置构建命令,通过Shell命令执行

img

  1. 构建后进行打包保存和FTP服务器部署

img

  1. 保存配置,执行构建

img

  1. 等待构建完成

一个简单的前端项目构建流程就是上面这些,除此之外可以通过Shell、插件、Jenkins自带的环境变量等实现更定制化的功能。比如node_modules的缓存提高构建速度、通过构建参数执行不同环境的打包。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 通过判断package.json的md5来确认是否需要yarn安装依赖
CACHE_FOLDER=${HOME}/md5_cache/md5
echo "EXECUTOR_NUMBER: ${EXECUTOR_NUMBER}"
MD5_FILE_NAME=package-json_${EXECUTOR_NUMBER}.md5sum

[ -d ${CACHE_FOLDER} ] || mkdir -p ${CACHE_FOLDER}
ls ${CACHE_FOLDER}

if [ -f ${CACHE_FOLDER}/${MD5_FILE_NAME} ];then
cp ${CACHE_FOLDER}/${MD5_FILE_NAME} ${MD5_FILE_NAME}
md5sum package.json
cat ${MD5_FILE_NAME}
md5sum -c ${MD5_FILE_NAME} || yarn
else
echo "No md5sum backup"
yarn
fi

echo "create new md5sum backup"
md5sum package.json
md5sum package.json > ${MD5_FILE_NAME}
cp ${MD5_FILE_NAME} ${CACHE_FOLDER}

总结:相比于Gitlab,Jenkins在代码管理并不擅长,更多是侧重于构建部署。


前端工程化之Jenkins
https://www.chanx.tech/2021/7dfe4446384f/
作者
ischanx
发布于
2021年11月14日
更新于
2023年8月7日
许可协议