前端工程化部署

web端部署

部署方式

• 1、gitlab构建jenkins部署
• 2、华为云构建并部署
• 3、docker+gitlab

gitlab部署流程步骤

• 1、通过提交代码到仓库中，触发构建操作
  • 提交之后gitlab会检索gitlab-ci.yml文件中匹配的分支情况或Tag情况，触发对应的构建代码
• 2、代码构建生成对应的工程的代码包，随后将代码包（文件夹形式）上传到obs上，此时可以在obs上看到对应的代码包【构建之后的包】

对象存储的缩写有哪些?

• 阿里云 – OSS、华为云 – OBS、腾讯云 – COS

• 3、拿到代码包之后，可通过jenkins将包推送到nginx

华为云构建并部署

华为云部署流程步骤。配置构建任务

• 1、通过提交代码到代码仓库中（或者手动创建构建任务，触发构建操作

• 2、选着npm安装编译，完成代码包构建

• 3、将代码包压缩成压缩文件，上传到代码发布库

• 4、创建部署任务，选择主机组（没有需要创建，配置nginx密钥），选择需要发布的代码和对应的存放路径

小程序部署

• 1、通用部署
• 2、本地上传部署
• 3、代码提交自动部署
• 4、Tags部署

后面三种部署仅推版本，仍需确定或者手动设置体验版

不同的打包方式将触发不同的cl脚本进行代码上传

通用部署

• 1、完成小程序配置，在开发者工具人上传代码
• 2、在微信开发平台中，提审上传的版本【可将上传的代码包设置为体验版先进行测试】
• 3、审核通过后可按维度进行全量发布或者灰度发布

本地上传部署

• 可写一个build构建相关的命令触发【编译->打包->上传】的一条龙服务

代码提交自动部署

• 代码提交完成后，gitlab仓库的 .gitlab-ci.yml配置文件，可触发脚本来执行【编译->打包->上传】

  • 运行在 .gitlab-ci.yml文件中定义好的script脚本语句，构建代码包
  • 构建完成后，引入微信自动上传插件miniprogram-ci进行代码包上传

  miniprogram-ci插件文档：

  • https://www.npmjs.com/package/miniprogram-ci

Tags部署

将主仓库和子仓库分别都打上相同的Tag，会在主仓库生成CI构建块，可在构建块选择不同的打包模式【取决于.gitlab-ci.yml文件定制的不同给构建指令】

这里为什么要两个仓库都打Tag?

• 如果构建块是由Tag生成，那么构建的时候会去关联子仓库对应的Tag,如果关联不上，构建失败