jenkins打包前端项目

ゞ浴缸里的玫瑰 2021-11-24 01:46 410阅读 0赞

# jenkins部署vue项目 #

# 准备工作 #

## 1.插件管理 ##

安装插件nodejs  
![image.png][]

## 2.全局工具配置 ##

在全局工具配置中找到NodeJS，因为第一次使用Nodejs，选择在jenkins上自动安装，版本可以自己选择  
[http://nodejs.cn/][http_nodejs.cn]  
本文选择10.16.0，配置如下图：配置完毕后先选择应用，在选择保存  
![image.png][image.png 1]

# 创建一个自由风格的项目web-test #

## 1.源码管理 ##

选择Git，填写gitlab的URL和秘钥还有对应的分支，配置如下图：  
![image.png][image.png 2]

## 2.构建环境 ##

选择勾选Provide Node & npm bin/ folder to PATH  
![image.png][image.png 3]

## 3.执行shell ##

在构建中选择执行shell  
![image.png][image.png 4]  
因为本文测试使用所以jenkins服务器和目标服务器是同一个所以直接执行shell就可以了，如果不是同一个服务器，也可以用rsync命令去传输，或者打包好之后再发送到目标服务器，命令如下图所示：  
![image.png][image.png 5]

echo $PATH 
    node -v  
    npm -v   
    npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
    npm install
    npm run build

执行成功后可以看到控制台输出  
![image.png][image.png 6]

[image.png]: /images/20211122/c577b8e5c3c74e34ba96c2adf7392e17.png
[http_nodejs.cn]: http://nodejs.cn/
[image.png 1]: /images/20211122/faf690efeddc48db9984127fea3e8f73.png
[image.png 2]: /images/20211122/8b69aa8927fa4ad2b7bbea47c537593d.png
[image.png 3]: /images/20211122/e4d6bef329a7416bb945e3f0e9034656.png
[image.png 4]: /images/20211122/f0c346cd56de4278a4edd56cacd089fc.png
[image.png 5]: /images/20211122/8ed9d38d8c4149c99060c09b0a951f6d.png
[image.png 6]: /images/20211122/0f9232a13b72406cb45f8aba898f89cd.png