前端自动化部署jenkins+gitee一个博客系统vuePress项目

自动部署的是vuepress网站，也是我的个人网站，欢迎指正https://zclub.top/

---

1.安装jenkins

jenkins依赖jdk,使用docker安装的原因主要是省去git安装、jdk安装、以及jdk环境变量配置的步骤

docker search jenkins
 
docker pull jenkins/jenkins:lts
 
docker images

cd /tools

mkdir docker_local/jenkins

2.启动jenkins

创建目录，以及启动jenkins

cd /tools

mkdir docker_local/jenkins
#由于我的是宝塔搭建的环境，部署网站，所以多映射了/www/wwwroot

docker run -d -p 10800:8080 -p 10801:50000 -v /tools/docker_local/jenkins:/var/jenkins_home \
-v /www/wwwroot:/www \
--name myJenkin jenkins/jenkins:lts

3.基础配置

3.1放行防火墙

我启动jenkins的时候把8080映射成10800端口了，浏览器输入ip:10800

docker ps -a
#5052c6a4191f是docker进程id
docker exec -it 5052c6a4191f /bin/bash
#查看初始化密码
 cat /var/jenkins_home/secrets/initialAdminPassword
##复制到浏览器

3.2创建用户

此处没有图示，没有关键步骤，填完必填项下一步即可

3.3安装node插件

前端项目需要依赖nodejs环境才能运行，装好插件后，要在全局工具配置那维护一个node环境，可以自己安装需要的node版本，我的项目就用了16的版本

3.4安装gitee插件

安装gitee插件,使jenkins支持webhooks的能力

3.5配置gitee私人密钥

配置gitee私人密钥,让jenkins有权限访问gitee

4.新建任务

新建一个自由风格的任务

4.1 General

4.2 源码管理

4.3 构建触发器

下面图示会提示一个URL，这个URL是给gitee去调用到jenkins,告知jenkins有版本跟新，该去部署了

生成一个密钥，下个步骤要在gitee配置，并不是谁都可以调用这个url，要有这个密钥gitee才能调用jenkins的URL

在gitee上配置URL和密钥

4.4 构建环境

4.5 构建步骤 Build Steps

也就是把gitee把代码拉到jenkins的workspace工作目录后，执行的脚本

echo "触发了构建"
cd /var/jenkins_home/workspace/zclub-official-website 
echo '开始安装依赖'
npm config set registry http://registry.npm.taobao.org/
npm config get registry
npm i
echo '依赖安装完毕'
echo '开始打包'
npm run build
echo '打包完毕'
echo '准备部署'
cp -r /var/jenkins_home/workspace/zclub-official-website/dist/*  /www/zclub.top
echo '部署完成'