一文带你实现【Jenkins】自动化部署前端工程

红太狼 2024-03-23 13:00 75阅读 0赞

![在这里插入图片描述][b0f67277a67a47dba9d0d52e3f7ea743.gif_pic_center]

>  *  **作者：一个在外讨生活的新时代农民工。**
>  *  **博主主页: [@佳庆][Link 1]**
>  *  **所属专栏: [Jenkins][]**
>  *  **支持我: 点赞+收藏+留言。您的支持是我最大动力。**

#### 前言 ####

本文主要讲解，使用Jenkins自动化部署前端工程。讲解怎么自动化部署前后的分离项目中的前端工程。

前提条件：

*  本地需要Jenkins，如果你不知道怎么安装，可以看我的另外一篇文章。

废话不多说，开干！

#### NodeJS安装 ####

因为前端项目需要NodeJs环境，所有我们需要安装NodeJS。  
官网：[下载 | Node.js 中文网][_ Node.js]

打开如下图所示，点击**所有下载选项**

![f5ead895f99dad21ba152a92138e498d.png][]

进来后，选择一个Linux的压缩包版本。**注意：这里下载的node版本一定要与前端人员沟通阿。我们这里用到是node-v16.19.1-linux-x64.tar.gz**

![ff7d0155e8a434d7d8404263bffd1b81.png][]

打开我们的服务器，执行wget命令。

wget https://registry.npmmirror.com/-/binary/node/v16.19.1/node-v16.19.1-linux-x64.tar.gz

可以看见，正在下载了，如下图下载成功。

![d6c1f2eea7b1aa5145061c0218e1349d.png][]

执行解压命令。此命令的意思是**解压node-v16.19.1-linux-x64.tar.gz并且放到指定的/usr/etc/目录下。**

tar zxvf node-v16.19.1-linux-x64.tar.gz  -C /usr/etc/

如下图解压成功。

![dcc5406d7026197555197ed658ac9ccb.png][]

![2158512ed40d4708b6490af99251c204.png][]

##### 环境配置 #####

执行如下命令，修改环境变量文件

vim /etc/profile

在最后一行输入**你按照node的位置**

export NODE_HOME=/usr/etc/node-v16.19.1-linux-x64
    export PATH=$PATH:$NODE_HOME/bin
    export NODE_HOME

如下图配置。

![130045e241438309a30359fc7874ec1f.png][]

环境变量生效，执行如下命令。

source /etc/profile

然后验证一下，如下图所示。

![471d47e5c1966c23626dd9c03b443a39.png][]

##### Npm安装淘宝镜像 #####

因为官网的镜像源在国内会很慢，我们使用更换为淘宝的镜像源。

直接命令行的设置

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

如果需要恢复成原来的官方地址只需要执行如下命令:

npm config set registry https://registry.npmjs.org

查看是否安装成功

npm config get registry

#### 凭证配置 ####

因为Jenkins实现自动化部署，需要先拉取代码，我们需要配置git的凭证，Jenkins可以通过此凭证拉取我们的代码。

**需要打开系统管理->Manage Credentials**

![4c90b8659e7e3c411cf55063ab833d7c.png][]

如下图所示，**找到作用域添加我们的凭证。**

![124d22bcb00bead3ca8af3c43554b071.png][]

![3419e4ee9f227f27ef98e040ea7351c8.png][]

**选择类型为用户名密码类型。**

**填写用户名，密码。点击创建。** 也可以选择ssh类型，你需要配置相关的ssh凭证，我这里直接用的用户名密码来做的。

![db213dd6db52a1d93bd73551e6723211.png][]

#### Jenkins创建一个前端工程 ####

![069356edd8a0da856825df9392aea38b.png][]

配置带参数的，如下图所示。

一个String参数，参数名为branch，默认值为test，描述为构建的分支。

下面配置如想要用到此参数$\{branch\}，就能获取你输入的参数值了。

![54f8acd258c7356a89151d339e4315cf.png][]

##### 配置源码git #####

如下图所示，配置对应的仓库地址，凭证。

下面的分支用到了上面的参数化构建。使用$\{branch\}

![57d973de6db6ecab9fe961acc07de696.png][]

##### 配置Build Steps #####

我们选择的是shell，通过shell命令去实现自动化部署。

![d2f15e8de8eca446c2de34985e04eadb.png][]

source /etc/profile ： 加载环境变量。让jenkins可以执行对应的npm命令。

npm install：安装依赖，这里也可以使用yarn安装。

rm -rf ./dist/\*：\#删除打包后的dist文件下的所有文件。

npm run build：\#执行项目打包命令

cp -rf dist/ /web/web-ui：复制到指定的nginx映射的目录

