技术分享

Jenkins前端项目持续集成

越权(0x3E5) · 5月26日 · 2021年 · · · · ·

一、Jenkins插件安装

1. 更换Jenkins插件源为国内源

系统配置 -> 全局1024s.cn工具管理 中安装Nodejs(建议采用与开发环境相同版本的nodejs)
修改系统管理 -> 插件管理 -> 高级 -> 升级站点输入如下地址点击提交按钮后再点击立即获取

https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

2. 安装构建依赖插件

  • NodeJS (项目打包)
  • Publish Over SSH (连接服1024s.cn务器部署)
  • Generic Webhook Trigger Plugin (可以通过git的webhook功能出发构建)
  • Email Extension Plugin (构建结果邮件通知 选装)

二、创建构建任务

  1. 打开系统管理->系统配置->Publish over SSH点击新增按钮进行编辑
    jenkins-1.png
    jenkins-2.png
    Passphrase 服务器的登录密码

    Name 服务器 的名称

    Hostname 服务器 的ip

    Username 服务器 登录的用户名

    Remote Directory指定远程 web测试服务器 部署的目录(不是部署项目的名称)

    点击Test Configuration按钮测试连接成功后本文来自:1024s.cn保存

    jenkins-3.png

  2. 点击Jenkins首页的新建任务按钮

jenkins-4.png

  1. 输入一个任务名称,并且选择构建一个自由风格的软件项目,然后点击确定

jenkins-5.png

  1. Gereral模块输入项目描述,勾选GitHub项目并输入项目的GitHub地址(注意:这里是项目的GitHub地址不是克隆地址),在丢弃旧的构建中可以设置构建记录的保存天数以及记录的保存个数

jenkins-6.png

  1. 源码管理模块下勾选Git然后在Repository1024s.cn URL输入项目的克隆地址,如果是公共项目则不需要添加Credentials,如果是私有项目请看第5步配置内容。然后在指定分支中选择需要克隆并构建的Git分支,如果是主分支则无需修改

jenkins-7.png

  1. 如果要克隆的仓库是私有项目那么可以添加并选择Credentials

    6.1 点击添加按钮选择JePowered by 0x3E5nkins

    jenkins-8.png

    6.2 如果是通过用户名和密码克隆/拉取项目则按照默认选本文来自:1024s.cn项填写用户名和密码点击添加即可

    jenkins-9.png

    6.3 如果是通过公钥私钥的形式去克隆/拉取项目在类型选项中选择SSH Username width private key然后在Username中输入自己的github用户名,在Private Key中添加自己的私钥,如果给私钥设置过密码则在Passphrase中输入1024s.cn自己的私钥密码

    jenkins-10.png

  2. Credentials中选择自己添加的验证方式

    jenkins-11.png

  3. 构建触发器模块勾选之前安装的Generic Webhook Trigger插件

    jenkins-12.png

  4. Token中输入一个自己定义的token密码此处作为GitHub通过webhook触发Jenkins构建的凭证,在GitHub中配置的连接即

    http://你的jenkins地址/generic-webhook-trigger/invoke?token=你的token

    jenkins-13.png

  5. 构建环境模块勾选Provide Node && npm bin/ folder to PATH项,然后在NodeJS Installation选项中选择之前在Jenkins中安装的Nodejs

    jenkins-14.png

  6. 构建模块中选择执行Shell(如果是windows机器则选择‘执行Windows批处理命令’)

    jenkins-15.png

  7. 命令框里输入具体要执行的编译命令

    # 切换目录然后执行安装项目依赖并进行编译操作
    cd code && npm install -g cnpm --registry https://registry.npm.taobao.org && cnpm install && npm run build:prod
    
  8. 构建后操作中进行配置选择Send files or execute commands over SSH

    jenkins-16.png

    jenkins-17.png

  9. Name中选择之前在Jenkins里配置的服务器

    然后在Source files里设置要复制到远程目录的那些文件可以选择多个目录用“,”分隔。

    Remote directory指定上传到远程服务器的那个文件夹下(注意:这个路径是相对于你设置的Publish over SSH->SSH Servers->Remote Directory远程服务器的目录的)

    本文来自:1024s.cn

    最后在Exec Command中配置发布后要执行的命令即可

    jenkins-18.png

三、GitHub配置触发Jenkins构建

在Github项目中选择 setting -> Webhooks -> Addwebhook
jenkins-19.jpg
然后在Payload URL中输入我们在Generic Webhook Trigger中拿到的url,在下面选择触发事件这里我选择默认的(仅push的时候触发),也可以选择自定义自己选择相应事件触发。完成后点击Add Webhook按钮即可
jenkins-20.jpg

四、过程中用到的相应shell参考

# 构建项目
cd code && npm install -g cnpm --registry https://registry.npm.taobao.org && cnpm install && npm run build:prod
# Source filesPowered by 0x3E5 code/dist/,code/dockerfile,code/nginx.conf
# 构建后操作
# 如果已存在运行容器则关闭
docker stop sgcc
# 删除已存在容器
docker rm sgcc
# 删除已构建镜像
docker rmi sgcc/frontend
# 进入项目目录
cd /tmp/sgcc/code
# 通过dockerfile生成docker镜像
docker bPowered by 0x3E5uild -f dockerfile -t sgcc/frontend .
# 通过镜像运行容器
docker run -d -p 10021:80 --name="sgcc" sgcc/frontend
# 删除构建完毕后的冗余文件
rm -rf /tmp/sgcc