Summary of the practice of using Jenkins to deploy the micro front-end solution

This article was first published on the public account "Front-end Advanced Journey"

Continuous integration

A basic introduction to the integration tool jenkins and a few simple schemes for automating the deployment of micro front-end projects

1. Basic introduction to Jenkins

Jenkins is an internationally popular free and open source software project. It is a continuous integration tool based on Java to monitor continuous repetitive work. It aims to provide an open and easy-to-use software platform that automates the continuous integration of software and greatly saves manpower and aging.

Jenkins features include:

Continuous software version release/test project.
Monitor the work performed by external calls.

1. System Management

Installed jenkins can configure system information in the system management, etc.

System settings
- Number of executors: The number of tasks that the system can execute concurrently. The system defaults to two. In principle, it does not exceed the number of server CPU cores. Otherwise, CPU utilization may be overloaded and the service may hang.
- Jenkins URL: Jenkins access address, the port number of the address can be modified, and the effect of modifying the port number of the server configuration file is the same
Credential configuration
- Credentials can be used to store database passwords that require ciphertext protection, Gitlab password information, Docker private warehouse passwords, etc., so that Jenkins can interact with these third-party applications. The Credentials Binding plug-in needs to be installed so that users can manage credentials
Credential management
- Credential management includes the management of credentials and the management of the domain where the credentials are located. The system creates a global domain by default. Users can add domains under the storage of two management tables, add credentials under the domain selected by the user or enter the domain details to add credentials. In order to maximize security, the credentials configured in Jenkins are stored in encrypted form on the main Jenkins instance (encrypted by the Jenkins instance ID), and the user needs to use the configured unique identification ID for processing.
- There are 5 types of credentials that can be added:
  1. user name and password
  2. SSH key (SSH public and private key pair)
  3. Encrypted files
  4. Token (e.g. API token, GitHub personal access token)
  5. Certificate
- Add credentials:
  1. type
  2. Scope (global, system)
  3. Credentials
  4. ID (This field is optional. If its value is not specified, Jenkins will assign a globally unique ID (GUID) value to the credential ID. Remember that once the credential ID is set, you cannot change it)
  5. Credential description.
Plug-in management
Jenkins provides two different methods to install plugins on the main server:
- Use the plug-in manager in the management platform interface
  Through the "System Management"> "Plugin Management" view, the administrator of the Jenkins environment can use this view. Under the "Optional Plugins" tab, you can search for plug-ins that users need. After searching for the plug-ins you need, check the box in the plug-in list, then click Download in the lower left corner and install after restarting. Wait for the plug-in download to complete and the service will restart automatically , Re-enter the system to install successfully.
- Use the Jenkins CLI install-plugin command
  Administrators can also use the Jenkins CLI, which provides commands to install plugins. Scripts or configuration management code used to manage the Jenkins environment may need to install plug-ins without direct user interaction in the Web UI. Jenkins CLI allows command line users or automated tools to download plugins and their dependencies
Manage users
Jenkins uses its own database mode to store users by default. Jenkins creates an admin account by default. The default password is at /var/lib/jenkins/secrets/initialAdminPassword . After logging in, you can modify the default password of the user in the management user.

2. New View

The view function is mainly used to manage tasks between different projects. Each project creates a view and manages the modules of the entire project under the view.

List view (display a simple list. When creating or editing a view, you can choose to add currently existing tasks to this view, or you can create a new task in this view)
My view (this view automatically displays tasks that the current user has permission to access)

3. Task

New task
- mission name
- Task template: The task template provided by jenkins. Generally, a newly installed jenkins will only have a "build a free-style software project" template. If other task templates are needed, users need to download the corresponding plug-ins. Different task templates will be different Build process
- Copy: Optional. The user can enter the existing task name and select one of them to copy a new task. After selecting the copied task, the task template cannot be customized, and the task template of the copied project is the main one.
Task details
- state
- Modification record: the code change record obtained for each build, that is, record the git warehouse submission record for each build
- Workspace: The project file directory of the task's workspace
- Build now: Perform build deployment tasks, and use different plugins to execute the build process will be different
- Configuration: What is needed to configure the entire task building and deployment process
- Delete project
- Rename

