关于微前端:使用Jenkins部署微前端方案实践总结

本文首发于公众号「前端进阶之旅」

集成工具 jenkins 的根本介绍和自动化部署微前端我的项目的几个简略计划

Jenkins 是国内上风行的收费开源软件我的项目, 是基于 Java 开发继续集成工具, 用于监控继续反复的工作, 旨在提供一个凋谢的易用的软件平台, 使软件的继续集成自动化, 大大节约人力和时效。

Jenkins 性能包含：

继续的软件版本公布 / 测试项目。
监控内部调用执行的工作。

装置好的 jenkins 能够在系统管理进行配置零碎信息等

零碎设置
- 执行者数量：零碎可同时并发执行工作的数量，零碎默认 2 个，原则上不超过服务器 CPU 核数，否则容易呈现 CPU 利用率过载导致服务挂掉。
- Jenkins URL：Jenkins 拜访地址，能够批改地址的端口号，和批改服务器配置文件的端口号成果统一
凭据配置
- 凭据能够用来存储须要密文爱护的数据库明码、Gitlab 明码信息、Docker 公有仓库明码等，以便 Jenkins 能够和这些第三方的利用进行交互，须要装置 Credentials Binding 插件，用户才可治理凭据
凭据治理
- 凭据治理蕴含凭据的治理和凭据所在域的治理，零碎默认会创立全局域，用户能够在两个治理表格的存储下增加域，在用户抉择的域下增加凭据或者进入域详情增加凭据。为了最大水平地进步安全性，在 Jenkins 中配置的凭据以加密模式存储在主 Jenkins 实例上（由 Jenkins 实例 ID 加密），用户须要应用配置的惟一标识 ID 进行解决。
- 能够增加的凭证有 5 种：
  1. 用户名和明码
  2. SSH 密钥（SSH 公私钥对）
  3. 加密文件
  4. 令牌（例如 API 令牌、GitHub 集体拜访令牌）
  5. 证书
- 增加凭据：
  1. 品种
  2. 范畴（全局、零碎）
  3. 凭据
  4. ID (此字段是可选的。如果未指定其值，Jenkins 将为凭证 ID 调配一个全局惟一 ID（GUID）值。请记住，一旦设置了凭证 ID，就无奈再更改它)
  5. 凭证形容。
插件治理

Jenkins 提供了两种不同的办法来在主服务器上安装插件：
- 在治理平台界面中应用插件管理器
  
  通过“系统管理”>“插件治理”视图，Jenkins 环境的管理员能够应用该视图。在“可选插件”选项卡下，能够搜寻用户须要的插件，搜寻到须要的插件后勾选插件列表的选中框，之后点击左下角的下载并且重启后装置，期待插件下载实现后服务主动重启，从新进入零碎即装置胜利。
- 应用 Jenkins CLI install-plugin 命令
  
  管理员还能够应用 Jenkins CLI，它提供了装置插件的命令。用于治理 Jenkins 环境的脚本或配置管理代码可能须要装置插件，而无需在 Web UI 中间接进行用户交互。Jenkins CLI 容许命令行用户或自动化工具下载插件及其依赖项
治理用户

Jenkins 默认应用自带数据库模式存储用户，jenkins 默认创立 admin 账号，默认明码位于 /var/lib/jenkins/secrets/initialAdminPassword，登录之后可在治理用户批改用户默认明码

视图性能次要用于治理不同我的项目之间的工作，每个我的项目创立一个视图并在视图下治理整个我的项目的模块。

列表视图（显示简略列表。新建或编辑视图的时候能够抉择将以后已有的工作增加到该视图，也能够在该视图下新建工作）
我的视图（该视图主动显示以后用户有权限拜访的工作）

新建工作
- 工作名称
- 工作模板：jenkins 提供的工作模板，个别新装置的 jenkins 只会有一个“构建一个自在格调的软件我的项目”模板，而如果须要其余的工作模板须要用户下载对应的插件，不同的工作模板会有不同的构建流程
- 复制：可选项，用户能够输出已有的工作名称抉择其中之一复制一个新的工作，抉择了复制的工作后就无奈自定义工作模板，以复制的我的项目的工作模板为主
工作详情
- 状态
- 批改记录：每次构建获取的代码变更记录，即记录每次构建的 git 仓库提交记录
- 工作空间：工作的工作空间的我的项目文件目录
- 立刻构建：执行构建部署工作，应用不同的插件执行构建过程会有差别
- 配置：配置整个工作构建和部署过程的须要干什么
- 删除工程
- 重命名

