[CICD] Jenkins builds and deploys front-end projects

For the research and study of CICD, after the initial learning and installation of jenkins, record the process of using jenkins to deploy front-end projects.

1. Goal

What I hope to achieve is: use the git tool locally to push the project code to the remote warehouse (this article uses gitee to demonstrate), use webHooks to trigger jenkins, and push the built code to the specified server, so as to realize automatic build deployment.

2. Preparations

1. gitee project repository
2. jenkins (install NodeJs, Gitee, Publish Over SSH and other plugins)
3. Web server (used to display the web page after the project is successfully deployed, or it can be a jenkins server, just use a different port)

Mainly introduce the process of installing and configuring jenkins plugins. The installation of all plugins can be searched in [Manage Jenkins]-[Manage Plugins]-[Avaliable Plugins]:

NodeJs

Publish Over SSH

Since I have installed [Gitee] before, I will not show it here, but I can find it in [Installed Plugins]; it is best to restart Jenkins after installing the plug-in, that is, [Download now and install after restart]; there is a problem , If the Jenkins service is started through the container, the automatic restart will fail in the new version of Jenkins, and the Jenkins container needs to be manually restarted for the service to be accessed normally.

After installing the above plug-ins, we need to configure the NodeJS environment and SSH configuration:
① Let’s talk about the NodeJS environment first. In [Manage Jenkins]-[Global Tool Configuration], you can see that

you can select the corresponding configuration according to the project environment and save it. Here, use The one is Node16.18.0:

② Then there is the SSH configuration, go to [Manage Jenkins] - [Configure System], we can see [Publish over SSH]:

click the [Add] button of the SSH Servers module, fill in the alias, your own server-related ip, select the connection method, etc. etc.; here I am using the password direct connection method, and you can also choose the secret key:

After filling in, you can test whether the configuration is available through [Test Configuration], and the display of success means that it can be used normally, and don’t forget to click Save:

3. Execution

A. New project

After the preparations are complete, we go back to the panel and create a new free-style Jenkins project:

B. Fill in the basic description information (optional)

C. Configure source code management [Source Code Management]

This is the management configuration of the remote warehouse. Select [Git], then fill in the corresponding warehouse address, then click [
Add] under [Credentials] to add the user name and password for logging in to the warehouse, and finally select the configuration just added (the default master branch , you can change it according to your own needs):

D. Configure build triggers [Build Triggers]

The Gitee warehouse is used here, and the Gitee plug-in is also downloaded in the preparation work; different build triggers can be selected according to different remote management warehouses ; the Gitee webhook URL is backfilled into Gitee, and click [Generate] to generate a Secret Token to fill in In the Gitee configuration item, the details are as follows:

E. Configure the build environment [Build Environment]

As the name suggests, it is to configure the environment required for code construction. Here it refers specifically to the NodeJs environment. We have installed and configured the required environment in the preparation work. Now directly select [Provide Node & npm bin/ folder to PATH ] Use [Node16.18.0] to:

F. Configure the build steps [Build Steps]

The first step is to click [Add build step] and select [Execute shell], and enter the build command:

node -v 
npm -v

npm config set registry https://registry.npm.taobao.org #切换淘宝镜像
npm install 
npm run build

rm -rf dist.tar.gz # 删除原有的压缩包
tar -zcvf dist.tar.gz dist/* # 打包 dist 下的所有文件

The second step is to push the built and packaged code to the specified folder, and decompress the code to the specified location of the service:

rm -rf /www/wwwroot/front_end_demo/dist # 删除原先代码
tar -zxvf /root/code/front_end/dist.tar.gz -C /www/wwwroot/front_end_demo/ # 解压代码

G. Execute the build

After pushing the code locally to the remote warehouse, trigger the build, and finally deploy the front-end project successfully as expected; and after configuring the website service through the pagoda, access it in the form of IP + Port:

4. Summary

To sum it up roughly:

1. Git push code, trigger webhook;
2. The Jenkins service is triggered to execute the build;
3. Jenkins pushes code to the server via SSH.