Two, task configuration

Task configuration mainly decomposes and configures the work that needs to be done in the process of automated construction and deployment from project acquisition to successful deployment.

1. General

This step is mainly to simply set up the jenkins configuration before executing the build

describe
Discard the old build
- Strategy: Default Log Rotation
  - Keep the number of days to build: will save the build record for this number of days, leave it blank to save all
  - Keep the maximum number of builds: save the most recent builds of this number, leave it empty to save all
Parametric construction process
Extended Choice Parameter plug-in, the plug-in can use the multi-select box, the plug-in can be used to specify the application that needs to be packaged, without the need to package all items, reducing packaging time
- Name: The parameter name used in the build process
- Description: parameter description
- Basic Parameter Types
  - Parameter Type: Check Boxes (the type used by the value)
  - Number of Visible Items: 8 number of checkbox parameter values (the number of project sub-packages and main packages)
  - Delimiter: , the division symbol of each value
  - Choose Source for Value: main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system parameter value (relative project path of the main package and sub-package
  - Choose Source for Default Value: main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system parameter default selected value (main package and sub-package relative project path
Boolean parameter, true/false value parameter, currently used in the build process to determine whether to build npm install
- Name: the parameter name used in the build process
- Default value: whether checked by default
- Description: parameter description

2. Source code management

Git plugin
GIT warehouse management plug-in, used to synchronize the git library, through the plug-in jenkins task can obtain the configured git remote warehouse code during the construction process, the code will be pulled to /var/lib/jenkins/workspace/{ Task name} under the directory
- Repository URL code repository address
- The credentials for the Credentials server to connect to the code warehouse can be selected after the system management is added, or you can add the credentials in the add button on the right. The method of adding the credentials is the same as that of the system management.
- Branches to build specify the branch that the task needs to pull, allowing multiple branches to be configured
- The source repository browser specifies the git repository type, and the default is automatic

`3. Build`

Execute shell

Before starting to execute the build task, the source code management plug-in has obtained the code from the remote library. The shell task is mainly used to obtain the parameters set during the parameterized construction to package each application in the entire project and place the packaged deployment files in a unified manner. The root directory of the release folder publish , the detailed code for execution is as follows:

#!/bin/bash
# 项目根目录地址（相对于工作空间）
project_path=""
# 将用户选择需要打包的应用拆分成数组
OLD_IFS="$IFS"
IFS=","
arr=($mutiParams)
IFS="$OLD_IFS"
# 清空上次打包的部署文件
rm -rf $WORKSPACE$project_path/publish


for i in ${arr[@]}
do
    # 进入对应的应用中执行打包过程，$WORKSPACE为系统环境变量，值为工作空间地址
    cd $WORKSPACE$project_path/$i
    rm -rf dist
    # 判断是否需要执行环境安装，当前设置为全局设置，所有需要打包的应用会执行相同的判断
    if [[ $isRunInstall == "true" ]]
    then
      npm install
    fi
    npm run build
    # 将子应用和主应用放在同一级，便于后续部署，因为很多微前端项目子应用都会放置在同一个文件夹下
    [[ $i == "main" ]] && subdir=$i || subdir=${i##*/}


    mkdir -p $WORKSPACE$project_path/publish/$subdir
    mv dist/* $WORKSPACE$project_path/publish/$subdir
done

`4. Post-build operations`

Send build artifacts over SSH. To use this plug-in, you need to it in 161959e995ce2a system management -> plug-in management. The main function of the plug-in is to send the built deployment package to the deployment server according to certain rules, and then it can be executed on the deployment server. Shell operation. After installing the plug-in, you need to add SSH Services System Management -> System Configuration -> Publish over SSH.
- Name: Select the deployment server, the selected server is added in the system configuration, and the server will be connected when building
- Transfers
  - Source files: the relative address of the deployed file in the build server publish/**
  - Remove prefix: After the file is sent, the path of the deployment server is the same as that of Source files. You can delete a segment in front of the address according to your needs. It is currently empty
  - Remote directory: Deployment directory of the deployment server /home/jenkinsC
  - Exec command: After the file is sent, the deployment server can be operated here. The shell operation here acts on the deployment server. Due to the special deployment of the micro front end, the file sent here needs to be transferred, as follows:

#!/bin/bash


# 此处的packages后面多了个publish是打包之后的部署文件名，为了防止在部署主应用的时候被删掉
packages="main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system,publish"
# 部署目录
PUBLISH_PATH=/home/jenkinsC


# 依次循环部署构建好的应用
for package in `ls $PUBLISH_PATH/publish`
do
    # 判断当前是否为主应用，因为主包需要把主应用的所有文件直接部署在部署目录下，所以需要在过滤掉子应用和publish文件夹的情况下删除所有旧的主应用文件再进行部署
    if [[ $package == "main" ]]
    then
        for element in `ls $PUBLISH_PATH`
        do
          [[ $packages =~ $element ]] || rm -rf $PUBLISH_PATH/$element
        done
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH
    else
        # 子应用部署方式直接先删除原有文件后部署
        rm -rf $PUBLISH_PATH/$package
        mkdir -p $PUBLISH_PATH/$package
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH/$package
    fi
done
# 部署完成后需要删除部署文件，否则下次部署如果没有删掉会再次部署旧的文件
rm -rf $PUBLISH_PATH/publish

`Three, build`

Perform automated build and deployment according to the configuration rules in the previous step

`1. Before building`

Path: Project->Build With Parameters->Start building

You need to configure the parameters required for the build before you click to start the build. During the build process, you can view the build progress bar in the build history in the lower left corner.

mutiParams: Select the corresponding application, and only the checked application will be built during the construction process
isRunInstall: Whether the application needs to execute npm install, the currently selected application will be executed according to this rule, in order to reduce the time consumed in the construction process

`2. After the build`

In the construction history on the left, you can view the status of the build records, and each build record can also be judged by the color of the ball on the left of the build number. Generally, there are three statuses divided into SUCCESS (blue), UNSTABLE (yellow), FAILURE (red), click on the corresponding build record to view detailed information

status description:

SUCCESS: Successfully built and deployed
UNSTABLE: The build was successful, but there was an error in the deployment process
FAILURE: An error occurred during the build process

Build record:

Status set: the user who executed the build, the git branch of the current build record, and the commit record
Change record: current build record git commit record details
Console output: the record of the command execution during the build deployment execution process (you can view the reason for the build failure and debug the build process problems here)
Edit compilation information: set the name and remarks of the current build record
Delete build
Parameters: display custom parameters during the build and deployment process

`Four, Jenkins deploys the complete configuration of multiple packages in the micro front end`

`Need to install plug-ins`

Extended Choice Parameter plug-in, the plug-in can use the multi-
Git plugin
- GIT warehouse management plug-in, used to synchronize the git library, through the plug-in jenkins task can obtain the configured git remote warehouse code during the construction process, the code will be pulled to /var/lib/jenkins/workspace/{ Task name} under the directory
Send build artifacts over SSH. To use this plug-in, you need to it in 161959e995d19f System Management -> Plug-in Management. The main function of the plug-in is to send the built deployment package to the deployment server according to certain rules, and then it can be executed on the deployment server. Shell operation. After installing the plug-in, you also need to add SSH Services System Management->System Configuration->Publish over SSH.

Add in System Management->System Configuration->Publish over SSH

### Jenkins complete configuration setup

effect demonstration

configuration process

Built shell code

#!/bin/bash -ilex

echo $PATH

packages="main,subs/system,subs/teaLifeManage,subs/wechatManage"
project_path=""

OLD_IFS="$IFS"
IFS=","
arr=($mutiParams)
IFS="$OLD_IFS"

rm -rf $WORKSPACE$project_path/publish

for i in ${arr[@]}
do
    echo '打印i：' + $i 
    cd $WORKSPACE$project_path/$i
    rm -rf dist
    if [[ $isRunInstall == "true" ]]
    then
       npm install
    fi
    
    if [[ $i == "main" ]]
    then
      if [[ $nodeDev == "development" ]]
      theninsta
          npm run test
      else
          npm run build $nodeDev
      fi
    else
      npm run build $nodeDev
    fi
    
    if [[ $i == "main" ]]
    then
        newsubdir=$i
    else
        subdir=${i%Manage*}
        newsubdir=${subdir##*/}
    fi
    
    
    mkdir -p $WORKSPACE$project_path/publish/${newsubdir,,}
    mv dist/* $WORKSPACE$project_path/publish/${newsubdir,,}
    
    echo '打印WORKSPACE：' + $WORKSPACE
    echo '打印newsubdir：' + $newsubdir
done

Manipulate shell code after build

#!/bin/bash -ilex
packages="main,subs/system,subs/teaLifeManage,subs/wechatManage,publish"
PUBLISH_PATH=/home/docker/nginx/html/web-test

for package in `ls $PUBLISH_PATH/publish`
do
    if [[ $package == "main" ]]
    then
        for element in `ls $PUBLISH_PATH`
        do
            [[ ${packages,,} =~ $element ]] || rm -rf $PUBLISH_PATH/$element
        done
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH
    else
        rm -rf $PUBLISH_PATH/$package
        mkdir -p $PUBLISH_PATH/$package
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH/$package
    fi
done
rm -rf $PUBLISH_PATH/publish

Finally, configure Nginx to point to /home/docker/nginx/html/web-test deployment directory to access

`5. Use Alibaba Cloud OSS to deploy micro front-end projects`

Introduce the deployment steps of Alibaba Cloud Object Storage.

`1. Create a Bucket`

Enter object storage OSS service

https://oss.console.aliyun.com/

Create Bucket

Bucket name: xxx
Region: South China 1 (Shenzhen)
Version control: not open
Read and write permissions: public read
Other keep the default

`2. Add CDN domain name`

Enter CDN service

https://cdn.console.aliyun.com/

Add CDN domain name

Path: CDN> Domain Management> Add Domain

Accelerated domain name: xxx.test.com
Resource grouping: member mall
New source station information
Origin site information: OSS domain name
Domain name: xxx.oss-cn-shenzhen.aliyuncs.com
Other keep the default
Other keep the default

HTTPS configuration

Path: CDN> Domain Name Management> Find Domain Name

Path: CDN> Domain Name Management> Domain Name> HTTPS Configuration> HTTPS Certificate> Modify Configuration

HTTPS security acceleration: open
Certificate source: Cloud Shield (SSL) Certificate Center
Certificate name: test.com
Other keep the default

Get the CNAME domain name

Path: CDN> Domain Name Management> Find Domain Name

CNAME：xxx.test.com.w.kunlunpi.com

`Three, add CNAME record`

Enter the cloud DNS service

https://dns.console.aliyun.com/

Add CNAME record

Path: Alibaba Cloud DNS> Domain Name Resolution> Find the domain name

Path: Alibaba Cloud DNS> Domain Name Resolution> Resolution Settings> Add Record

Record type: CNAME
Host record: xxx.test.com
Record value: xxx.test.com.w.kunlunpi.com
Other keep the default

`Fourth, set up a bucket`

Cache settings

Path: Object Storage> Bucket List> Find Bucket

Path: Object Storage> Bucket Name> File Management> Find index.html file> More> Set HTTP header

Cache-Control: no-cache (Object is allowed to be cached in the browser of the client or proxy server, but each time you access it, you need to verify whether the cache is available. When the cache is available, you can directly access the cache, and if the cache is not available, you can request it again from the OSS .)
Cache-Control: no-store (Object caching is not allowed)
Expires：-1
Other keep the default

Set up a static page
Path: Object Storage> Basic Settings> Static Page
- Default homepage: index.html
- Sub-Catalogue Homepage: Unopened
- Default 404 page: index.html

Domain name management

Path: Object Storage> Transmission Management> Domain Name Management> Bind Domain Name

Domain name: xxx.test.com
Other keep the default

`Five, upload the code to the bucket`

Download the oss browser tool

https://help.aliyun.com/document_detail/209974.html