Jenkins自动构建部署vue项目

1.安装docker

1.1 在宝塔面板的软件商店中安装docker

1.2 通过终端安装docker

1)安装docker:sudo apt-get install -y docker.io

2)启动docker服务:systemctl start docker

3)设置开机启动:systemctl enable docker

4)查看docker状态:systemctl status docker

5)停止docker服务:systemctl stop docker

6)查看docker版本:docker version

 非root用户运行docker

1)添加docker用户组:sudo groupadd docker

执行以上命令会提示已存在,原因是在安装docker时已自动创建。

2)将指定用户添加到用户组(username为你的用户名):sudo gpasswd -a username docker

3)查看是否添加成功:cat /etc/group | grep ^docker

3)重启docker:sudo systemctl restart docker

5)更新用户组:newgrp docker

2.jenkins安装与配置

2.1下载jenkins镜像

docker pull jenkins/jenkins:lts        //lts表示支持版本较长

2.2创立jenkins挂载目录并赋权限

mkdir -p /mydata/jenkins_home
chown -R 1000 /mydata/jenkins_home/

2.3创立并启动Jenkins容器

docker run -di --name=jenkins -p 8080:8080 -v  /mydata/jenkins_home:/var/jenkins_home jenkins/jenkins:lts

-d 标识是让 docker 容器在后盾运行
-p 10240:8080 将镜像的8080端口映射到服务器的10240端口
-p 10241:50000 将镜像的50000端口映射到服务器的10241端口
-v  /mydata/jenkins_home:/var/jenkins_home目录为容器jenkins工作目录,咱们将硬盘上的一个目录挂载到这个地位,不便后续更新镜像后持续应用原来的工作目录。这里咱们设置的就是下面咱们创立的 /var/jenkins_mount目录
--name定义一个容器的名字,如果没有指定,那么会主动生成一个随机数字符串当做UUID

image

搭建成功

2.4.jenkins相关配置

浏览器访问http://x.x.x.x:port ( 本地服务器+默认端口号为8080)

初次加载等待页面跳转
image

第一次登录需输入密码
image

可在终端输入命令获取密码

docker logs jenkins

接着进入新手入门界面

2.4.1选择安装推荐的插件

image

image

2.4.2创建第一个管理员用户,自己创建用户名和密码即可

image

2.4.3实例配置的URL可以不用改,默认即可,保存并完成,点击重启即可

image

2.4.4 配置插件

进入jenkins,在系统管理中安装插件安装插件NodeJS Plugin 、Publish Over SSH 、SSH plugin
image

2.4.5添加凭据

image
image
image
image
image

2.4.6全局工具配置

Dashboard》》》(左侧)系统管理》》》(右侧)全局工具配置
配置node
image

点击应用、保存按钮
切记,千万不要选择18版本的,不然构建的时候会出问题

2.4.7全局配置

Dashboard》》》(左侧)系统管理》》》(右侧)系统配置
配置 SSH remote hosts》SSH sites
image

这一步最重要,就是构建后把包部署到服务器上,首先这不是需要一个key
回到宝塔终端,以下步骤

1.终端输入: ssh-keygen (建立密钥对) ,一路回车键即可,如果要输入y的,请输入y
2.cd .ssh 会看到密钥和公钥
3.在宝塔中开放秘钥登录

image

接下来回到jenkins:
1.Dashboard》》》(左侧)系统管理》》》(右侧)系统配置
2.Publish over SSH》key》复制刚才的秘钥
3.配置SSH Servers
image

点击应用、保存按钮

2.4.8新建任务(项目自动部署)

image

这里我用的是gitee,需要配置git凭证,回到步骤6,添加gitee登录的用户名和密码即可,直接上配置图
image
image

接下来点击构建步骤,添加执行shell
image

命令如下:

echo "开始构建"
node -v
npm -v
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
npm run build
#进入到打包目录
cd dist
#删除上次打包生成的压缩文件
rm -rf *.tar.gz
#把生成的项目打包成压缩包方便传输到远程服务器
tar -zcvf `date +%Y-%m-%d-%H-%M-%S`.tar.gz *
#回到上层工作目录
cd ../
echo "构建结束"

继续点击增加构建步骤,选择如图所示,配置构建后部署到服务器上
image
image

命令如下:

#进入远程服务器的目录
cd /www/wwwroot/你的项目地址
#找到新的压缩包
tar -zxvf *.tar.gz -C ./
echo ">>>移除*.tar.gz"
rm -rf *.tar.gz
#发布完成
echo "发布完成"

点击应用、保存按钮即可

基本搭建完成,
image
image
image

2.4.9扩展(配置webhoo,git仓库有推送时自动构建)

Dashboard》插件管理》搜索Generic Webhook Trigger并安装
这个时候需要一个token
Dashboard》用户列表中选择你的项目所对应的用户,在用户名列表最右侧有位于字段提示您该用户所包含的项目
此时会看到API Token选型,只需要点击添加新的Token即可获得一个token,复制token
配置仓库的webhook
image

URL地址如下:

http://<您的jenkins访问路径>/generic-webhook-trigger/invoke?token=<您刚刚复制的token>

回到jenkins中,重新配置项目,新增一项配置
image

选中后点击应用、保存即可

配置完后回到项目中重新推送代码,就能自动触发构建了

posted @ 2022-11-28 10:23  leayun  阅读(794)  评论(0编辑  收藏  举报