オープンソース Electron アプリケーション GitHub Actions 自動デプロイとアップグレードガイド

1. はじめに

この記事では、GitHub Actions を使用して Electron アプリケーションの自動ビルド、公開、および UpgradeLink を介した自動更新を実現する方法について詳細に説明します。このガイドを通じて、コードの送信からアプリケーションの更新までの完全な自動化プロセスを完了するために GitHub Actions ワークフローを設定する方法を学びます。

2. コアツールの紹介

1. UpgradeLink GitHub Action

UpgradeLink は、Electron アプリケーションで生成された更新ファイルを UpgradeLink サーバーにアップロードするための GitHub Action プラグインを提供しています。UpgradeLink は JSON ファイルからアプリケーションファイルのアドレスを読み取り、ファイルを保存し、自動的にアプリケーションバージョンファイルと対応するアップグレード戦略を作成します。

プロジェクトアドレス

2. 完全なワークフローを備えたサンプルプロジェクト

完全なワークフローを備えたサンプルプロジェクト：

サンプルプロジェクト electron-demo

3. ワークフローの説明

ワークフローは、3つの主要なジョブで構成されています：

electron-build: 異なるプラットフォームとアーキテクチャ用の Electron アプリケーションパッケージのビルドと公開
- クロスプラットフォームビルド: macOS、Linux、Windows を同時にサポート
- バージョン抽出: Electron ビルド出力からアプリケーションバージョン番号を抽出
electron-release: electron-build によってビルドされたパッケージに基づくバージョンのリリース
- リリース管理: GitHub Release を自動的に作成し、アプリケーションインストールパッケージをアップロード
- 出力パラメータ: 後続のジョブのためにアプリケーションバージョン番号を出力
upgradeLink-upload: 更新情報を UpgradeLink に同期
- 依存関係: 上記の2つのジョブの完了を待つ
- バージョン認識: 出力パラメータを通じてアプリケーションバージョン番号を取得
- API 呼び出し: UpgradeLink Action を使用して対応するインストールパッケージをアップグレードサーバーにアップロード

4. 統合手順の詳細説明

1. 準備

まず、以下のことを確認してください：

GitHub リポジトリが作成され、Electron アプリケーションのコードがアップロードされている
UpgradeLink プラットフォームのアカウントを持ち、以下の認証情報を取得している：
- ACCESS_KEY (アクセスキー) キー情報
- ELECTRON_KEY (アプリケーション固有識別子) アプリケーション情報
UpgradeLink プラットフォームの Electron アプリケーション設定で GitHub リポジトリアドレスを設定している。

2. GitHub Secrets の設定

GitHub リポジトリの Settings > Security > Secrets and variables > Actions で、以下の暗号化された環境変数を追加します：

Secret 名	説明
UPGRADE_LINK_ACCESS_KEY	API 呼び出し認証のために UpgradeLink プラットフォームから提供されるアクセスキー
UPGRADE_LINK_ELECTRON_KEY	あなたの Electron アプリケーションに UpgradeLink プラットフォームによって割り当てられた固有識別子

3. electron-demo/.github/workflows/main.yml GitHub Action ファイルを編集し、必要に応じて調整します。

yaml

name: 'publish'

on:
  push:
    branches:
      - main
    tags:
      - '*.*.*'

