【Jenkins】Jenkins构建前端流水线

谁借莪１个温暖的怀抱￠ 2023-10-13 19:13 42阅读 0赞

#### 目录 ####

*  一、前言
 *  二、新建前端流水线
 *   *  1、点击新建任务
     *  2、填写流水线名称（这里我选择的是自由风格的软件项目），任务名称一般格式为：项目名称-前后端
     *  3、创建成功后的结果
 *  三、配置前端流水线
 *   *  1、进入刚创建好的任务页面中，点击配置
     *  2、General配置
     *  3、设置项目运行的节点
     *  4、源码管理
     *   *  4.1、如果没有配置过git账号的话，需要进行一个git账号的配置
     *  5、构建触发器（将触发器全部置为空）
     *  6、配置shell脚本
     *   *  6.1、shell脚本根据自己的打包需求进行配置（这里配置对应前端项目打包），下面给出参考项
         *  6.2、查看运行项目命令
     *  7、添加构建后操作
     *  8、保存后点击立即构建
     *  9、构建服务是否成功
 *  四、查看服务是否启动
 *   *  1、检查服务器中是否有构建成功的前端文件
     *  2、上传前端打包好的dist文件
     *   *  2.1、打包前端代码
         *  2.2、对dist文件目录进行压缩
         *  2.3、手动上传dist.zip至服务器
         *  2.4、解压dist.zip
     *  3、修改nginx.conf文件
     *   *  3.1、进入nginx.conf文件的所在位置
         *  3.2、对nginx配置文件进行修改
         *  3.3、重启nginx
 *  五、访问前端页面

## 一、前言 ##

> 1、服务器中已安装好nginx，如没有安装，可参考此博客：[【Shell脚本】Linux安装Nginx以及开机自启][Shell_Linux_Nginx]  
> 2、如果已有试图，则直接新建任务；如没有视图，则新建一个视图即可。一个项目一个视图就可以

## 二、新建前端流水线 ##

### 1、点击新建任务 ###

![在这里插入图片描述][a148d25af0394335bc28005668b36469.png]

### 2、填写流水线名称（这里我选择的是自由风格的软件项目），任务名称一般格式为：项目名称-前后端 ###

![在这里插入图片描述][9c3749eaf562442c86d4b923f7c28e7b.png]

### 3、创建成功后的结果 ###

![在这里插入图片描述][3c5ef8bdd7d547faa8f92c245429f54c.png]

## 三、配置前端流水线 ##

### 1、进入刚创建好的任务页面中，点击配置 ###

![在这里插入图片描述][529a8689dc484ec89f0605a3a6cb1807.png]

### 2、General配置 ###

> 描述：XXX前端-前端XXX服务测试环境-项目构建  
> 创建人：创建者姓名  
> 时间：创建时间  
> 保持构建天数：2  
> 保持最大构建个数：3

![在这里插入图片描述][7ba08f796b344599af33beb4a6cba265.png]

### 3、设置项目运行的节点 ###

> 这里的节点要看Jenkins集群的具体配置，在安装Jenkins时配置的节点。现在使用的Jenkins配置为Front\_Node.（如果是新搭建的Jenkins，去查看安装时配置的从节点名称）

![在这里插入图片描述][d07032782912421c91149ebc3d15c076.png]

### 4、源码管理 ###

![在这里插入图片描述][3db28dd3543b494e9715151abc577841.png]

#### 4.1、如果没有配置过git账号的话，需要进行一个git账号的配置 ####

![在这里插入图片描述][d91354acb6ad4db094e52e1bca1d4ed8.png]  
![在这里插入图片描述][c693bf758e10477cb2478aca368e372c.png]  
**添加完成之后，选择你新添加的凭据即可**

### 5、构建触发器（将触发器全部置为空） ###

![在这里插入图片描述][c35c4abb24784caebbe7adcebeaece4e.png]

### 6、配置shell脚本 ###

![在这里插入图片描述][6497be89093846389c105149cc50c85f.png]

#### 6.1、shell脚本根据自己的打包需求进行配置（这里配置对应前端项目打包），下面给出参考项 ####

