前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合

    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础

    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习

    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他

    • Handbook
    • 职场话题
    • CSS可视化
  • 框架文档

    • React
    • Vue3
    • Vite
    • Svelte
    • Angular
    • NodeJS
    • Egg
    • Nest
    • Koa
    • Express
    • Electron
    • Ionic
    • Taro
    • Uniapp
    • React Native
    • Webpack
    • Rollup
    • Jquery API
    • Bootstrap
    • Axios
    • Lodash
    • RXJS
    • Sequelize
    • TypeORM
    • Mongoose
    • GraphQL
    • Puppeteer
    • Sass
    • Less
    • Umi4
    • Miniprogram
  • 文档教程

    • Cheatsheets
    • Devdocs有可能是全球最全的文档库
    • Overapi
    • JavaScript 标准参考教程
    • ES6 入门教程
    • MDN在线文档
    • Typscript中文文档
    • JavaScript Promise迷你书(中文版)
    • Canvas API中文
    • Git中文手册
    • 云开发Cloudbase
    • Serverless中文文档
  • UI组件

    • Ant Design React
    • Ant Design Vue
    • Ant Design Pro
    • ProComponents
    • 腾讯Tdesign
    • NutUI京东风格的轻量级移动端 Vue 组件库
    • Semantic UI Vue
    • Cube UI Vue滴滴
    • Iview UI
    • 有赞Vant Vue3
    • 有赞Vant 小程序
    • Element UI Vue3
  • 可视化

    • Antv
    • Bizcharts
    • Threejs
    • D3js
    • Highcharts
    • Echarts
  • 配置相关

    • ESLint
    • Babel
    • Nginx中文文档
    • Github Action中文
    • Docker官方文档
    • Jenkins官方文档
  • 后端相关

    • Spring官方文档中文版
    • Spring Boot官方文档
    • Spring Cloud官方文档
    • Java8官方文档
    • maven官方文档
    • Tomcat 8官方文档
    • Kafka中文文档
    • MyBatis中文文档
    • RabbitMQ中文文档
    • Dubbo中文文档
    • Netty官方文档
    • Elasticsearch官方文档
    • K8S官方文档
  • 实用工具

    • 在线正则表达式调试工具
    • 在线正则表达式可视化
    • 常用正则表达式大全
    • 可以在线看代码流程的网站:loupe
    • 在线MD5编码工具
    • 在线JWT解码工具
    • 在线JSON解析
    • 在线文本比对
    • 在线JS代码格式化
    • 在线SQL压缩格式化
    • 在线XML压缩格式化
    • 在线时间戳转化工具
    • 在线RGB颜色转化工具
    • 在线HTTP在线接口测试工具
    • 在线IP地址查询
    • 在线菜鸟综合导航工具
  • 在线编程

    • MipCode快速的在线代码创作工具
    • Codepen
    • Jsbin
    • CodeSandBox在线快速学习React/Vue
    • Vue SFC Playground
    • Vue3 模板在线解析查看编译结果
    • Svelte Playground
    • 在线尝试Babel编译
    • Typescript在线编译
    • AST可视化编辑
    • 在线尝试Rollup打包
    • Prettier Playground
    • Stackblitz基于VSCODE的WEBIDE
    • NPM Runkit在浏览器中快速学习及尝试Node.js模块
    • Play with Docker在线体验
  • CSS相关

    • 用来帮助大家查找CSS的相关属性的语法,以及使用方法
    • 提供了CSS相关属性的浏览器兼容表,同时提供了对应属性资源
    • Flex在线动态练习
    • 贝塞尔曲线生成工具
    • SCSS在线转CSS
    • Clip-path在线生成器
    • Animate.css动画效果
    • 按需定制CSS动画效果
    • 一份清单,按字母表顺序列出了每个CSS属性
    • CSS按钮生成器
    • Css3按钮动画
    • CSS3渐变样式生成器,类似Photoshop中的渐变界面
    • CSS3 Maker可在线演示渐变阴影旋转动画并生成代码
    • CSS3 Tool非常方便的生成背景渐变、阴影、旋转和边框圆角效果
    • SVG背景生成
    • 多张图片合成雪碧图
    • 汇集了实现各种加载效果的CSS代码片段
    • SVG滤镜
    • HTML5 元素标签含义大全(元素周期表)
    • HTML语义化
    • KakaCss快速生成Css样式,在任意网站复制内容,再到本页面Ctrl+V
    • CSS参考手册
    • 各种各样的loading效果
    • CSS shadow generator
    • 通过拖拽的形式生成需要的border radius
    • 花式半径生成器-通过拖拽的形式生成需要的border radius
    • cssgrid-generator
  • 综合

    • 可视化学习算法网站
    • 在线Nginx配置
    • React生命周期查看网站
    • CodeFun设计稿智能生成源代码
    • Imgcook由设计稿一键智能生成代码的大厨
  • 创作必备

    • 在线画图processon
    • Draw.io免费的流行的流程图工具
    • 在线思维导图mindline
    • 在线字数统计
    • 在线mardown排版
    • 在线免费图床
    • 在线代码截图carbon
    • 在线短链生成
    • 在线文本替换
    • 在线文件压缩
    • 在线多媒体转换器
    • 在线PDF转化工具SmallPdf
    • 在线任意文件的格式转换Convertio
    • 在线PS工具
    • 在线抠图工具
    • LOGO在线制作
    • 在线制作海报设计工具
    • Open source icons
    • 表情包在线网站
    • 图片智能放大工具
    • ICO图标在线生成
    • 视频转GIF工具
    • 音频在线处理
    • 多图合成GIF工具
    • 在线图片压缩工具
    • Pixabay图片素材库
    • Unsplash图片素材库
    • Pexels图片素材库
