记一次Jenkins配置前端部署

jenkins已经部署在对应服务器上，前端的部署需要自己来新建任务，做一些配置。

首先：

登陆jenkins图形化界面，插件安装略过，系统管理-插件管理中，NodeJs plugin和git。  
插件安装好之后，去首页的系统配置中找到全局工具配置，在其中找到nodejs，新增安装，这里我选择的是node 14。  

第二步：

基础条件具备，之后跳转到首页，在对应视图下新建任务，也就是我们的项目部署任务，选择自由风格软件项目。  
【如有可以复制的配置项目，则可以填写被复制的任务名称】  

第三步：

 在项目配置中，将描述，源码配置，构建环境（这里去选择之前安装的node版本）填写好。  
 构建模块，选择执行shell，代码如下：  
 

#!/bin/bash
echo $PATH // 更新环境变量

node -v // 输出node版本

npm -v // 输出npm版本

npm config set registry https://registry.npm.taobao.org // 修改npm源

npm install // 执行安装依赖

npm install -D node-sass@4.14.1 // 每次下载都失败，干脆单独执行一次

npm run build // 执行打包

cd dist // 进入打包文件

rm -rf test.tar.gz // 删除上一次的压缩文件

tar -zcvf test.tar.gz * // 将打包文件中的所有内容压缩

echo "完成压缩"

构建后的操作：   
source file要写dist/test.tar.gz，前缀分别写dist和服务器上前端目录对应的文件名。  
构建后，需要将压缩好的文件传到服务器，并解压覆盖，Exec command如下。  

#!/bin/bash
source /etc/profile
cd ...这里写前端代码在服务器上的的文件目录地址例如 /usr/main/html/project
tar -zxvf test.tar.gz
rm -rf test.tar.gz

第四步

准备工作完成，需要在nginx配置对应的端口号，并指向对应目录的入口文件，例如我们的index.html  
这里我用的是Xshell  
登陆服务器，找到nginx.conf文件，执行vim nginx.conf  
将我们所需要的端口文件目录及代理信息填写完毕。  
执行nginx -s reload，刷新nginx。

最后

至此，配置完成了，点击任务开始部署，可以在控制台查看具体进度。