jobs:
  electron-build:
    outputs:
      appVersion: ${{ steps.extract-version.outputs.appVersion }}
    permissions:
      contents: write
    strategy:
      fail-fast: false
      matrix:
        include:
          # Linux プラットフォーム
          - platform: ubuntu-22.04
            target: x86_64-unknown-linux-gnu
            artifact-name: ubuntu-x86_64
            arch-suffix: x64
            # チャネル情報を含む完全なビルドコマンドを直接定義
            build-command: "yarn electron-builder --linux --x64 --publish always --config.publish.channel=latest-linux"

          - platform: ubuntu-22.04
            target: aarch64-unknown-linux-gnu
            artifact-name: ubuntu-aarch64
            arch-suffix: arm64
            build-command: "yarn electron-builder --linux --arm64 --publish always --config.publish.channel=latest-linux"

          # macOS プラットフォーム
          - platform: macos-latest
            target: aarch64-apple-darwin
            artifact-name: macos-arm64
            arch-suffix: arm64
            build-command: "yarn electron-builder --mac --arm64 --publish always --config.publish.channel=latest-mac"

          - platform: macos-latest
            target: x86_64-apple-darwin
            artifact-name: macos-x64
            arch-suffix: x64
            build-command: "yarn electron-builder --mac --x64 --publish always --config.publish.channel=latest-mac"

          # Windows プラットフォーム
          - platform: windows-latest
            target: x86_64-pc-windows-msvc
            artifact-name: windows-x64
            arch-suffix: x64
            build-command: "yarn electron-builder --win --x64 --publish always --config.publish.channel=latest-win"

    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@v4

      - name: setup node
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'yarn'

      - name: Install dependencies with yarn
        run: yarn install

      - name: List installed dependencies
        run: yarn list

      - name: install dependencies (ubuntu only)
        if: startsWith(matrix.platform, 'ubuntu')
        run: |
          sudo apt-get update
          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf xdg-utils

      - name: install dependencies (macos only)
        if: matrix.platform == 'macos-latest'
        run: |
          brew install automake autoconf libtool

      - name: install frontend dependencies
        run: yarn install

      - name: Install rimraf
        run: yarn add rimraf --dev

      - name: Build Electron App
        # マトリックスで定義された完全なビルドコマンドを直接実行
        run: ${{ matrix.build-command }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Cleanup Artifacts for Linux
        if: startsWith(matrix.platform, 'ubuntu')
        run: |
          mkdir -p dist-temp
          find dist -maxdepth 1 -type f \( -name "*.AppImage" -o -name "*.yml" -o -name "*.zip" \) -exec cp {} dist-temp/ \;
          rm -rf dist
          mv dist-temp dist
          echo "保留的发布文件："
          ls -la dist

      - name: Cleanup Artifacts for macOS
        if: matrix.platform == 'macos-latest'
        run: |
          mkdir -p dist-temp
          find dist -maxdepth 1 -type f \( -name "*.dmg" -o -name "*.pkg" -o -name "*.zip" -o -name "*.yml" \) -exec cp {} dist-temp/ \;
          rm -rf dist
          mv dist-temp dist
          echo "保留的发布文件："
          ls -la dist

      - name: Cleanup Artifacts for Windows
        if: matrix.platform == 'windows-latest'
        run: |
          New-Item -ItemType Directory -Path dist-temp -Force | Out-Null
          Get-ChildItem -Path dist -File | Where-Object {
              $_.Name -like "*.exe" -or $_.Name -like "*.msi" -or $_.Name -like "*.zip" -or $_.Name -like "*.yml"
          } | Copy-Item -Destination dist-temp/
          Remove-Item -Path dist -Recurse -Force
          Rename-Item -Path dist-temp -NewName dist
          Write-Host "保留的发布文件："
          Get-ChildItem -Path dist

      - name: Rename files with architecture suffix (Linux/macOS)
        if: startsWith(matrix.platform, 'ubuntu') || matrix.platform == 'macos-latest'
        run: |
          cd dist

          ARCH_SUFFIX="${{ matrix.arch-suffix }}"

          if [ "$ARCH_SUFFIX" != "x64" ] && [ "$ARCH_SUFFIX" != "arm64" ]; then
            echo "错误: 架构后缀不正确 - $ARCH_SUFFIX"
            exit 1
          fi

          # Process duplicate platform identifiers first
          for file in *.yml; do
            if [ -f "$file" ]; then
              # Fixed replacement -linux-linux to -linux
              if [[ "$file" == *-linux-linux* ]]; then
                new_file="${file//-linux-linux/-linux}"
                mv "$file" "$new_file"
                echo "替换重复标识: $file -> $new_file"
                file="$new_file"
              fi

              # Fixed replacement -mac-mac to -mac
              if [[ "$file" == *-mac-mac* ]]; then
                new_file="${file//-mac-mac/-mac}"
                mv "$file" "$new_file"
                echo "替换重复标识: $file -> $new_file"
                file="$new_file"
              fi
          
              # Fixed replacement x86_64-x64 to -x64
              if [[ "$file" == *-x86_64-x64* ]]; then
                new_file="${file//x86_64-x64/-x64}"
                mv "$file" "$new_file"
                echo "替换重复标识: $file -> $new_file"
                file="$new_file"
              fi

              # Process architecture suffix
              if [[ "$file" != *-"$ARCH_SUFFIX".* ]]; then
                filename="${file%.*}"
                extension="${file#$filename}"
                new_filename="${filename}-${ARCH_SUFFIX}${extension}"
                mv "$file" "$new_filename"
                echo "添加架构后缀: $file -> $new_filename"
              else
                echo "文件已处理完成: $file"
              fi
            fi
          done

          echo "最终文件列表:"
          ls -l

      - name: Rename files with architecture suffix (Windows)
        if: matrix.platform == 'windows-latest'
        run: |
          cd dist
          
          $ARCH_SUFFIX = "${{ matrix.arch-suffix }}"
          if ($ARCH_SUFFIX -ne "x64" -and $ARCH_SUFFIX -ne "arm64") {
            Write-Error "错误: 架构后缀不正确 - $ARCH_SUFFIX"
            exit 1
          }
          
          Get-ChildItem -File | ForEach-Object {
            $file = $_
            if ($file.Name -match "-$ARCH_SUFFIX\.[^.]+$") {
              Write-Host "文件已包含架构后缀: $($file.Name)"
            } else {
              $filename = $file.BaseName
              $extension = $file.Extension
              $new_filename = "$filename-$ARCH_SUFFIX$extension"
              Rename-Item -Path $file.FullName -NewName $new_filename
              Write-Host "重命名: $($file.Name) -> $new_filename"
            }
          }
          
          Write-Host "重命名后的文件:"
          Get-ChildItem -File

      - name: Extract version
        id: extract-version
        run: |
          # Prioritize getting version number from tag
          if [[ "${{ github.ref }}" == refs/tags/* ]]; then
            VERSION=${{ github.ref_name }}
          else
            # If not a tag push, read version number from package.json
            VERSION=$(node -p "require('./package.json').version")
            # Or use a fixed default value
            # VERSION="dev-$(date +%Y%m%d)"
          fi
          echo "appVersion=$VERSION" >> $GITHUB_OUTPUT
          echo "Extracted version: $VERSION"
        shell: bash

      - name: Upload artifacts
        uses: actions/upload-artifact@v4.0.0
        with:
          name: ${{ matrix.artifact-name }}
          path: dist/*
          if-no-files-found: error

  electron-release:
    needs: electron-build
    runs-on: ubuntu-22.04
    permissions:
      contents: write
    steps:
      - name: Download all artifacts
        uses: actions/download-artifact@v4
        with:
          path: artifacts
          merge-multiple: false

      - name: Verify artifact files
        run: |
          echo "下载的文件结构:"
          tree artifacts
          
          if [ -z "$(find artifacts -type f)" ]; then
            echo "错误: 没有找到任何artifact文件"
            exit 1
          fi

      - name: Prepare release files
        run: |
          mkdir -p release-files
          find artifacts -type f -exec cp {} release-files/ \;
          echo "准备发布的文件:"
          ls -l release-files

      - name: Create GitHub Release
        uses: softprops/action-gh-release@v1
        with:
          tag_name: ${{ needs.electron-build.outputs.appVersion }}
          name: Release ${{ needs.electron-build.outputs.appVersion }}
          files: release-files/*
          draft: false
          prerelease: false
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

4. upgradelink-action モジュールを導入する。対応する情報を置き換えます

yaml

  upgradeLink-upload:
     # electron-build と electron-release の両方に依存して、electron-build の出力にアクセスできるようにする
     needs: [ electron-build, electron-release ]
     permissions:
       contents: write
     runs-on: ubuntu-latest
     steps:
       - name: Send a request to UpgradeLink
         uses: toolsetlink/upgradelink-action-electron@v1.0.1
         with:
           source-url: 'https://github.com/toolsetlink/electron-demo/releases/download/${{ needs.electron-build.outputs.appVersion }}'
           access-key: ${{ secrets.UPGRADE_LINK_ACCESS_KEY }}  # ACCESS_KEY キー
           electron-key: ${{ secrets.UPGRADE_LINK_ELECTRON_KEY }}    # ELECTRON_KEY Electron アプリケーション固有識別子
           github-token: ${{ secrets.GITHUB_TOKEN }}
           version: ${{ needs.electron-build.outputs.appVersion }}
           prompt-upgrade-content: 'Upgrade prompt content'

5. 一般的な問題と解決策

1. 署名の問題

macOS 自動更新を機能させるには、アプリケーションに署名する必要があります。参照ドキュメント

2. ビルド失敗のトラブルシューティング

GitHub Actions ログを確認して特定のエラー情報を確認する
特に Linux プラットフォームのシステム依存関係を含め、すべての依存関係が正しくインストールされていることを確認する
Node.js バージョンの互換性を確保する

3. UpgradeLink 統合の問題

UpgradeLink コンソールのアプリケーション識別子が設定と一致しているか確認する
GitHub Releases に正しいインストールパッケージファイルが生成されているか確認する

6. まとめ

上記の設定を通じて、Electron アプリケーションのビルド、公開、更新プロセスの完全な自動化を実現できます。コードが指定されたブランチにプッシュされるたびに、GitHub Actions は自動的に以下の作業を完了します：

コードの変更を検出する
マルチプラットフォーム環境で Electron アプリケーションをビルドする
GitHub Release を作成し、インストールパッケージをアップロードする
アプリケーションバージョン番号を抽出する
更新情報を UpgradeLink プラットフォームに同期する
エンドユーザーは UpgradeLink を通じてアプリケーションの更新通知を受け取る

この自動化されたワークフローにより、開発効率が大幅に向上し、手動操作のエラーが減少し、開発者はアプリケーションの機能開発により集中することができます。

URLアプリケーション

ファイルアプリケーション

設定

Tauriアプリケーション

Electronアプリケーション

Androidアプリケーション

Windowsアプリケーション

Linuxアプリケーション

macOSアプリケーション

アプリケーション情報レポート

URLアプリケーション

ファイルアプリケーション

設定

Tauriアプリケーション

Electronアプリケーション

Androidアプリケーション

Windowsアプリケーション

Linuxアプリケーション

macOSアプリケーション

アプリケーション情報レポート

URLアプリケーション

ファイルアプリケーション

設定

Tauriアプリケーション

Electronアプリケーション

Androidアプリケーション

Windowsアプリケーション

Linuxアプリケーション

macOSアプリケーション

アプリケーション情報レポート

URLアプリケーション

ファイルアプリケーション

設定

Tauriアプリケーション

Electronアプリケーション

Androidアプリケーション

Windowsアプリケーション

Linuxアプリケーション

macOSアプリケーション

アプリケーション情報レポート

URLアプリケーション

ファイルアプリケーション

URLアプリケーション

ファイルアプリケーション

Androidアプリケーション

設定アップグレード

URLアプリケーション

ファイルアプリケーション

Windowsアプリケーション

設定アップグレード

オープンソース Electron アプリケーション GitHub Actions 自動デプロイとアップグレードガイド ​

1. はじめに ​

2. コアツールの紹介 ​

1. UpgradeLink GitHub Action ​

2. 完全なワークフローを備えたサンプルプロジェクト ​

3. ワークフローの説明 ​

4. 統合手順の詳細説明 ​

1. 準備 ​

2. GitHub Secrets の設定 ​

3. electron-demo/.github/workflows/main.yml GitHub Action ファイルを編集し、必要に応じて調整します。 ​

4. upgradelink-action モジュールを導入する。対応する情報を置き換えます ​

5. 一般的な問題と解決策 ​

1. 署名の問題 ​

2. ビルド失敗のトラブルシューティング ​

3. UpgradeLink 統合の問題 ​

6. まとめ ​

オープンソース Electron アプリケーション GitHub Actions 自動デプロイとアップグレードガイド

1. はじめに

2. コアツールの紹介

1. UpgradeLink GitHub Action

2. 完全なワークフローを備えたサンプルプロジェクト

3. ワークフローの説明

4. 統合手順の詳細説明

1. 準備

2. GitHub Secrets の設定

3. electron-demo/.github/workflows/main.yml GitHub Action ファイルを編集し、必要に応じて調整します。

4. upgradelink-action モジュールを導入する。対応する情報を置き換えます

5. 一般的な問題と解決策

1. 署名の問題

2. ビルド失敗のトラブルシューティング

3. UpgradeLink 統合の問題

6. まとめ