一文带你实现【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部署后端项目。

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

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

我们下期再见。