blockの巣

GitHub ActionsでUnityのWebGLビルドしてGitHub PagesにDeployする

2022/04/25 21:30 公開
GameCI GitHub GitHub Actions GitHub Pages Unity WebGL

GameCIを使用してしてUnityのプロジェクトをGitHub ActionsでWebGLビルドしてGitHub PagesにDeployする方法です。

サンプルのリポジトリ
Deploy結果

Unityのバージョンは2020 LTS版(2020.3.4f1)で確認しています。 現在の最新版の2021 LTS版ではない理由は最後に書きます。


Unityのプロジェクトの設定

まずWebGLビルド用の設定を行います。 ほぼデフォルトのままでも良いですがPlayerのPublishing SettingsのDecompression Fallbackを有効にしておきます。
enable_decompression_fallback

GitHubのリポジトリにGitHubのライセンス情報を登録する

GitHubにライセンス情報を登録するには

  1. GitHubで使用するためのアクティベーションファイルをリクエストする
  2. アクティベーションファイルを使用してライセンスを取得する
  3. GitHubのリポジトリのSecretsにライセンスを登録する

という手順が必要です。 この手順は最初の1回だけで大丈夫です。

GitHubで使用するためのアクティベーションファイルをリクエストする

まずはUnityのライセンスをアクティベーションする必要があります。
GameCIのActivationで公開されているとおりに行います。
注意
ここで説明するのはPersonal licenseをアクティベーションする方法です。Professional licenseは方法が異なるのでActivationを確認してください。

.github/workflows/activation.ymlというファイル名で以下の内容を保存しpushします。

name: Acquire activation file
on:
  workflow_dispatch: {}
jobs:
  activation:
    name: Request manual activation file 🔑
    runs-on: ubuntu-latest
    steps:
      # Request manual activation file
      - name: Request manual activation file
        id: getManualLicenseFile
        uses: game-ci/unity-request-activation-file@v2
      # Upload artifact (Unity_v20XX.X.XXXX.alf)
      - name: Expose as artifact
        uses: actions/upload-artifact@v2
        with:
          name: ${{ steps.getManualLicenseFile.outputs.filePath }}
          path: ${{ steps.getManualLicenseFile.outputs.filePath }}

GitHubのリポジトリのActionsからAcquire activation fileというWorkflowが実行可能になっているためRun workflowを選択します。
acquire_activation_file_run_workflow

Workflowが実行されるのでしばらく待ちます。
running_acquire_activation_file_workflow

Workflowが完了した後詳細を確認すると finish_acquire_activation_file_workflow ArtifactsにUnity_v20XX.X.XXXX.alfというファイルがあるのでそちらをクリックしダウンロードします。(XXの部分は使用するUnityのバージョンと異なっていても問題ないようです)
ダウンロードしたファイルは.zip形式なので展開して中のUnity_v20XX.X.XXXX.alfを取得します。 download_activation_arcifacts

アクティベーションファイルを使用してライセンスを取得する

https://license.unity3d.com/manualにアクセスし先程取得したUnity_v20XX.X.XXXX.alfを選択します。
manual_activation

Nextを押すとライセンスを選択する画面に移るので適切な項目を選択します。今回私はPersonal licenseを使用しているので以下の画像のように選択しました。
select_license Nextを押すとライセンスファイルをダウンロードできる画面に移るのでDownloadを押します。
するとUnity_v20XX.X.XXXX.ulfというファイルがダウンロードされます。
(勢い余ってDownloadを押してしまったため黒くなっていますが実際は水色のボタンです)
download_license_file

GitHubのリポジトリのSecretsにライセンスを登録する

GitHubリポジトリのSettings > Secrets > Actionsからライセンス情報を登録します。
New repository secretを押すとSecretを追加する画面に移ります。
new_repository_secret

NameにはUNITY_LINCENSEと入力しValueにはダウンロードしたUnity_v20XX.X.XXXX.ulfファイルの中身を貼り付けます。Add secretをクリックでライセンスの登録が完了します。
new_secrets_unity_lincense 同じ要領でUNITY_EMAILUNITY_PASSWORDを登録します。UNITY_EMAILはUnityのログインに使用するemailアドレスでUNITY_PASSWORDはUnityにログインするためのパスワードです。
全て追加すると以下のようにRepository secretsにUNITY_EMAIL, UNITY_LICENSE, UNITY_PASSWORDが並びます。
secrets