#!/bin/sh
    
    echo $PATH
    node -v
    npm -v
    npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
    npm install
    npm run build-dev
    cd ns-front
    rm -rf ns-front.tar.gz
    tar -zcvf ns-front.tar.gz *
    cd ../

![在这里插入图片描述][3cdb8486ace645c0ac4edaee1e3abfe4.png]

#### 6.2、查看运行项目命令 ####

> 在前端项目中的package.json中，可以看到我们在启动前端项目时，使用的命令

![在这里插入图片描述][8b5d4575602340099e38f0d1692a7539.png]  
![在这里插入图片描述][cac483dd807b4c7794a563b5a7a222c3.png]

### 7、添加构建后操作 ###

![在这里插入图片描述][9c7b8996e14648389ae099d1a121c54b.png]  
![在这里插入图片描述][1d508433bc824ecf9375648660619ef8.png]

### 8、保存后点击立即构建 ###

![在这里插入图片描述][539f1d0d54294a38b2338de95ff60954.png]

### 9、构建服务是否成功 ###

![在这里插入图片描述][f7cf960cb1964c3591ec82acc764039b.png]

## 四、查看服务是否启动 ##

### 1、检查服务器中是否有构建成功的前端文件 ###

![在这里插入图片描述][42a63cfd0d4544a7b787b923d7116721.png]

### 2、上传前端打包好的dist文件 ###

#### 2.1、打包前端代码 ####

npm run build

**这时，目录结构中会出现dist文件目录**  
![在这里插入图片描述][4a784c9e2fac42068aff82d0e87fe679.png]

#### 2.2、对dist文件目录进行压缩 ####

![在这里插入图片描述][96150d2409c546248e7bb025a298feea.png]  
![在这里插入图片描述][aa06b59881c449aa94ea44efe081fe8b.png]

#### 2.3、手动上传dist.zip至服务器 ####

![在这里插入图片描述][a486bdb5748f47b9b1ff47ba5dad70ed.png]

#### 2.4、解压dist.zip ####

#查看上次好的dist.zip
    cd /tmp/
    ls

![在这里插入图片描述][96e8a080e6e042f1acbbc3e15d593ef5.png]

#移动dist.zip
    sudo mv dist.zip /usr/share/nginx/html
    
    #切换至/usr/share/nginx/html路径下
    cd /usr/share/nginx/html
    ls
    
    #解压dist.zip
    sudo unzip dist.zip

![在这里插入图片描述][24d841dfae7244b58a4b4e6e9a8559b5.png]

### 3、修改nginx.conf文件 ###

> 因为是前端，需要做映射，所以需要修改nginx的配置文件

#### 3.1、进入nginx.conf文件的所在位置 ####

#切换至nginx.conf路径
    cd /usr/local/nginx/conf

![在这里插入图片描述][823324bd90124205b59b4b2633654069.png]

#### 3.2、对nginx配置文件进行修改 ####

#进入nginx.conf
    vi nginx.conf

输入i进行编辑，编辑完成后，按ESC，:wq保存退出即可！  
![在这里插入图片描述][25e2cd91bac74a0cb3265f30f0695ff0.png]

#### 3.3、重启nginx ####

进入到nginx.conf所在的上一级路径下，在进行重启nginx

#重启nginx配置文件
    sudo ./sbin/nginx -s reload
    
    #查看nginx进程
    ps aux|grep nginx

![在这里插入图片描述][e017a9dce50746d6bd1db84800e22070.png]

## 五、访问前端页面 ##

![在这里插入图片描述][3cd0d535efd547c6bef474629013f09b.png]