工作配置次要将自动化构建部署从我的项目的获取到部署胜利的一个过程须要做的工作做合成配置。

这一步次要是在执行构建前对 jenkins 配置进行了简略的设置

形容
抛弃旧的构建
- 策略：默认 Log Rotation
  - 放弃构建的天数：将保留此天数的构建记录，为空保留所有
  - 放弃构建的最大个数：保留最近该个数的构建，为空保留所有
参数化构建过程

Extended Choice Parameter 插件，该插件能够应用多选框，利用该插件能够指定须要打包的利用，而不须要打包所有我的项目，缩小打包工夫
- Name：构建过程应用的参数名
- Description：参数形容
- Basic Parameter Types
  - Parameter Type：Check Boxes（值应用的类型）
  - Number of Visible Items：8 checkbox 参数值个数（我的项目子包和主包个数）
  - Delimiter：, 各个值的宰割符号
  - Choose Source for Value：main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system 参数值（主包和子包绝对我的项目门路
  - Choose Source for Default Value：main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system 参数默认选中的值（主包和子包绝对我的项目门路
布尔值参数，true/false 值的参数，以后利用于构建过程中判断是否须要构建 npm install
- 名称：构建过程应用的参数名
- 默认值：默认是否勾选
- 形容：参数形容

Git plugin

GIT 仓库治理插件，用于同步 git 库，通过该插件 jenkins 工作能够在构建过程中获取配置好的 git 近程仓库代码，工作执行时代码会被拉取到 /var/lib/jenkins/workspace/{工作名称} 目录下
- Repository URL 代码仓库地址
- Credentials 服务器连贯代码仓库的凭据，可在系统管理增加后抉择，也能够在左边的增加按钮新增凭据，新增形式和系统管理的凭据新增一样
- Branches to build 指定工作须要拉取的分支，容许配置多个分支
- 源码库浏览器指定 git 仓库类型，默认主动

执行 shell

开始执行构建工作之前源码治理插件曾经将代码从近程库中获取，执行 shell 工作次要通过获取参数化构建时设置的参数去对整个我的项目中的各个利用进行打包并将打包实现的部署文件对立放在根目录的公布文件夹publish，执行具体代码如下：

#!/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

