前端自动化发布 - Jenkins安装与配置

Jenkins

Jenkins 安装

Centos 7

• 需要 Java 环境

yum install java-1.8.0-openjdk-devel.x86_64

• 需要安装 Git

yum install git

• 安装 jenkins

  • 方法一（可能会安装很慢甚至失败，推荐方法二）

  wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
  rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
  yum install jenkins
  

  • 方法二
    到https://pkg.jenkins.io/redhat-stable/下载对应的 rpm 包，拷贝到服务器执行rpm -ivh 包名

Windows 10

官网下载.exe 文件安装即可
需要环境 Java 环境、并且安装 Git。在最后部署的时候 Windows 平台可能会出现 sh.exe 找不到的问题
解决方案参考：windows 简单使用 Jenkins 遇到的一些坑 第一个坑

Jenkins 配置

安装相关插件

点击 Jenkins 首页 系统管理 》插件管理 》可选插件，如果未安装以下插件，请自行安装。

• Git Parameter

功能：可以进行参数化构建。比如选择某个分支或者某个 tag 进行打包部署

• GitHub Branch Source

功能：将代码从 git 仓库拉取到 Jenkins

• NodeJs

功能：项目打包需要 NodeJs 环境

• Publish Over SSH

功能：将打包好的项目上传到服务器

安装完成后，重启 Jenkins

配置相关插件

• NodeJs 配置

点击 系统管理 》全局工具配置 找到 NodeJS，点击 NodeJS 安装。选择和你开发环境一样的 NodeJS 版本，然后点击保存。

• Publish Over SSH 配置

点击 系统管理 》系统配置，找到 Publish over SSH，点击 Add 按钮，输入需要部署的目标服务器相关配置。Remote Directory 为上传文件存在服务器的路径。

点击“高级”，勾选 Use password authentication, or use a different key，输入服务器密码，点击下方的 Test Configuration，如果显示 Success 说明服务器配置正确，点击保存即可。

新建任务

• 左侧菜单栏点击“新建任务”
  

• 输入任务名并选择“构建一个自由风格的软件项目”
  

• General 配置

• 丢弃旧的构建
  

• 参数化构建过程（如果没有，说明 Git Parameter 插件没有安装好）

Name 为变量名字，需要自定义；
Parameter Type 为参数的类型，Jenkins 会根据这个类型去找 Git 上对应的类型。我这里选的 Branch or Tag，在构建的时候会让你选择对应的分支或 tag。

• 源码管理

• Git（如果没有，说明 GitHub Branch Source 插件没有安装好）

填写好仓库 URL，如果报错没有权限，添加 Credentials 即可；
Branches to build 填写的就是上一步参数化构建过程中的 Name 参数，前面记得加上$。

• 构建触发器

无需操作，因为会通过 Jenkins 的 shell 命令去构建

• 构建环境

• 选择 Provide Node & npm bin/ folder to PATH（如果没有，说明 NodeJs 插件没有安装好，如果下拉框为空，说明插件安装完毕但未配置正确）
  

• 构建

点击“增加构建步骤”选择“执行 shell”。代码说明：校验是否有 node 和 npm 命令 》npm 源切到淘宝 》安装依赖 》进行打包 》进入 dist 文件夹 》压缩打包文件为 dist.tar.gz

代码如下：

echo $WORKSPACE
node -v
npm -v
npm config set registry https://registry.npm.taobao.org

npm install&&
npm run build

cd dist
tar -acvf dist.tar.gz *

• 构建后操作

点击“添加构建后操作步骤”选择“Send build artifacts over SSH”（如果没有，说明 Publish Over SSH 插件没有安装好）。选择之前配置的服务器，Source files 为打包并压缩好的文件目录，并且移除 dist 前缀，Exec command 为服务器上需要执行的命令。

uploadFileName=dist.tar.gz;
frontHtmlFolder=/usr/local/nginx/html/xxxxx/;
frontHtmlBackupFolder=$frontHtmlFolder/backup/;
backName=xxxxx;
cur_time=$(date '+%Y-%m-%-d %H:%M:%S');

mkdir -p /usr/local/nginx/html;
mkdir -p $frontHtmlBackupFolder;
shopt -s extglob;
rm -rf !($frontHtmlBackupFolder);
tar -zxvf /usr/local/nginx/html/$uploadFileName -C $frontHtmlFolder;
mv /usr/local/nginx/html/$uploadFileName $frontHtmlBackupFolder/$cur_time"_"$backName"_"$uploadFileName;

frontHtmlFolder 为项目部署的路径，backName 为备份的名字。替换上面的xxxxx即可。

至此为止，新建项目完成

如何操作

回到主页，点击列表中最右边的构建按钮，然后选择需要打包的分支或者 tag，左侧会有构建进度，鼠标悬停上去会有小三角，选择“控制台输出”可以查看构建状态，出现“Finished: SUCCESS”即为构建成功。