注意
ここで追加するUNITY_PASSWORDに特殊文字が含まれていると問題が発生するということがBuilderの項目に書かれていました。

GitHub ActionsでWebGLビルドしてGitHub PagesにDeployする

.github/workflows/main.ymlというファイル名で以下の内容を保存しpushします。

name: WebGL build and Deploy
on:
  workflow_dispatch: {}
jobs:
  build:
    name: WebGL build
    runs-on: ubuntu-latest
    steps:
      - name: Check out
        uses: actions/checkout@v2

      - name: WebGL build
        uses: game-ci/unity-builder@v2
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
          UNITY_EMAIL: ${{ secrets.UNITY_EMAIL }}
          UNITY_PASSWORD: ${{ secrets.UNITY_PASSWORD }}
        with:
          targetPlatform: WebGL
          unityVersion: 2020.3.4f1 # 使用するUnityのバージョンに書き換えてください

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.1.3
        with:
          branch: gh-pages # gh-pagesブランチにdeployする
          folder: build/WebGL/WebGL # ビルド結果のWebGL/WebGLフォルダの中身をdeployする

      # ビルド結果をダウンロードできるようにする
      # 必要なければ消しても大丈夫です
      - name: Upload the WebGL Build
        uses: actions/upload-artifact@v2
        with:
          name: Build
          path: build

するとWebGL build and Deployというworkflowが選択できるようになっているのでRun workflowで実行します。
webgl_build_and_deploy workflowの実行が完了するとgh-pagesというブランチにビルド結果がpushされます。
この内容をGitHub Pagesで公開する設定を行います。

GitHub Pagesでの公開設定

GitHubリポジトリのSettings > Pagesと進みGitHub Pagesの設定を行います。
公開するプランチとディレクトリを選べるのでhg-pages/(root)を選択しSaveをクリックします。 すると「Your site is ready to be published at http://ユーザー名.github.io/リポジトリ名」というメッセージが表示されます。このメッセージが表示されたらリンク先に先程のビルド結果が公開されているはずです。 publish_gh-pages

メインブランチにpushしたときやpull requestがマージされたときに自動でビルド&Deployする

現在on:の中にworkflow_dispatchしか書かれていませんがそれを下記の内容に書き換えてください。

on:
  push:
    branches: [ main ] # mainはメインブランチの名前に書き換えてください
  pull_request:
    branches: [ main ] # mainはメインブランチの名前に書き換えてください

  workflow_dispatch: {}

これでメインブランチに変更があったときに自動でビルド&Deployされます。

その他

Project SettingsでDecompression Fallbackを無効にしたまま圧縮した場合

以下のように実行時に圧縮されたファイルの展開に失敗します。
Compression FormatDisabledにすることでも解決できますがファイルサイズが大きくなるのでおすすめしません。しかし許容できる方はそちらでも大丈夫です。
enable_decompression_fallback

Unityのバージョンが2020 LTS版の理由

Linux(Ubuntu)で2021 LTS版(2021.3.0f1)のWebGLビルドを行うとビルドに成功はしましたが実行時にThe resource Internal-ErrorShader.shader could not be loaded from the resource file!というエラーが大量に発生し正常に動作しないということあありました。
そのため今回は2020 LTS版でサンプルを作成しています。

ビルド時にキャッシュを利用する

キャッシュを利用することでビルドを高速化できます。
それにはUnityから公開されているactions/cache@v2stepsの中のビルドの手前に以下の内容を追加するだけです。

- uses: actions/cache@v2
  with:
    path: path/to/your/project/Library # プロジェクトのLibraryフォルダへのパスに書き換えてください
    key: Library-MyProjectName-TargetPlatform # MyProjectNameとTargetPlatformはプロジェクト名とターゲットのプラットフォームに書き換えてください
    restore-keys: |
      Library-MyProjectName- # MyProjectNameはプロジェクト名に書き換えてください
      Library-

あとがき

ライセンスの登録など若干面倒な作業がありますが一度設定してしまえばあとはプロジェクトに変更があるたびに自動でビルドされDeployまでされるので快適です。

最終的にメインブランチにpushしたときに自動ビルド&Deployを行いビルド時にキャッシュを有効にしているものをサンプルとしてGitHubで公開しています。 リンクはページの先頭にあります。