前端工程化之Jenkins

Chanx
#前端#工程化
535 字6 分钟阅读

下文安装通过「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中

img
img

配置FTP Server

img
img

配置Node环境

img
img

尝试新建一个构建项目

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

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

img
  1. 配置Git仓库地址，没有凭证则需要添加
img
  1. 配置构建命令，通过Shell命令执行
img
  1. 构建后进行打包保存和FTP服务器部署
img
  1. 保存配置，执行构建
img
  1. 等待构建完成

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

bash
 # 通过判断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在代码管理并不擅长，更多是侧重于构建部署。

按下⌘K进行搜索