하고 싶었던 일

최근 개인적으로 Electron에서 작은 앱을 만들 기회가 있었지만, 공개할 때 빌드 -> Release의 흐름을 자동화하고 싶었다. 당초 TravisCI 를 사용하고 있었지만, 이 기회에 GitHub Actions 를 사용해 보았으므로 그 때의 메모.

덧붙여서 이번 상정하고 있는 흐름은,

새 Tag Push (e.g., v0.0.2)

Tag Push를 트리거하는 GitHub Actions의 build job 시작

성공하면 태그 이름의 Release (draft)를 만들고 빌드된 아티팩트(e.g., .exe .dmg ) 파일을 만든 Release Assets으로 업로드합니다.

Release (수동으로 draft -> public release 로 갱신한다)

마음대로 public release까지 공개하고 싶지 않았기 때문에, 이번 골은 draft 상태의 Release까지입니다.

이미지

electron-builder

Electron 앱을 빌드하려면,

electron-forge

electron-builder

electron-packager

라고 하는 툴이 있습니다만, 아마 electron-builder 가 1번 사용되고 있다고 생각합니다. 이번에는 electron-builder을 사용합니다.

electron-builder 본체의 GitHub 통합

이번에는 GitHub Actions에서 빌드한 패키지를 Release에 연결한다는 것을 하기 때문에 이 기능은 사용하지 않지만, electron-builder 자체가 가지고 있는 GitHub 통합을 사용하는 것도 마찬가지로 Release 작성 -> 빌드된 패키지를 연결할 수 있습니다 ( -p 옵션). 원래 TravisCI는이 기능을 사용했습니다.
.travis.yml 의 설정 예도 공개되고 있습니다.
htps //w w. 네 ct 론. 뵈 ld / 무 l 치 p t t r m 뵈 ld # mp ぇ - t 등ぃ ん x - an d ぃ んど ws

빌드 옵션

실제로 빌드할 때는 아래와 같은 명령을 사용합니다.

# macOS 用にビルド
$ electron-builder --mac
# Windows 用にビルド
$ electron-builder --win --x64

* 사용중인 네이티브 모듈이 빌드 대상 OS 용 prebuilt 바이너리를 제공하지 않는 경우 실제로 OS에서만 빌드 할 수 있습니다. (i.e., Windows 용 패키지는 Windows에서만 빌드 할 수 있습니다)

이 때, 여러가지 옵션을 지정할 수 있어 통상은 package.json 안에 build 옵션을 기재해 갑니다.
htps : // 기주 b. 코 m / e ct ron-use r e d / e ct ron-bui l
package.json 안에 쓰지 않고 개별적으로 YAML 파일로 저장하고 -c 로 지정할 수도 있습니다.

GitHub Actions 설정

워크플로우의 YAML은 다음과 같습니다.

name: CI

on:
  push:
    tags:
    # "v" で始まる Tag 名の push だけをトリガーの対象にします (e.g., "v0.0.2")
    - 'v*'

jobs:
  # macOS 用の job 定義
  build_on_mac:
    runs-on: macos-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 12.x
      uses: actions/setup-node@v1
      with:
        node-version: 12.x
    - name: npm install
      run: npm install
    # ここでアプリをビルド
    - name: build application
      run: npm run build:mac
    # Release の作成とビルドしたパッケージのアップロード
    - name: create release
      uses: softprops/action-gh-release@v1
      if: startsWith(github.ref, 'refs/tags/')
      with:
        # 作成される Release は draft に留めておきたい
        draft: true
        # アップロード対象となるファイル名
        files: |
          dist/*.dmg
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

  # Windows 用の job 定義
  build_on_win:
    runs-on: windows-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 12.x
      uses: actions/setup-node@v1
      with:
        node-version: 12.x
    - name: npm install
      run: npm install
    - name: build application
      run: npm run build:win
    - name: create release
      uses: softprops/action-gh-release@v1
      if: startsWith(github.ref, 'refs/tags/')
      with:
        draft: true
        files: |
          dist/*.exe
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

이번에는 앱에 서명하지 않고 어디까지나 올레올레 앱으로 공개했기 때문에 내용은 매우 간단합니다. 사용하고 있는 패키지도 적고, 모두 prebuilt 바이너리가 제공되고 있었으므로, 실제로는 Windows 환경은 사용하지 않아도 빌드할 수 있었습니다만, 시험에 깨끗하게 나누어 보았습니다.

TravisCI에서 전환하는 것이 좋았습니다.

체감에서는 빌드 시간이 빨라졌다 (개인적인 감각).

Token 을 일일이 발행해 env 로 설정, 같은 번거로움이 없어졌다.

뭔가 좋은