electron-pc客户端持续集成方案设计

官方对electron 的定义?

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required. - ELECTRON

我们通过以上的介绍,提取几个关键问题的答案:

question 1:  electron 是什么?
answer1:  electron 是一个构建桌面端应用的框架。
question2: electron 使用哪种开发语言?
answer2: 通过使用 JavaScript, HTML, and CSS 来构建桌面端应用。【暗示前端可以无缝衔接😁 】。必须要native的开发经验要求。
question3:  electron 这么神奇🐂🍺,由哪些技术组成?
answer3: Electron主要由Node.js、Chromium和封装好的系统API三大部分组成。
question4: electron 可以实现跨平台吗?
answer4:electron 通过 打包之后,可以运行在window, macOS, Liunx上。

好了,对electron有了简单了解之后,开始介绍electron-PC 跨平台持续部署方案。通过上面的第4个自问自答,我们可以知道,electron可以跑在 window, macOS, Liunx上,也就是说我们可以构建出 window, macOS, Liunx 3个环境的包,这里主要讨论 window, macOS。

我们使用了跨平台打包神器 electron-builder, 会根据打包的平台,来构建相应的跨平台版本。也就是我们需要在window 机器上构建 window版本的包和 在mac机器上构建mac版本的包。这样的话,我们的持续集成思路就不能局限在一台机器上。

PC端构建遇到的困扰

举一个没有持续集成的场景:

小李开发完成一个功能后,想打一个window包和一个mac包让测试做验证,但是自身平台是window,只能打window包,不能打mac包 , 而且自己打包的时候要等待控制台执行打包流程,不能进行其他的开发工作,白白浪费时间。打包完成之后,还需要从打包目录,拷贝一份发给测试,如果有多个测试,需要发多次,还可能一不小心发错。还要通知使用mac机器的同事帮忙打mac包,又浪费了其他人的时间。如果一天有多次构建打包,可想有多浪费时间。小李一天下来也是筋疲力尽。感觉一天啥也没干,净是处理打包了

我们总结下,没有持续集成的问题,然后我们再根据问题寻找优化方案

  • 一般一个开发人员根据自己的喜好只有一台机器,mac或者windows,所以只能打特定平台的包
  • 打包的过程需要在本地机器上进行,打包过程持续时间久,影响其他的开发工作
  • 打包完成之后,包在本地目录,需要手动拷贝给其他人,比较繁琐

image.png

以上的过程,不仅增加了沟通成本,流程也很复杂。

通过思考,我们给出以下方案

  • 抹开平台的差异性,不管是window开发机,还是mac开发机,执行相同的构建命令,可以同时打出 window,mac平台的包
  • 执行远程机器构建,开发人员本地只需要push触发
  • 构建完成之后,将包通过邮件的方式分发给相关人员,自行取用😋。

image.png

可以看到改进之后的流程,小李只需要本地执行构建命令,然后git push 这一步操作,其他的流程都不需要操心。省时省劲,又可以早点下班了。

如何实现优化后的方案。

铺垫了这么多,就是为了明白优化的初心 - 提高开发效率,节省有限的生命😏。废话不多说,开始。

简单介绍下持续集成

持续集成Continuous Integration
持续交付Continuous Delivery
持续:频繁发布,自动化流程,可重复,快速迭代

  • 持续集成(CI)是在源代码变更后自动检测、拉取、构建和(在大多数情况下)进行单元测试的过程
  • 持续交付包含持续集成(自动检测源代码变更、执行构建过程、运行单元测试以验证变更),持续测试(对代码运行各种测试以保障代码质量),和持续部署。

假设持续集成是一个菜,那么为了做这道菜,我需要3个食材

  • gitlab-runner
  • shell
  • .gitlab-cli.yml

分别简单介绍下:

gitlab-runner

GitLab Runner is an application that works with GitLab CI/CD to run jobs in a pipeline.

shell

它是一种程序设计语言。作为命令语言,它交互式解释和执行用户输入的命令或者自动地解释和执行预先设定好的一连串的命令;作为程序设计语言,它定义了各种变量和参数,并提供了许多在高级语言中才具有的控制结构,包括循环和分支

.gitlab-cli.yml

The .gitlab-ci.yml file is a YAML file where you configure specific instructions for GitLab CI/CD. - 官方解释

用一句话总结他们之间的关系为: gitlab-runner是一个执行器(一个程序执行器),.gitlab-ci.yml 表达是执行说明书, shell具体执行任务

image.png

各种名称,概念介绍完,开始我们流程

做一件事情之前,首先脑子里要有一个流程图,指引自己先做哪一件,后做哪一件,要做哪一件,要做到心里有数,脚下有路。不断的引导自己向目标前进。

image.png

实现步骤包含了:

  • 部署服务器,配置gitlab-runner
  • 项目里配置 .gitlab-cli.yml文件
  • 编写shell脚本
  • 测试流程,解决问题

总结

本篇主要介绍了electron-PC端需要持续集成的背景,并简单介绍了设计方案。electron 本地构建,可以参考另一篇文章。

最后我们从上帝视角看下实现了持续集成的整个流程:

[注] 以上的持续集成配置需要在一台windows 机器和一台mac 机器上进行。

posted @ 2021-10-13 14:33  eastsae  阅读(393)  评论(0编辑  收藏  举报