前言
本文主要讲解，使用Jenkins自动化部署前端工程。讲解怎么自动化部署前后的分离项目中的前端工程。
前提条件：本地需要Jenkins，如果你不知道怎么安装，可以看我的另外一篇文章。
废话不多说，开干！
NodeJS安装
因为前端项目需要NodeJs环境，所有我们需要安装NodeJS。
打开如下图所示，点击所有下载选项
进来后，选择一个Linux的压缩包版本。注意：这里下载的node版本一定要与前端人员沟通阿。我们这里用到是node-v16.19.1-linux-x64.tar.gz
打开我们的服务器，执行wget命令。
wget https://registry.npmmirror.com/-/binary/node/v16.19.1/node-v16.19.1-linux-x64.tar.gz
复制代码可以看见，正在下载了，如下图下载成功。
执行解压命令。此命令的意思是解压node-v16.19.1-linux-x64.tar.gz并且放到指定的/usr/etc/目录下。
tar zxvf node-v16.19.1-linux-x64.tar.gz -C /usr/etc/
复制代码如下图解压成功。
环境配置
执行如下命令，修改环境变量文件
vim /etc/profile
复制代码在最后一行输入你按照node的位置
export NODE_HOME=/usr/etc/node-v16.19.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin
export NODE_HOME
复制代码如下图配置。
环境变量生效，执行如下命令。
source /etc/profile
复制代码然后验证一下，如下图所示。
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
如下图所示，找到作用域添加我们的凭证。
选择类型为用户名密码类型。
填写用户名，密码。点击创建。 也可以选择ssh类型，你需要配置相关的ssh凭证，我这里直接用的用户名密码来做的。
Jenkins创建一个前端工程
配置带参数的，如下图所示。
一个String参数，参数名为branch，默认值为test，描述为构建的分支。
下面配置如想要用到此参数${branch}，就能获取你输入的参数值了。
配置源码git
如下图所示，配置对应的仓库地址，凭证。
下面的分支用到了上面的参数化构建。使用${branch}
配置Build Steps
我们选择的是shell，通过shell命令去实现自动化部署。
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
复制代码开始构建
如下图所示，点击开始构建。
如出现报错，请看下面的npm报错解决。
如下图，构建成功了，我们的Jenkins自动化部署就完事了。
看一下日志，执行成功了。
npm报错解决
以下是个人实操中出现的报错。
npm ERR! network Socket timeout
超时，配置代理设置为falsa命令如下。
npm config set proxy false
复制代码npm ERR! Command failed: /bin/sh -c autoreconf -fiv
此命令找不到，我们给他安装一下。
yum install autoconf
复制代码autoreconf: failed to run aclocal: No such file or directory
缺少东西，我们安装一下automake，执行如下命令。
yum install automake
复制代码error: possibly undefined macro: AC_PROG_LIBTOOL
如出现上面错误，执行下面命令，安装libtool
yum install libtool
复制代码error: no nasm (Netwide Assembler) found
如出现上面错误，执行下面命令，安装nasm
yum install nasm
复制代码后记
Jenkins自动化部署前端工程，也不是很难，赶快学起来吧！！！！
后续会出一篇有关于Jenkins部署后端项目。
如果你有问题或者建议欢迎大家评论区讨论。
如对您有用，希望你可以点赞，收藏，评论，您的支持是我最大动力。
我们下期再见。