Electron+Vue3 MAC 版日历开发记录(33)——打包问题

Mac APP 打包的问题汇总和整理。通过简单的配置，提交 Github：

const now = new Date;
const buildVersion = `${now.getFullYear() - 2020}.${now.getMonth() - 6}.${now.getDate()}`;
const id = 'cn.coding01.fanlycalendar';
/**
 * @type {import('electron-builder').Configuration}
 * @see https://www.electron.build/configuration/configuration
 */
const config = {
  appId: id,
  directories: {
    output: 'dist',
    buildResources: 'buildResources',
  },
  files: [
    'packages/**/dist/**',
  ],
  extraMetadata: {
    version: buildVersion,
  },
  mac: {
    target: 'mas',
    extendInfo: {
      CFBundlePackageType: 'APPL',
      CFBundleIdentifier: id,
      CFBundleShortVersionString: buildVersion,
    },
  },
};

module.exports = config;
复制代码

自动打包出 pkg 安装包：

直接提交 Transporter：

额，果然不会很顺利～ 出现问题了。

ICNS 图标问题

第一个问题，关于 icon 的，这个之前使用线上工具制作的，估计缺少 icon，后来找了一个 workflow，特别好用，直接集成到右键菜单栏了：

一键生成，完美，具体代码查看：github.com/molcik/PNG-…

3rd Party Mac Developer Installer 证书问题

第二个问题，我们在线打包是使用的 Developer ID Application: *** (***)，在提交到服务器上的，需要重新使用 3rd Party Mac Developer Installer: *** (***) code sign：

Productsign --sign "3rd Party Mac Developer Installer: *** (***)" "/Users/yemeishu/Downloads/FanlyCalendar-1.0.23.pkg" "/Users/yemeishu/Downloads/FanlyCalendar-1.0.23_sign.pkg"
复制代码

解决以上两个问题后，我们看看提交效果：

app-sandbox 问题

ERROR ITMS-90296: "App sandbox not enabled. The following executables must include the "com.apple.security.app-sandbox" entitlement with a Boolean value of true in the entitlements property list: [( "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Helpers/chrome_crashpad_handler", "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/FanlyCalendar Helper (GPU).app/Contents/MacOS/FanlyCalendar Helper (GPU)", "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/FanlyCalendar Helper (Plugin).app/Contents/MacOS/FanlyCalendar Helper (Plugin)", "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/FanlyCalendar Helper (Renderer).app/Contents/MacOS/FanlyCalendar Helper (Renderer)", "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/FanlyCalendar Helper.app/Contents/MacOS/FanlyCalendar Helper", "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/Squirrel.framework/Versions/A/Resources/ShipIt", "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/MacOS/FanlyCalendar", "cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Resources/app.asar.unpacked/node_modules/esbuild/bin/esbuild" )] Refer to App Sandbox page at https://developer.apple.com/documentation/security/app_sandbox for more information on sandboxing your app."
复制代码

这个主要是没使用 entitlements，配置：

    <key>com.apple.security.app-sandbox</key>
    <true/>
复制代码

所以我们需要引入 entitlements.mas.plist：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.app-sandbox</key>
    <true/>
    <key>com.apple.security.application-groups</key>
    <string>***</string>
    <key>com.apple.security.files.user-selected.read-write</key>
    <true/>
    <key>com.apple.security.network.client</key>
    <true/>
  </dict>
</plist>
复制代码

和 entitlements.mas.inherit.plist：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.app-sandbox</key>
    <true/>
    <key>com.apple.security.inherit</key>
    <true/>
  </dict>
</plist>
复制代码

引入后，出现新的问题：

Dear Developer,

We identified one or more issues with a recent delivery for your app, "FanlyCalendar" 1.0.23 (1.0.23). Please correct the following issues, then upload again.

ITMS-90238: Invalid Signature - The nested app bundle Mantle at path FanlyCalendar.app/Contents/Frameworks/Mantle.framework has following signing error(s): valid on disk /Volumes/data01/app_data/awf/mz_17116261486138838905dir/mz_4007830068208133740dir/cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/Mantle.framework/Versions/A: satisfies its Designated Requirement test-requirement: code failed to satisfy specified code requirement(s) . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.

ITMS-90238: Invalid Signature - The nested app bundle ReactiveObjC at path FanlyCalendar.app/Contents/Frameworks/ReactiveObjC.framework has following signing error(s): valid on disk /Volumes/data01/app_data/awf/mz_17116261486138838905dir/mz_4007830068208133740dir/cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/ReactiveObjC.framework/Versions/A: satisfies its Designated Requirement test-requirement: code failed to satisfy specified code requirement(s) . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.

ITMS-90238: Invalid Signature - The nested app bundle Squirrel at path FanlyCalendar.app/Contents/Frameworks/Squirrel.framework has following signing error(s): valid on disk /Volumes/data01/app_data/awf/mz_17116261486138838905dir/mz_4007830068208133740dir/cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/Squirrel.framework/Versions/A: satisfies its Designated Requirement test-requirement: code failed to satisfy specified code requirement(s) . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.

