foreword
This article mainly explains how to use Jenkins to automatically deploy front-end projects. Explain how to automate front-end engineering in separate projects before and after deployment.
Prerequisite: Jenkins is required locally. If you don’t know how to install it, you can read another article of mine.
Don't talk nonsense, let's do it!
NodeJS installation
Because the front-end project requires a NodeJs environment, we need to install NodeJS.
Official website: Download | Node.js Chinese website
Open as shown below, click all download options
After entering, choose a Linux compressed package version. Note: The node version downloaded here must communicate with the front-end personnel. We use node-v16.19.1-linux-x64.tar.gz here
Open our server and execute the wget command.
wget https://registry.npmmirror.com/-/binary/node/v16.19.1/node-v16.19.1-linux-x64.tar.gz
复制代码You can see that it is being downloaded, as shown in the figure below, the download is successful.
Execute the unzip command. This command means to decompress node-v16.19.1-linux-x64.tar.gz and put it in the specified /usr/etc/ directory.
tar zxvf node-v16.19.1-linux-x64.tar.gz -C /usr/etc/
复制代码The decompression is successful as shown in the figure below.
Environment configuration
Execute the following command to modify the environment variable file
vim /etc/profile
复制代码In the last line, enter your position according to node
export NODE_HOME=/usr/etc/node-v16.19.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin
export NODE_HOME
复制代码Configure as shown below.
To make the environment variable take effect, execute the following command.
source /etc/profile
复制代码Then verify it, as shown in the figure below.
Npm install Taobao mirror
Because the mirror source of the official website is very slow in China, we use the mirror source replaced by Taobao.
Direct command-line settings
npm config set registry http://registry.npmmirror.com
复制代码If you need to restore to the original official address, you only need to execute the following command:
npm config set registry https://registry.npmjs.org
复制代码Check if the installation is successful
npm config get registry
复制代码credential configuration
Because Jenkins implements automatic deployment, it needs to pull the code first. We need to configure the git credential, and Jenkins can pull our code through this credential.
Need to open System Management -> 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
If the above error occurs, execute the following command to install libtool
yum install libtool
复制代码error: no nasm (Netwide Assembler) found
If the above error occurs, execute the following command to install nasm
yum install nasm
复制代码postscript
It is not difficult to automatically deploy front-end projects with Jenkins, so learn it quickly! ! ! !
A follow-up article will be published about the Jenkins deployment back-end project.
If you have any questions or suggestions, welcome to discuss in the comment area.
If it is useful to you, I hope you can like, bookmark, and comment. Your support is my biggest motivation.
See you next time.