[Shell_Linux_Nginx]: https://blog.csdn.net/weixin_45490023/article/details/130623015?spm=1001.2014.3001.5501
[a148d25af0394335bc28005668b36469.png]: https://img-blog.csdnimg.cn/a148d25af0394335bc28005668b36469.png
[9c3749eaf562442c86d4b923f7c28e7b.png]: https://img-blog.csdnimg.cn/9c3749eaf562442c86d4b923f7c28e7b.png
[3c5ef8bdd7d547faa8f92c245429f54c.png]: https://img-blog.csdnimg.cn/3c5ef8bdd7d547faa8f92c245429f54c.png
[529a8689dc484ec89f0605a3a6cb1807.png]: https://img-blog.csdnimg.cn/529a8689dc484ec89f0605a3a6cb1807.png
[7ba08f796b344599af33beb4a6cba265.png]: https://img-blog.csdnimg.cn/7ba08f796b344599af33beb4a6cba265.png
[d07032782912421c91149ebc3d15c076.png]: https://img-blog.csdnimg.cn/d07032782912421c91149ebc3d15c076.png
[3db28dd3543b494e9715151abc577841.png]: https://img-blog.csdnimg.cn/3db28dd3543b494e9715151abc577841.png
[d91354acb6ad4db094e52e1bca1d4ed8.png]: https://img-blog.csdnimg.cn/d91354acb6ad4db094e52e1bca1d4ed8.png
[c693bf758e10477cb2478aca368e372c.png]: https://img-blog.csdnimg.cn/c693bf758e10477cb2478aca368e372c.png
[c35c4abb24784caebbe7adcebeaece4e.png]: https://img-blog.csdnimg.cn/c35c4abb24784caebbe7adcebeaece4e.png
[6497be89093846389c105149cc50c85f.png]: https://img-blog.csdnimg.cn/6497be89093846389c105149cc50c85f.png
[3cdb8486ace645c0ac4edaee1e3abfe4.png]: https://img-blog.csdnimg.cn/3cdb8486ace645c0ac4edaee1e3abfe4.png
[8b5d4575602340099e38f0d1692a7539.png]: https://img-blog.csdnimg.cn/8b5d4575602340099e38f0d1692a7539.png
[cac483dd807b4c7794a563b5a7a222c3.png]: https://img-blog.csdnimg.cn/cac483dd807b4c7794a563b5a7a222c3.png
[9c7b8996e14648389ae099d1a121c54b.png]: https://img-blog.csdnimg.cn/9c7b8996e14648389ae099d1a121c54b.png
[1d508433bc824ecf9375648660619ef8.png]: https://img-blog.csdnimg.cn/1d508433bc824ecf9375648660619ef8.png
[539f1d0d54294a38b2338de95ff60954.png]: https://img-blog.csdnimg.cn/539f1d0d54294a38b2338de95ff60954.png
[f7cf960cb1964c3591ec82acc764039b.png]: https://img-blog.csdnimg.cn/f7cf960cb1964c3591ec82acc764039b.png
[42a63cfd0d4544a7b787b923d7116721.png]: https://img-blog.csdnimg.cn/42a63cfd0d4544a7b787b923d7116721.png
[4a784c9e2fac42068aff82d0e87fe679.png]: https://img-blog.csdnimg.cn/4a784c9e2fac42068aff82d0e87fe679.png
[96150d2409c546248e7bb025a298feea.png]: https://img-blog.csdnimg.cn/96150d2409c546248e7bb025a298feea.png
[aa06b59881c449aa94ea44efe081fe8b.png]: https://img-blog.csdnimg.cn/aa06b59881c449aa94ea44efe081fe8b.png
[a486bdb5748f47b9b1ff47ba5dad70ed.png]: https://img-blog.csdnimg.cn/a486bdb5748f47b9b1ff47ba5dad70ed.png
[96e8a080e6e042f1acbbc3e15d593ef5.png]: https://img-blog.csdnimg.cn/96e8a080e6e042f1acbbc3e15d593ef5.png
[24d841dfae7244b58a4b4e6e9a8559b5.png]: https://img-blog.csdnimg.cn/24d841dfae7244b58a4b4e6e9a8559b5.png
[823324bd90124205b59b4b2633654069.png]: https://img-blog.csdnimg.cn/823324bd90124205b59b4b2633654069.png
[25e2cd91bac74a0cb3265f30f0695ff0.png]: https://img-blog.csdnimg.cn/25e2cd91bac74a0cb3265f30f0695ff0.png
[e017a9dce50746d6bd1db84800e22070.png]: https://img-blog.csdnimg.cn/e017a9dce50746d6bd1db84800e22070.png
[3cd0d535efd547c6bef474629013f09b.png]: https://img-blog.csdnimg.cn/3cd0d535efd547c6bef474629013f09b.png