从零搭建一套简易前端自动化项目

最近无意中接触到了 vuepress 可以快速搭建一个简易的文档网站，于是想搭建一个记录笔记的网站。但是呢，又不想每次更新了我的学习笔记手动打包然后放到 web 服务器上去。大致描述一下我的需求：把代码推到某个分支，然后 jenkins 自动拉取该分支的代码，并且进行项目的构建和部署，最终决定用 jenkins 实现这个简易的自动化构建和部署。项目网站效果：笔记文档地址

一、搭建 Jenkins 环境

由于安装 jenkins 并且配置相关的环境比较麻烦（升级 Jenkins 踩过坑）。docker 起一个 jenkins 容器

docker run --name jk1 -p 8080:8080 -p 50000:50000 -v /usr/local/jenkins:/var/jenkins_home -v /var/run/docker.sock:/var/run/docker.sock -idt jenkins/jenkins
-v 参数把主机/usr/local/jenkins 目录映射到容器 var/jenkins_home 目录；
-itd i--以交互式模式运行容器; t--分配一个伪输入终端； d--后台运行

二、编写 Jenkins PipeLine

0.jenkins 全局工具配置配置 node 环境

在 Global Tool Configuration 配置 node
在 pipeline 引用 node

tools { nodejs "node"}

1.配置凭证 id 拉取仓库代码


git branch: 'main',
credentialsId: '--------------------------------',
url: 'git@github.com:Jankos-Lee/notes4u.cn.git'

2.安装 node modules 运行打包命令并压缩打包文件


echo 'custom notes: -------- start build -------- '
echo 'custom notes: -------- node version -------- '
sh 'node --version'
// 安装依赖
echo 'custom notes: -------- install node module packages -------- '
sh 'npm install --registry=https://registry.npm.taobao.org'
// 打包构建
echo 'custom notes: -------- start build -------- '
sh 'npm run build'
// sh 'mkdir md-notes'
// 压缩，方便更快传输到目标应用服务器
sh 'tar -czvf md-notes.tar.gz md-notes'
// 控制台打印
echo "custom notes: -------- build success --------"


3.引用 Publish Over SSH 发布到服务器

将打包的压缩文件放到远端服务器并进行解压到对应资源目录；完成部署

三、配置 Web Hook

配置 github 的 Web Hook 到 Jenkins，在推代码的时候触发自动构建部署

三、配置钉钉机器人

配置钉钉机器人，部署通知到对应群

最终完成效果

当我的更新推到 main 分支时，会触发 web hook 拉取代码，构建部署到我的云服务器上

自定义构建参数选项

维护前端 shell 脚本文件(build.sh)，可配置 Node 生产环境变量，即可完成自定义某些参数用于前端项目构建

赞(2) 打赏

支付宝扫一扫打赏

微信扫一扫打赏