Electron 代码签名并用 GitHub Actions 自动化打包

本文的方式仅限用于 macOS

最近尝试入门了下 Electron 开发，写了一个可以自动匹配弹幕的动漫播放器，期间遇到挺多坑的，写篇文章来记录一下。

代码签名和公证

想要在 macOS 上运行一个桌面端应用，那就必须对它代码进行签名，否则是无法打开，会出现如下错误。

Apple Developer 注册

想要进行代码签名就得花 688 元去注册苹果开发者，这里注册也比较玄学，注册过程中运气不好就容易出现 联系我们以继续流程的弹窗，这我在用 MacBook 注册时候出现过一次，然后换 iPhone 上注册就没有这个问题了。

注册到最后一步，付完费用之后，你会发现还是没办法使用，打开 Developer APP 账户页面里面，会显示一个灰色的现在注册按钮，然后显示将很快收到相关邮件，打开邮箱会发现两封名为你的订阅确认和 Apple 提供的收据的邮件，但这个其实并不是上文 Apple 所提到的相关邮件。这里不用慌张，这其实就是 Apple 正在审核的意思，我是晚上注册的，等隔天早上 9 点之后，就会收到一份 欢迎加入 Apple Developer Program的邮件，这才表明注册成功了。

代码签名

关于具体如何生成和上传证书，网上相关教程有很多，这里就不展开说明了。之后就是把 Developer ID certificates 的私钥 .p12 文件，配置到终端环境变量中，填写 CSC_LINK和 CSC_KEY_PASSWORD 。

这里 Electron 打包我选择使用 electron-builder ，执行 electron-vite build && electron-builder --mac --publish never 的时候，它会自动读取上方配置好的两个环境变量从而就行签名，无需进行额外配置。

下面是我的 electron-builder.yml

appId: com.suemor.Marchen
productName: Marchen
directories:
  buildResources: build
files:
  - '!**/.vscode/*'
  - '!src/*'
  - '!electron.vite.config.{js,ts,mjs,cjs}'
  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:
  - resources/**
win:
  executableName: Marchen
nsis:
  artifactName: ${
   productName}-${
   version}-setup.${
   ext}
  shortcutName: ${
   productName}
  uninstallDisplayName: ${
   productName}
  createDesktopShortcut: always
  allowToChangeInstallationDirectory: true
  oneClick: false
mac:
  entitlementsInherit: build/entitlements.mac.plist
  extendInfo:
    - NSCameraUsageDescription: Application requests access to the device's camera.
    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.