利用 electron-builder 實(shí)現(xiàn) electron app 的署名／打包／發(fā)布以及自動(dòng)更

banana_pi 發(fā)布于2019-08-22 13:49 / 2822人閱讀

摘要：筆者系貢獻(xiàn)者之一是什么官方解釋如下簡單來說，就是一個(gè)可以將打包成安裝器，以及可以為提供自動(dòng)更新功能的全家桶。也是一個(gè)開源的也是利用了的來進(jìn)行新版本的發(fā)布通知。而且因?yàn)槭峭ㄟ^靜態(tài)文件服務(wù)器實(shí)現(xiàn)的，所以大大減少了計(jì)算消耗。

筆者系 electron-builder 貢獻(xiàn)者之一（#12）

electron-builder 是什么

官方解釋如下：

A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box

簡單來說，electron-builder 就是一個(gè)可以將 electron app 打包成安裝器 (installer)，以及可以為 electron app 提供自動(dòng)更新功能的全家桶。

接下來分別介紹 electron-builder 的兩大功能：署名/打包/發(fā)布和自動(dòng)更新

署名/打包/發(fā)布流程

想要將開發(fā)完成的 app 署名打包成安裝器 (installer) 發(fā)布出去，需要進(jìn)行以下幾個(gè)步驟

署名

打包

發(fā)布

electron-builder 的強(qiáng)大之處在于，以上幾個(gè)步驟可以一鍵完成，甚至包括打包成不同平臺(tái)版本 (etc. macOS, windows...)

但是，在讓 electron-builder 為我們完成以上步驟之前，它必須知道一系列信息才能進(jìn)行署名／打包／發(fā)布一系列流程。它需要知道的信息有：

署名：署名證書在哪里，以及使用署名證書的密碼等信息

打包：打包的安裝器面向的平臺(tái)，是 macOS, windows 還是 linux ，以及安裝器的格式等等

發(fā)布：要將打包好的安裝器發(fā)布到的服務(wù)器，那么就需要和服務(wù)器進(jìn)行鏈接的驗(yàn)證信息

配置署名環(huán)節(jié)所需信息

如果你進(jìn)行署名打包的機(jī)器是 macOS 而且打包的安裝器對應(yīng)的平臺(tái)也是 macOS 的話，electron-builder 會(huì)自動(dòng)檢測你 keychain 里面可用的署名證書然后自動(dòng)使用，那么就不需要手動(dòng)配置署名信息了。

要配置署名環(huán)節(jié)的各種信息，有兩種方式（選其一即可，推薦在環(huán)境變量方式）

在 package.json 里設(shè)置

在環(huán)境變量中設(shè)置

在 package.json 里的設(shè)置方式

// 對于 windows 平臺(tái)的安裝器
"win": {
  "target": [
  {
  "signingHashAlgorithms": "sha1",
  "sign": "********",
  "certificationFile": "../../*****",
  "certificatePassword": "******"
  }
  ]
},

// 對于 macOS 平臺(tái)的安裝器
"mac": {
  "identity": "****" // The name of certificate to use when signing.
  },

在環(huán)境變量中配置

