- 作者：一个在外讨生活的新时代农民工。
- 博主主页: @佳庆
- 所属专栏: Jenkins
- 支撑我: 点赞+收藏+留言。您的支撑是我最大动力。
前语
本文主要解说，运用Jenkins自动化布置前端工程。解说怎样自动化布置前后的分离项目中的前端工程。
前提条件：本地需求Jenkins，假如你不知道怎样装置，能够看我的另外一篇文章。
废话不多说，开干！
NodeJS装置
因为前端项目需求NodeJs环境，一切咱们需求装置NodeJS。
官网：下载 | Node.js 中文网
翻开如下图所示，点击一切下载选项
进来后，挑选一个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布置后端项目。
假如你有问题或许主张欢迎我们谈论区讨论。
如对您有用，期望你能够点赞，收藏，谈论，您的支撑是我最大动力。
咱们下期再见。
