React - [Mac] 데스크탑 앱 배포 Code Signing & Notarizing

데스크탑 앱 빌드 시 macOS에서는 코드사인 뿐만 아니라 notarize도 해주어야 한다.
Electron으로 빌드하고 코드 사인 및 Notarization을 하는 경우, Apple ID를 사용하여 Notarization을 자동화하려면 몇 가지 단계를 따라야 한다.

1. 인증서와 애플리케이션 ID 생성

1.1 Xcode 실행 후 계정 환경 설정으로 이동

1.2 Apple 계정 로그인

1.3 팀 선택 후 "인증서 관리" 클릭

1.4 인증서 추가

인증서 시트의 왼쪽 하단 "추가" 버튼(+)을 클릭하고 다음 인증서 추가:
"Apple Development" (개발용 애플 인증서)
"Apple Distribution" (배포용 애플 인증서)

1.5 앱 암호 생성

1) appleid.apple.com에 로그인

2) 로그인 및 보안 섹션에서 '앱 암호' 선택

3) '앱 암호 생성'을 선택하거나 추가 버튼 클릭

4) 앱의 암호 필드에 앱 암호를 입력하거나 붙여넣기

2. 앱 빌드 및 코드 사인

환경변수로 apple_id, apple_id_password, team_id를 전달해주었다.

.env

APPLE_ID_PASSWORD는 apple 계정 비밀번호가 아닌, 위에서 생성한 앱 암호

	APPLE_ID=myAppleId
    APPLE_ID_PASSWORD=myAppleIdPassword
    TEAM_ID=myTeamId

.gitignore

...
.env	#추가
...

package.json

{
	
    ...
    
	"build": {
    
    	...
        
    	"afterSign": "./notarize.js",
      	"mac": {
        	"hardenedRuntime": true,
        	"gatekeeperAssess": false,
        	"category": "your.app.category.type",
        	"entitlements": "./entitlements.mac.plist",
        	"entitlementsInherit": "./entitlements.mac.plist"
      	}
        
    	...
        
    }
    
    ...
    
}

entitlements.mac.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>
    <!-- https://github.com/electron/electron-notarize#prerequisites -->
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
    <!-- https://github.com/electron-userland/electron-builder/issues/3940 -->
    <key>com.apple.security.cs.disable-library-validation</key>
    <true/>
  </dict>
</plist>

3. Notarization 스크립트 작성

notarize.js

require('dotenv').config();
const fs = require('fs')
const path = require('path')
const electron_notarize = require('@electron/notarize');

module.exports = async function (params) {
    if (process.platform !== 'darwin') {
        return
    }
    

	console.log('afterSign hook triggered', params)

    let appId = 'your_app_id'

    let appleId = 'your_apple_id@example.com'
    let applePassword = 'your_apple_id_password'
    let teamId = process.env.TEAM_ID

    let appPath = path.join(
        params.appOutDir,
        `${params.packager.appInfo.productFilename}.app`
    )
    if (!fs.existsSync(appPath)) {
        console.log('skip')
        return
    }

    console.log(
        `Notarizing ${appId} found at ${appPath} with Apple ID ${appleId}`
    )

    try {
        await electron_notarize.notarize({
            appBundleId: appId,
            appPath: appPath,
            appleId: appleId,
            teamId: teamId,
            appleIdPassword: applePassword,
        })
    } catch (error) {
        console.error(error)
    }

    console.log(`Done notarizing ${appId}`)
}

4. 실행

	npm run build:osx

---

참고

https://www.electronjs.org/docs/latest/tutorial/code-signing
https://github.com/electron/notarize
https://kilianvalkhof.com/2019/electron/notarizing-your-electron-application/?ref=funtoimagine.com