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

345次阅读  |  发布于3年以前

持续集成

大家好， 今天来分享一篇集成工具 jenkins 的基本介绍和自动化部署微前端项目的几个简单方案

一、Jenkins 基础介绍

Jenkins 是国际上流行的免费开源软件项目,是基于 Java 开发持续集成工具,用于监控持续重复的工作,旨在提供一个开放的易用的软件平台,使软件的持续集成自动化,大大节约人力和时效。

Jenkins 功能包括：

1. 系统管理

安装好的 jenkins 可以在系统管理进行配置系统信息等

  1. 种类
  2. 范围 （全局、系统）
  3. 凭据
  4. ID (此字段是可选的。如果未指定其值，Jenkins 将为凭证 ID 分配一个全局唯一 ID（GUID）值。请记住，一旦设置了凭证 ID，就无法再更改它)
  5. 凭证描述。

1 . 用户名和密码

2 . SSH 密钥（SSH 公私钥对）

3 . 加密文件

4 . 令牌（例如 API 令牌、GitHub 个人访问令牌）

5 . 证书

2. 新建视图

视图功能主要用于管理不同项目之间的任务，每个项目创建一个视图并在视图下管理整个项目的模块。

3. 任务

二、任务配置

任务配置主要将自动化构建部署从项目的获取到部署成功的一个过程需要做的工作做分解配置。

1. General

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

2. 源码管理

3. 构建

#!/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. 构建后操作

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

三、构建

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

1. 构建前

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

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

2. 构建后

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

状态描述：

构建记录：

四、 Jenkins部署微前端多个包完整配置

需要安装的插件

  #!/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部署微前端项目

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

一、创建 Bucket 存储桶

1. 进入对象存储 OSS 服务

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

2. 创建 Bucket 存储桶

二、添加 CDN 域名

1. 进入 CDN 服务

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

2. 添加 CDN 域名

路径：CDN > 域名管理 > 添加域名

3. HTTPS 配置

路径：CDN > 域名管理 > 找到域名

路径：CDN > 域名管理 > 域名名称 > HTTPS 配置 > HTTPS 证书 > 修改配置

4. 得到 CNAME 域名

路径：CDN > 域名管理 > 找到域名

三、添加 CNAME 记录

1. 进入云解析 DNS 服务

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

2. 添加 CNAME 记录

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

路径：云解析 DNS > 域名解析 > 解析设置 > 添加记录

四、设置存储桶

1. 缓存设置

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

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

2. 设置静态页面

路径：对象存储 > 基础设置 > 静态页面

1. 域名管理

路径：对象存储 > 传输管理 > 域名管理 > 绑定域名

五、上传代码至存储桶

1. 下载 oss browser 工具

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

配置完后上传到oss即可访问

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8