集成工具 jenkins 的基本介绍和自动化部署微前端项目的几个简单方案
Jenkins 是国际上流行的免费开源软件项目,是基于 Java 开发持续集成工具,用于监控持续重复的工作,旨在提供一个开放的易用的软件平台,使软件的持续集成自动化,大大节约人力和时效。
Jenkins 功能包括:
安装好的 jenkins 可以在系统管理进行配置系统信息等
系统设置
凭据配置
凭据管理
插件管理
Jenkins 提供了两种不同的方法来在主服务器上安装插件:
在管理平台界面中使用插件管理器
通过“系统管理” >“插件管理”视图,Jenkins 环境的管理员可以使用该视图。在“ 可选插件 ”选项卡下,可以搜索用户需要的插件,搜索到需要的插件后勾选插件列表的选中框,之后点击左下角的下载并且重启后安装,等待插件下载完成后服务自动重启,重新进入系统即安装成功。
使用 Jenkins CLI install-plugin 命令
管理员还可以使用 Jenkins CLI,它提供了安装插件的命令。用于管理 Jenkins 环境的脚本或配置管理代码可能需要安装插件,而无需在 Web UI 中直接进行用户交互。Jenkins CLI 允许命令行用户或自动化工具下载插件及其依赖项
管理用户
Jenkins 默认使用自带数据库模式存储用户,jenkins 默认创建 admin 账号,默认密码位于 /var/lib/jenkins/secrets/initialAdminPassword
,登录之后可在管理用户修改用户默认密码
视图功能主要用于管理不同项目之间的任务,每个项目创建一个视图并在视图下管理整个项目的模块。
任务配置主要将自动化构建部署从项目的获取到部署成功的一个过程需要做的工作做分解配置。
这一步主要是在执行构建前对 jenkins 配置进行了简单的设置
描述
丢弃旧的构建
参数化构建过程
Extended Choice Parameter 插件,该插件可以使用多选框,利用该插件可以指定需要打包的应用,而不需要打包所有项目,减少打包时间
布尔值参数,true/false 值的参数,当前应用于构建过程中判断是否需要构建 npm install
Check Boxes
(值使用的类型)8
checkbox 参数值个数(项目子包和主包个数),
各个值的分割符号main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system
参数值(主包和子包相对项目路径main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system
参数默认选中的值(主包和子包相对项目路径Git plugin
GIT 仓库管理插件,用于同步 git 库,通过该插件 jenkins 任务可以在构建过程中获取配置好的 git 远程仓库代码,任务执行时代码会被拉取到/var/lib/jenkins/workspace/{任务名称}
目录下
执行 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。
publish/**
/home/jenkinsC
Name:选择部署服务器,所选服务器就是系统配置中所添加,构建时就会连接该服务器
Transfers
#!/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->开始构建
点击开始构建前需要配置构建所需的参数,构建过程中在左下角的构建历史可以查看构建进度条。
在左侧的构建历史可以查看构建记录的状态,并且每个构建记录还能通过构建编号左侧的小球颜色判断状态,一般有三个状态分别分为 SUCCESS(蓝色)、UNSTABLE(黄色)、FAILURE(红色),点击对应构建记录可查看详细信息
状态描述:
构建记录:
Extended Choice Parameter
插件,该插件可以使用多选框
Git plugin
/var/lib/jenkins/workspace/{任务名称}
目录下Send build artifacts over SSH,使用该插件需要在系统管理->插件管理
中安装,该插件主要功能为将构建好的部署包按照一定规则发送到部署服务器,并且在这之后可在部署服务器执行一定的 shell 操作。安装插件后还需要在系统管理->系统配置->Publish over SSH
添加 SSH Services。
在系统管理->系统配置->Publish over SSH
添加
效果演示
配置流程
构建的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
部署目录即可访问
介绍阿里云对象存储部署步骤。
https://oss.console.aliyun.com/
https://cdn.console.aliyun.com/
路径:CDN > 域名管理 > 添加域名
路径:CDN > 域名管理 > 找到域名
路径:CDN > 域名管理 > 域名名称 > HTTPS 配置 > HTTPS 证书 > 修改配置
路径:CDN > 域名管理 > 找到域名
https://dns.console.aliyun.com/
路径:云解析 DNS > 域名解析 > 找到域名
路径:云解析 DNS > 域名解析 > 解析设置 > 添加记录
路径:对象存储 > Bucket 列表 > 找到存储桶
路径:对象存储 > 存储桶名称 > 文件管理 > 找到 index.html 文件 > 更多 > 设置 HTTP 头
路径:对象存储 > 基础设置 > 静态页面
路径:对象存储 > 传输管理 > 域名管理 > 绑定域名
https://help.aliyun.com/document_detail/209974.html
配置完后上传到oss即可访问
最后
我是poetry,专注前端领域进阶技能分享与个人成长精进内容!
欢迎
长按图片加 poetry 为好友
,我会第一时间和你分享前端行业趋势,学习途径,成长内容等等。2021年陪你一起度过!如果你觉得这篇内容对你有帮助,我想请你帮我2个小忙:
1. 点个「在看」,让更多人也能看到这篇文章 2. 订阅官方博客 interview.poetries.top 让我们一起成长 点赞和在看就是最大的支持❤️