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环境变量并手动设置淘宝镜像源
# 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脚本
# 来到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没有权限
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用户
新加两行
JENKINS_USER="root"
JENKINS_GROUP="root"有的因为jenkins版本原因可能还需要在 /etc/default 目录下的jenkins文件中也加上这两行
加好后来到 jenkins目录下重启下jenkins即可
来到jenkins目录下
cd /etc/init.d
停止jenkins
./jenkins stop
启动jenkins
./jenkins start
