一文带你实现Jenkins自动化部署前端工程-六虎

作者：一个在外讨生活的新时代农民工。

博主主页: @佳庆

所属专栏: 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布置后端项目。

假如你有问题或许主张欢迎我们谈论区讨论。

如对您有用，期望你能够点赞，收藏，谈论，您的支撑是我最大动力。

咱们下期再见。

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

前语