Env Name	Description
CSC_LINK	The HTTPS link (or base64-encoded data, or file:// link, or local path) to certificate (.p12 or .pfx file). Shorthand ~/ is supported (home directory).
CSC_KEY_PASSWORD	The password to decrypt the certificate given in CSC_LINK.
CSC_NAME	macOS-only Name of a certificate (to retrieve from login.keychain). Useful on a development machine (not on CI) if you have several identities (otherwise don"t specify it).
CSC_IDENTITY_AUTO_DISCOVERY	true or false. Defaults to true — on a macOS development machine valid and appropriate identity from your keychain will be automatically used.
CSC_KEYCHAIN	The keychain name. Used if CSC_LINK is not specified. Defaults to system default keychain.

注意：如果你是在 macOS 上打包面向 windows 平臺(tái)的安裝器，必須增加兩個(gè)不同的環(huán)境變量 WIN_CSC_LINK 和 WIN_CSC_KEY_PASSWORD

配置打包環(huán)節(jié)所需信息

所謂打包環(huán)節(jié)所需信息，就是指定安裝器（installer）的一系列配置信息。比如說運(yùn)行環(huán)境，安裝器格式，版權(quán)信息，安裝器命名等等。這些信息都是在 package.json 中配置。比如：

"win": {
  "target": [
  {
  "target": "nsis",
  "arch": [
  "x64",
  "ia32"
  ],
  ......
  }
  ]
},

"mac": {
  "category": "your.app.category.type",
  "target": [
  "zip",
  "dmg"
  ],
  },

更多詳細(xì)配置，請參考

macOS詳細(xì)配置

Windows詳細(xì)配置

Linux詳細(xì)配置

配置發(fā)布環(huán)節(jié)所需信息

署名，打包完成后的安裝器需要上傳發(fā)布到服務(wù)器（比如說S3），那么electron-builder就需要將鏈接服務(wù)器的驗(yàn)證信息（比如賬號／密碼，或者各種 Token 等等）。

由于發(fā)布的服務(wù)器種類各異，所以針對不停的服務(wù)器，配置的方式不盡相同

Bintray

通過Bintray發(fā)布的話，需要一個(gè) API key，這個(gè)API key 可以從用戶主頁獲取到("Edit Your Profile" -> API Key)，將這個(gè) API key 配置到環(huán)境變量 BT_TOKEN 即可

GenericServer

Generic 方式是針對可以直接上傳不需要驗(yàn)證的服務(wù)器，無需格外配置信息。

GithubOptions

使用GitHub發(fā)布服務(wù)器的話，也需要一個(gè)TOKEN，這個(gè)TOKEN可以在GitHub上創(chuàng)建，可以參考GitHub Token 創(chuàng)建方法。獲取到這個(gè)Token之后，將它放到環(huán)境變量 GH_TOKEN 中既可。

S3Options

如果使用 Amazon S3 作為發(fā)布服務(wù)器的話，還需要額外安裝一個(gè) electron-publisher-s3 模塊（可以通過npm 或者 yarn 來安裝）

同樣的使用 Amazon S3 也需要驗(yàn)證，在 AWS 上獲取你的驗(yàn)證信息，獲取到你在AWS上的 KEY ID 和 ACCESS＿KEY 之后，然后分別放到環(huán)境變量　AWS_ACCESS_KEY_ID 和 AWS_SECRET_ACCESS_KEY 里面。或者你也可以放到 ~/.aws/credentials 里面。

SpacesOptions

如果你使用 DigitalOcean Spaces 作為發(fā)布服務(wù)器的話，獲取到 access key 之后，然后在放到環(huán)境變量 DO_KEY_ID 和 DO_SECRET_KEY 里面即可

署名/打包/發(fā)布一鍵完成

上面的信息都配置好了的話，運(yùn)行以下命令

$ build --publish

即可一鍵完成署名/打包/發(fā)布流程

更多詳細(xì)信息可以參考官網(wǎng) CLI詳細(xì)說明

自動(dòng)更新功能

electron app 的自動(dòng)更新方案，可以大概分為以下兩種：

有更新服務(wù)器 (with update server) 的方案

無更新服務(wù)器（without update server）的方案

electron-updater 就是針對沒有更新服務(wù)器的情況而生的解決方案。（PS：有更新服務(wù)器的解決方案，可以通過electron自帶的autoUpdater來實(shí)現(xiàn)，具體的解決方案會(huì)在文章最后說明，在這里主要講解electron-builder全家桶的使用方法）

在 electron-builder 中，這個(gè)叫做 electron-updater 的模塊與 electron-builder 本體不同，它是一個(gè) runtime-dependency ，也就是放在package.json的dependencies里面的一個(gè)模塊(PS: 而 electron-builder 是放在devDependencies里面的)

electron-updater 功能強(qiáng)大之處在于，它支持多種無服務(wù)器自動(dòng)更新方案。這里的無服務(wù)器并不是指的真的沒有服務(wù)器。具體來說就是在這種方案里沒有計(jì)算服務(wù)器 (eg. EC2)，只有靜態(tài)文件服務(wù)器 (eg. S3)

electron-updater 模塊通過檢測靜態(tài)文件服務(wù)器上面的最新release版本號，將它與本地版本號進(jìn)行對比，從而得知是否需要自動(dòng)更新。

話不多說，我們直接來看代碼

const electron = require("electron");
const updater = require("electron-updater");
const autoUpdater = updater.autoUpdater;

autoUpdater.setFeedURL({
  provider: "generic", // 這里還可以是 github, s3, bintray
  url: "https://gitlab.com/_example_repo_/-/jobs/artifacts/master/raw/dist?job=build"
});

autoUpdater.on("update-available", function (info) {
  console.log("Update available.");
});

僅用兩行就完成了最基本的新版本的檢測機(jī)制，更多詳細(xì)的API可以參考官方文檔

附錄：有更新服務(wù)器的自動(dòng)更新方案

帶有更新服務(wù)器的自動(dòng)更新方案主要由 electron 自帶的 autoUpdater 和外部更新服務(wù)器組成

常用的第三方服務(wù)有

Hazel - 是一個(gè)開源的 update server. 主要利用了 Github 的 release tag 來進(jìn)行新版本的發(fā)布通知。

Nuts – 也是一個(gè)開源的 update server, 也是利用了 Github 的 release tag 來進(jìn)行新版本的發(fā)布通知。不同的是，它可以將新版本緩存到本地硬盤，同時(shí)還支持 private repo。同時(shí) Heroku 里面提供的 update server 就是 Nuts，在 Heroku 里面可以輕松啟動(dòng)一個(gè) Nuts 服務(wù)。

electron-release-server – 提供了一個(gè) dashboard 來監(jiān)控 release

Nucleus - 這是一個(gè)由 Atlassian 公司維護(hù)的 update server, 它可以同時(shí)支持多個(gè) app 和 channel。而且因?yàn)槭峭ㄟ^靜態(tài)文件服務(wù)器實(shí)現(xiàn)的，所以大大減少了計(jì)算消耗。

大家可以根據(jù)自己的需求來選擇搭建自己的更新服務(wù)器，具體做法可以參考各自的 GitHub 。

而在 app 方面，只需要增加以下代碼，就可以實(shí)現(xiàn)最基本的更新檢測

var app = require("app");
var os = require("os");
var autoUpdater = require("auto-updater");

var platform = os.platform() + "_" + os.arch();
var version = app.getVersion();

autoUpdater.setFeedURL("http://download.myapp.com/update/"+platform+"/"+version);

筆者博客