#加载环境变量
    source /etc/profile
    #安装依赖
    npm install
    #删除打包后的dist文件
    rm -rf ./dist/*
    #执行项目打包命令
    npm run build
    # 复制到指定的nginx映射的目录
    cp -rf dist/ /web/web-ui

#### 开始构建 ####

如下图所示，点击开始构建。

![c5de4076b2cfeb5a8389bdcd79e22b82.png][]

**如出现报错，请看下面的npm报错解决。**

如下图，构建成功了，我们的Jenkins自动化部署就完事了。

![58516d7f8ac50241bfd84c1655f25306.png][]

看一下日志，执行成功了。

![0e4c715abe53cd3642e066bbc6e7c6a5.png][]

#### npm报错解决 ####

以下是个人实操中出现的报错。

##### **npm ERR! network Socket timeout** #####

![486571890fb38529579f8dd347fa8a36.png][]

超时，配置代理设置为falsa命令如下。

npm config set proxy false

##### **npm ERR!** Command failed: /bin/sh -c autoreconf -fiv #####

![1ca89d1133d9f36f96fd2cb8c669e18e.png][]

此命令找不到，我们给他安装一下。

yum install autoconf

![e70cf7887f961402593288bafaa99589.png][]

##### **autoreconf: failed to run aclocal: No such file or directory** #####

![4e478b2e4e74140aa4d760e34c459d69.png][]

缺少东西，我们安装一下automake，执行如下命令。

yum install automake

![8344ab2ae7054af5b0d2f9827493a7db.png][]

##### **error: possibly undefined macro: AC\_PROG\_LIBTOOL** #####

![fab4d0a1cfa4ee7d0c5fece4bc559f35.png][]

如出现上面错误，执行下面命令，安装libtool

yum install libtool

##### **error: no nasm (Netwide Assembler) found** #####

![3fe2bb64decf6609b9d3337af2545b7c.png][]

如出现上面错误，执行下面命令，安装nasm

yum install nasm

#### 后记 ####

Jenkins自动化部署前端工程，也不是很难，赶快学起来吧！！！！

**后续会出一篇有关于Jenkins部署后端项目。**

**如果你有问题或者建议欢迎大家评论区讨论。**

**如对您有用，希望你可以点赞，收藏，评论，您的支持是我最大动力。**

**我们下期再见。**

![e38396d61d07549bd8b5eda3c9a54841.gif][]

[b0f67277a67a47dba9d0d52e3f7ea743.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/d5ab9984cf2c43b09fb6e70e315e3010.png
[Link 1]: https://blog.csdn.net/qq_45374325?spm=1019.2139.3001.5343
[Jenkins]: https://blog.csdn.net/qq_45374325/category_12290078.html
[_ Node.js]: https://nodejs.cn/download/
[f5ead895f99dad21ba152a92138e498d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/af580a30375b4b729660edcab331baf5.png
[ff7d0155e8a434d7d8404263bffd1b81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ef7f6c754518495c86f7a3b149660ef5.png
[d6c1f2eea7b1aa5145061c0218e1349d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/842d783bfc5d44028ae04d4969b46225.png
[dcc5406d7026197555197ed658ac9ccb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b00b0f5f85f34709b519b45f2b32b42b.png
[2158512ed40d4708b6490af99251c204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3dc450e465544a9a95272720f9ed79d4.png
[130045e241438309a30359fc7874ec1f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/10a930f6aa3a476b84bc03460542676c.png
[471d47e5c1966c23626dd9c03b443a39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/dc4ebd8e717f454dba01edf03afd3175.png
[4c90b8659e7e3c411cf55063ab833d7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/45e6f6df37544f6eb371ae19ea566525.png
[124d22bcb00bead3ca8af3c43554b071.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3408e795bf924f50b9af069104621dab.png
[3419e4ee9f227f27ef98e040ea7351c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e16ee5b2fbc24d2991aa7badd1d59185.png
[db213dd6db52a1d93bd73551e6723211.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/f07174d266ec43a5915cc30cf09888c0.png
[069356edd8a0da856825df9392aea38b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/bbe440c917cd4beab004cf98cbd93686.png
[54f8acd258c7356a89151d339e4315cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/299d727a6ffd4294a8eb683b4c6437f2.png
[57d973de6db6ecab9fe961acc07de696.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/c92ad82629ec4addae77dee2f48c146b.png
[d2f15e8de8eca446c2de34985e04eadb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/93ab110539e14c12ac2543d57691dac8.png
[c5de4076b2cfeb5a8389bdcd79e22b82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a951e7c76fd547fcb677bcf5441b2826.png
[58516d7f8ac50241bfd84c1655f25306.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/9aad7b8e4f344845ab450baab8d6fad5.png
[0e4c715abe53cd3642e066bbc6e7c6a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/407bd3c3f65943a4afcc3c84ad66d525.png
[486571890fb38529579f8dd347fa8a36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a2b40462c5bc4a94a6a513a19ee55e8a.png
[1ca89d1133d9f36f96fd2cb8c669e18e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/d305fa5f852d4df6b42607f013d74e13.png
[e70cf7887f961402593288bafaa99589.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b2a76bfcac2e4585bb692864870acf22.png
[4e478b2e4e74140aa4d760e34c459d69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/85ef3aad84ba489a9bc3e97d02902fc5.png
[8344ab2ae7054af5b0d2f9827493a7db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/d325890508264d19823c3d71879caca4.png
[fab4d0a1cfa4ee7d0c5fece4bc559f35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/f252263d95f446aa9954e5621a4ddad7.png
[3fe2bb64decf6609b9d3337af2545b7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/0e3829b2c1d24333a6c0f996c4d8b3df.png
[e38396d61d07549bd8b5eda3c9a54841.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/8bf9ed985b1045c7998b6be4f07d0d07.png