jenkins部署vue前端项目

前言

前面已经使用jenkins部署了后端springboot项目，现在开始学习jenkins部署前端Vue项目。

一、安装nginx

访问nginx官网，https://nginx.org/en/download.html下载tar包

上传到服务器目录中
然后到上传文件夹解压nginx

tar -zxvf nginx-1.28.0.tar.gz

安装相关依赖

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 

创建nginx文件夹

mkdir -p /usr/local/nginx

到解压目录下执行

./configure

执行完以后进行编译

make

编译完以后进行安装

make install

修改nginx配置文件

vi /usr/local/nginx/conf/nginx.conf

启动nginx，后续打包直接替换里面的html文件夹，刷新页面，无需重启即可实现改动

sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

二、jenkins构建项目

创建任务

输入描述信息

复制人人开源的代码地址

粘贴到源码管理中，因为人人开源项目是公开的所以不需要凭证也可以

构建步骤选择执行shell

粘贴以下命令，注意nginx的地址

# 在执行过程中若遇到使用了未定义的变量或命令返回值为非零，将直接报错退出
set -eu
echo "<-------------------------------------->"
echo "安装依赖"
npm install

echo "<-------------------------------------->"
echo "打包出dist文件夹"
npm run build:prod

# 先删除nginx下的旧数据
rm -rf /home/soft/nginx-1.28.0/html/*
# 再将新数据拷贝到nginx下 -r 拷贝子文件
cp -r dist/* /home/soft/nginx-1.28.0/html/

建议切换npm镜像源，不然打包会很慢
切换淘宝源方法如下：

npm config set registry https://registry.npmmirror.com

验证

npm config get registry

然后保存，点击立即构建

查看控制台日志

我这里好像因为权限问题报错了，我在命令上加个sudo试试

中途又出现了chromedriver@2.27.2 install: node install.js错误

还有node-sass@6.0.1 postinstall: node scripts/build.js错误
修改jenkins中的构建shell在npm install 之前增加以下内容

sudo npm install chromedriver@2.27.2 --ignore-scripts

npm install node-sass@npm:sass --ignore-scripts

接着构建结果出现打包问题

通过查看人人开源文档发现是打包命令不对，重新修改构建shell

# 在执行过程中若遇到使用了未定义的变量或命令返回值为非零，将直接报错退出
set -eu
echo "<-------------------------------------->"
echo "安装chromedriver和node-sass依赖"
sudo npm install chromedriver@2.27.2 --ignore-scripts
npm install node-sass@npm:sass --ignore-scripts
echo "安装依赖"
sudo npm install

echo "<-------------------------------------->"
echo "打包出dist文件夹"
sudo npm run build --prod

# 先删除nginx下的旧数据
sudo rm -rf /home/soft/nginx-1.28.0/html/*
# 再将新数据拷贝到nginx下 -r 拷贝子文件
sudo cp -r dist/* /home/soft/nginx-1.28.0/html/
# 先停止nginx
#sudo /usr/local/nginx/sbin/nginx -s stop
# 在启动nginx
#sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

修改后接着构建

构建成功，浏览器访问

总结

以上就是今天要讲的内容，本文介绍了使用jenkins部署前端vue项目的方法和步骤，以及使用过程中遇到问题的解决方案。