Jenkins+Svn+Vue自动化构建部署前端项目(保姆级图文教程)

介绍

准备工作

配置jenkins

构建部署任务

常见问题

介绍

在平常开发前端vue项目时,我们通常需要将vue项目进行打包构建,将打包好的dist目录下的静态文件上传到服务器上,但是这种繁琐的操作是比较浪费时间的,可以使用jenkins进行自动化构建部署前端vue

准备工作

准备vue项目,服务器,linux,ubuntu,centos等都可以,服务器上已经安装好node环境并配置淘宝镜像源,jenkins,nginx作为前端静态资源访问服务器等

nginx中在nginx.conf中配置前端静态文件路径

安装并查看node环境

如果安装后输入 node -v后没有出现对应的node版本可以手动配置下环境变量

来到 /etc 目录下找到profile文件

编辑profile添加 node环境变量并手动设置淘宝镜像源

java 复制代码

# jdk环境变量
export JAVA_HOME=/usr/local/java/jdk1.8.0_321
export JRE_HOME=/usr/local/java/jdk1.8.0_321/jre
export CLASS_PATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
    
# maven环境变量
export MAVEN_HOME=/usr/share/maven/bin
export PATH=$MAVEN_HOME/bin:$PATH
    
# node环境变量
export PATH=/usr/bin:$PATH
# 配置淘宝镜像源
export NPM_CONFIG_REGISTRY=https://registry.npmmirror.com

如果不知道node环境变量地址可以手动查询下node安装的目录

配置jenkins

来到jenkins页面先安装一些node相关插件

然后配置系统变量

配置好后保存即可

构建部署任务

来到首页进行任务创建

创建后进行任务配置

这里以svn作为远程仓库源演示

配置仓库地址和凭证

往下翻滚找到增加构建步骤

选择执行shell命令

书写shell脚本

python 复制代码

# 来到jenkins拉取远程仓库源码后的目录
cd /var/lib/jenkins/workspace/pileweb
# 查看node版本
node -v
# 安装前端所需模块依赖
npm install 
# 删除之前打包的dist目录
rm -rf ./dist/*  
# 执行构建
npm run build
# 将nginx监听的前端静态资源目录权限给jenkins
sudo chmod 777 /data/project/pileweb
# 删除原有的前端静态资源目录下的静态资源
sudo rm -rf /data/project/pileweb/*  
# 将jenkins构建后的dist下的文件复制到nginx监听的前端静态资源目录下
cp -rf ./dist/* /data/project/pileweb
# 重启nginx
sudo systemctl restart nginx

保存应用即可

来到首页选择对应的项目进行执行构建

可以点击进入查看控制台输出日志

构建成功

输入前端路径进行查看

部署成功(*^▽^*)

后续前端只需要提交代码到远程仓库,再手动点击下构建等待几分钟就可以了

常见问题

有时在执行删除旧有静态资源目录下的静态资源时会报错jenkins没有权限

java 复制代码

rm: cannot remove '/data/project/pileweb/map/json/province/xinjiang.json': Permission denied
rm: cannot remove '/data/project/pileweb/map/json/china-cities.json': Permission denied
rm: cannot remove '/data/project/pileweb/map/json/china.json': Permission denied
rm: cannot remove '/data/project/pileweb/word/wxkefumd.docx': Permission denied
Build step 'Execute shell' marked build as failure
Finished: FAILURE

可以在将jenkins的用户权限设置为root用户使用

来到 /etc/init.d目录下找到jenkins文件将jenkins调整为root用户

新加两行

java 复制代码

JENKINS_USER="root"
JENKINS_GROUP="root"

有的因为jenkins版本原因可能还需要在 /etc/default 目录下的jenkins文件中也加上这两行

加好后来到 jenkins目录下重启下jenkins即可

来到jenkins目录下

cd /etc/init.d

停止jenkins

./jenkins stop

启动jenkins

./jenkins start