小程序题库
公众号动态
博客动态
前端导航
Jenkins部署微前端方案实践总结
首页
2021-11-17 10:35:08
Front-End
微前端

# 持续集成

集成工具 jenkins 的基本介绍和自动化部署微前端项目的几个简单方案

# 一、Jenkins 基础介绍

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

Jenkins 功能包括:

  • 持续的软件版本发布/测试项目。
  • 监控外部调用执行的工作。

# 1. 系统管理

安装好的 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,登录之后可在管理用户修改用户默认密码

# 2. 新建视图

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

  • 列表视图(显示简单列表。新建或编辑视图的时候可以选择将当前已有的任务添加到该视图,也可以在该视图下新建任务)
  • 我的视图(该视图自动显示当前用户有权限访问的任务)

# 3. 任务

  • 新建任务
    • 任务名称
    • 任务模板:jenkins 提供的任务模板,一般新安装的 jenkins 只会有一个“构建一个自由风格的软件项目”模板,而如果需要其他的任务模板需要用户下载对应的插件,不同的任务模板会有不同的构建流程
    • 复制:可选项,用户可以输入已有的任务名称选择其中之一复制一个新的任务,选择了复制的任务后就无法自定义任务模板,以复制的项目的任务模板为主
  • 任务详情
    • 状态
    • 修改记录:每次构建获取的代码变更记录,即记录每次构建的 git 仓库提交记录
    • 工作空间:任务的工作空间的项目文件目录
    • 立即构建:执行构建部署任务,使用不同的插件执行构建过程会有差异
    • 配置:配置整个任务构建和部署过程的需要干什么
    • 删除工程
    • 重命名

# 二、任务配置

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

# 1. General

这一步主要是在执行构建前对 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

    • 名称:构建过程使用的参数名
    • 默认值:默认是否勾选
    • 描述:参数描述

# 2. 源码管理

  • Git plugin

    GIT 仓库管理插件,用于同步 git 库,通过该插件 jenkins 任务可以在构建过程中获取配置好的 git 远程仓库代码,任务执行时代码会被拉取到/var/lib/jenkins/workspace/{任务名称}目录下

    • Repository URL 代码仓库地址
    • Credentials 服务器连接代码仓库的凭据,可在系统管理添加后选择,也可以在右边的添加按钮新增凭据,新增方式和系统管理的凭据新增一样
    • Branches to build 指定任务需要拉取的分支,允许配置多个分支
    • 源码库浏览器 指定 git 仓库类型,默认自动

# 3. 构建

  • 执行 shell

    开始执行构建任务之前源码管理插件已经将代码从远程库中获取,执行 shell 任务主要通过获取参数化构建时设置的参数去对整个项目中的各个应用进行打包并将打包完成的部署文件统一放在根目录的发布文件夹publish,执行详细代码如下:

    #!/bin/bash
    
    fe
    Preview
    • 持续集成
      • 一、Jenkins 基础介绍
        • 1. 系统管理
        • 2. 新建视图
        • 3. 任务
      • 二、任务配置
        • 1. General
        • 2. 源码管理
        • 3. 构建
        • 4. 构建后操作
      • 三、构建
        • 1. 构建前
        • 2. 构建后
      • 四、 Jenkins部署微前端多个包完整配置
        • 需要安装的插件
      • 五、使用阿里云OSS部署微前端项目
        • 一、创建 Bucket 存储桶
        • 1. 进入对象存储 OSS 服务
        • 2. 创建 Bucket 存储桶
        • 二、添加 CDN 域名
        • 1. 进入 CDN 服务
        • 2. 添加 CDN 域名
        • 3. HTTPS 配置
        • 4. 得到 CNAME 域名
        • 三、添加 CNAME 记录
        • 1. 进入云解析 DNS 服务
        • 2. 添加 CNAME 记录
        • 四、设置存储桶
        • 1. 缓存设置
        • 2. 设置静态页面
        • 1. 域名管理
        • 五、上传代码至存储桶
        • 1. 下载 oss browser 工具

    ← Git开发流程分支管理方案serverless及小程序云开发实践总结 →