Jenkins学习笔记（二）：Jenkins自动部署vue项目

环境准备

博主主要参考这篇文章完成jenkins自动化部署vue: jenkins自动化部署vue，我这篇文章主要写我的踩坑，然后踏上成功之路！

安装Jenkins

如果还没有安装Jenkins的朋友参考这篇文章: Docker学习笔记（一）：安装Jenkins及自动部署maven项目.

安装NodeJS

1. 方法一：

   由于博主用Docker安装的Jenkins,所以需要在Jenkins容器里中安装NodeJS环境。

   #进入Jenkins容器
   docker exec -it jenkins bash
   #安装NodeJS
   apk add --no-cache nodejs
   #检查环境是否安装成功
   node -v
   npm -v
   

2. 方法二：
   去NodeJS官方下载*.tar包，然后解压。

   #编辑
   vi /etc/profile
   	#在末尾添加
   	export NODE_HOME=/nodejs路径
   	export PATH=$PATH:$NODE_HOME/bin 
   	export NODE_PATH=$NODE_HOME/lib/node_modules
   #保存并退出
   :wq!
   #生效
   source /etc/profile
   #检查环境是否安装成功
   node -v
   npm -v
   

配置

插件配置

1、在Jenkins主界面——>系统管理——>插件管理，安装NodeJS、Publish Over SSH插件。
2、在Jenkins主界面——>系统管理——>系统配置，找到Publish over SSH，对SSH进行配置让其连接远程服务器（NodeJs无需配置）。

任务配置

1. 新建任务
   选择 自由风格。

2. 源码管理
   填写Git仓库的地址及凭据。
   

3. 构建触发器
   选择 轮询SCM，通过这种方式可以实现当用户用Git管理Push代码到仓库中，自动调用该任务。详细步骤参考 Docker学习笔记（一）：安装Jenkins及自动部署maven项目.中的 自动构建 目录。
   

4. 构建环境
   vue项目当然是用NodeJS环境构建，所以选择NodeJS环境。
   

5. 构建
   添加构建步骤：执行Shell、Send files or execute commands over SSH。

   执行Shell中添加：

   
   脚本如下：

   #打印环境变量
   echo $PATH
   #检查NodeJS环境
   node -v
   npm -v
   #默认在Git项目目录，我的前端代码都在Backstage目录下
   cd Backstage
   #防止报[email protected] install: `node install.js错误
   npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
   #安装依赖
   npm install
   #打包
   npm run build
   cd dist
   #rm -rf bodac.tar.gz #删除上次打包生成的压缩文件，打包的时候会自动删除整个dist文件夹无需这一步
   #将dist目录下所有文件打包成tar包
   tar -zcvf bodac.tar.gz *
   #返回上级目录
   cd ../
   

   Send files or execute commands over SSH中添加：
   
   脚本如下：

   #打开远程目录
   cd /root/nginx/web
   #移除之前打包的目录
   rm -rf bodac
   #创建新目录
   mkdir bodac
   #解压tar包到bodac目录
   tar -zxvf bodac.tar.gz -C bodac/
   #移除tar包
   rm -rf bodac.tar.gz