Send build artifacts over SSH，应用该插件须要在 系统管理 -> 插件治理 中装置，该插件次要性能为将构建好的部署包依照肯定规定发送到部署服务器，并且在这之后可在部署服务器执行肯定的 shell 操作。装置插件后还须要在 系统管理 -> 系统配置 ->Publish over SSH增加 SSH Services。
- Name：抉择部署服务器，所选服务器就是系统配置中所增加，构建时就会连贯该服务器
- Transfers
  - Source files：构建服务器中部署文件的绝对地址publish/**
  - Remove prefix：文件发送后在部署服务器的门路和 Source files 统一，能够依据需要删除该地址后面某一段，以后为空
  - Remote directory：部署服务器的部署目录/home/jenkinsC
  - Exec command：文件发送实现之后在这里能够对部署服务器进行操作，这里的 shell 操作作用于部署服务器，因为微前端的部署特殊性，所以这里须要对发送过去的文件进行转移操作，具体如下：

#!/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

依照上一步的配置规定执行自动化构建和部署

门路：工程 ->Build With Parameters-> 开始构建

点击开始构建前须要配置构建所需的参数，构建过程中在左下角的构建历史能够查看构建进度条。

mutiParams：选中对应的利用，构建过程中就会只构建有勾选的利用
isRunInstall：利用是否须要执行 npm install，以后构建被选中的利用都会依照这个规定执行，为了缩小构建过程所耗费的工夫

在左侧的构建历史能够查看构建记录的状态，并且每个构建记录还能通过构建编号左侧的小球色彩判断状态，个别有三个状态别离分为 SUCCESS（蓝色）、UNSTABLE（黄色）、FAILURE（红色），点击对应构建记录可查看详细信息

状态形容：

SUCCESS：构建部署胜利
UNSTABLE：构建胜利，然而部署过程出错
FAILURE：构建过程就曾经出错

构建记录：

状态集：执行构建用户、以后构建记录的 git 分支以及提交记录
变更记录：以后构建记录 git 提交记录详细信息
控制台输入：构建部署执行过程命令执行的记录（能够在这里查看构建失败起因以及调试构建过程的问题）
编辑编译信息：设置以后构建记录的名称和备注
删除构建
参数：显示构建部署过程中自定义参数

Extended Choice Parameter 插件，该插件能够应用多选框
Git plugin
- GIT 仓库治理插件，用于同步 git 库，通过该插件 jenkins 工作能够在构建过程中获取配置好的 git 近程仓库代码，工作执行时代码会被拉取到 /var/lib/jenkins/workspace/{工作名称} 目录下
Send build artifacts over SSH，应用该插件须要在 系统管理 -> 插件治理 中装置，该插件次要性能为将构建好的部署包依照肯定规定发送到部署服务器，并且在这之后可在部署服务器执行肯定的 shell 操作。装置插件后还须要在 系统管理 -> 系统配置 ->Publish over SSH增加 SSH Services。

在 系统管理 -> 系统配置 ->Publish over SSH增加

### Jenkins 残缺配置搭建

成果演示

配置流程

构建的 shell 代码

#!/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

构建后操作 shell 代码

#!/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

最初配置一下 Nginx 指向 /home/docker/nginx/html/web-test 部署目录即可拜访

介绍阿里云对象存储部署步骤。

进入对象存储 OSS 服务

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

创立 Bucket 存储桶

Bucket 名称：xxx
地区：华南 1（深圳）
版本控制：不开明
读写权限：公共读
其余放弃默认

进入 CDN 服务

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

增加 CDN 域名

门路：CDN > 域名治理 > 增加域名

减速域名：xxx.test.com
资源分组：会员商城
新增源站信息
源站信息：OSS 域名
域名：xxx.oss-cn-shenzhen.aliyuncs.com
其余放弃默认
其余放弃默认

HTTPS 配置

门路：CDN > 域名治理 > 找到域名

门路：CDN > 域名治理 > 域名名称 > HTTPS 配置 > HTTPS 证书 > 批改配置

HTTPS 平安减速：开启
证书起源：云盾（SSL）证书核心
证书名称：test.com
其余放弃默认

失去 CNAME 域名

门路：CDN > 域名治理 > 找到域名

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

进入云解析 DNS 服务

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

增加 CNAME 记录

门路：云解析 DNS > 域名解析 > 找到域名

门路：云解析 DNS > 域名解析 > 解析设置 > 增加记录

记录类型：CNAME
主机记录：xxx.test.com
记录值：xxx.test.com.w.kunlunpi.com
其余放弃默认

缓存设置

门路：对象存储 > Bucket 列表 > 找到存储桶

门路：对象存储 > 存储桶名称 > 文件治理 > 找到 index.html 文件 > 更多 > 设置 HTTP 头

Cache-Control：no-cache（Object 容许被缓存在客户端或代理服务器的浏览器中，但每次拜访时须要向 OSS 验证缓存是否可用。缓存可用时间接拜访缓存，缓存不可用时从新向 OSS 申请。）
Cache-Control：no-store（不容许缓存 Object）
Expires：-1
其余放弃默认

设置动态页面

门路：对象存储 > 根底设置 > 动态页面
- 默认首页：index.html
- 子目录首页：未开明
- 默认 404 页：index.html

域名治理

门路：对象存储 > 传输治理 > 域名治理 > 绑定域名

域名：xxx.test.com
其余放弃默认

下载 oss browser 工具

https://help.aliyun.com/docum…

关于微前端:使用Jenkins部署微前端方案实践总结

继续集成

一、Jenkins 根底介绍

1. 系统管理

2. 新建视图

3. 工作

二、工作配置

1. General

2. 源码治理

3. 构建

4. 构建后操作

三、构建

1. 构建前

2. 构建后

四、Jenkins 部署微前端多个包残缺配置

须要装置的插件

五、应用阿里云 OSS 部署微前端我的项目

一、创立 Bucket 存储桶

二、增加 CDN 域名

三、增加 CNAME 记录

四、设置存储桶

五、上传代码至存储桶