ITMS-90238: Invalid Signature - The executable at path FanlyCalendar.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Helpers/chrome_crashpad_handler has following signing error(s): valid on disk /Volumes/data01/app_data/awf/mz_17116261486138838905dir/mz_4007830068208133740dir/cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Helpers/chrome_crashpad_handler: satisfies its Designated Requirement test-requirement: code failed to satisfy specified code requirement(s) . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.

ITMS-90238: Invalid Signature - The executable at path FanlyCalendar.app/Contents/Frameworks/Squirrel.framework/Versions/A/Resources/ShipIt has following signing error(s): valid on disk /Volumes/data01/app_data/awf/mz_17116261486138838905dir/mz_4007830068208133740dir/cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Frameworks/Squirrel.framework/Versions/A/Resources/ShipIt: satisfies its Designated Requirement test-requirement: code failed to satisfy specified code requirement(s) . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.

ITMS-90238: Invalid Signature - The executable at path FanlyCalendar.app/Contents/Resources/app/node_modules/esbuild/bin/esbuild has following signing error(s): valid on disk /Volumes/data01/app_data/awf/mz_17116261486138838905dir/mz_4007830068208133740dir/cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Resources/app/node_modules/esbuild/bin/esbuild: satisfies its Designated Requirement test-requirement: code failed to satisfy specified code requirement(s) . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.

ITMS-90238: Invalid Signature - The executable at path FanlyCalendar.app/Contents/Resources/app/node_modules/fsevents/fsevents.node has following signing error(s): valid on disk /Volumes/data01/app_data/awf/mz_17116261486138838905dir/mz_4007830068208133740dir/cn.coding01.fanlycalendar.pkg/Payload/FanlyCalendar.app/Contents/Resources/app/node_modules/fsevents/fsevents.node: satisfies its Designated Requirement test-requirement: code failed to satisfy specified code requirement(s) . Refer to the Code Signing and Application Sandboxing Guide at http://developer.apple.com/library/mac/#documentation/Security/Conceptual/CodeSigningGuide/AboutCS/AboutCS.html and Technical Note 2206 at https://developer.apple.com/library/mac/technotes/tn2206/_index.html for more information.

Best regards,

The App Store Team
复制代码

code sign 问题

类似这样的问题，基本都是 code sign 打包的问题，我们尝试在本地 npm run compile，打包成 .app 格式，然后再使用 codesign 对 app 和引用的所有第三方插件进行 code sign：

#!/bin/bash

# 应用名称
APP="FanlyCalendar"
# 应用路径
APP_PATH="/***/fanlymenu2/dist/Mac/FanlyCalendar.app"
# 生成安装包路径
RESULT_PATH="./$APP.pkg"
# 开发者应用签名证书
APP_KEY="3rd Party Mac Developer Application: *** (***)"
INSTALLER_KEY="3rd Party Mac Developer Installer: *** (***)"
# 授权文件路径
CHILD_PLIST="/***/fanlymenu2/buildResources/entitlements.mas.inherit.plist"
PARENT_PLIST="/***/buildResources/entitlements.mas.plist"

FRAMEWORKS_PATH="$APP_PATH/Contents/Frameworks"

codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Electron Framework"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Helpers/chrome_crashpad_handler"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libEGL.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libffmpeg.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libGLESv2.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libswiftshader_libEGL.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libswiftshader_libGLESv2.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework/Versions/A/Libraries/libvk_swiftshader.dylib"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Electron Framework.framework"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Mantle.framework"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/ReactiveObjC.framework"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Squirrel.framework/Versions/A/Resources/ShipIt"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/Squirrel.framework"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/Contents/MacOS/$APP Helper"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper.app/"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper (Renderer).app/Contents/MacOS/$APP Helper (Renderer)"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper (Renderer).app/"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper (GPU).app/Contents/MacOS/$APP Helper (GPU)"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper (GPU).app/"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper (Plugin).app/Contents/MacOS/$APP Helper (Plugin)"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$FRAMEWORKS_PATH/$APP Helper (Plugin).app/"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$APP_PATH/Contents/Resources/app/node_modules/esbuild/bin/esbuild"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$APP_PATH/Contents/Resources/app/node_modules/fsevents/fsevents.node"
codesign -s "$APP_KEY" -f --entitlements "$CHILD_PLIST" "$APP_PATH/Contents/MacOS/$APP"
codesign -s "$APP_KEY" -f --entitlements "$PARENT_PLIST" "$APP_PATH"

productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RESULT_PATH"
复制代码

过程效果：

然后再利用 Transporter 上传我们打包好的 FanlyCalendar.pkg，同时也可以在服务器后台看到我们得构建版本了。

如果不出问题，我们就可以补充介绍和信息，提交审核了：

Mark 下：

总结

无论审核结果怎么样，至少到目前为止，完成了第一阶段的开发了，接近两个月的自学，再加上晚上工作之余的时间，给自己打 80 分！

未完待续！