GameCI・GitHub ActionsでビルドしたUnityのWebGLをNetlifyにデプロイする

ぶんぶん

Unityのバージョンは2021.3.6.f1 Personal

ぶんぶん

GitHub Actionsの設定は基本的には以下のページの通りにしていきますが、いくつかNetlifyにデプロイするにあたって躓いたところがいくつかあったのでメモしていきます

ぶんぶん

とりあえずGitHub Actionsの最終的なymlファイルは以下の通り

name: WebGL Build

on: 
  push:
    branches:
      - main
      
  workflow_dispatch: {}

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      # チェックアウト
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          lfs: true

      # キャッシュ
      - uses: actions/cache@v2
        with:
          path: Library
          key: Library-${{ hashFiles('Assets/**', 'Packages/**', 'ProjectSettings/**') }}
          restore-keys: |
            Library-

      # ビルド
      - name: Build project
        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

      # ビルドのアップロード
      - uses: actions/upload-artifact@v2
        with:
          name: Build
          path: build
          
  # NetlifyへのDeploy
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest

    steps:
     # チェックアウト
     - name: Checkout repository
       uses: actions/checkout@v2
       
     # WebGLビルドをダウンロード
     - name: Download artifact
       uses: actions/download-artifact@v3
       with:
         name: Build
         path: build

     # Netlifyにデプロイ
     - name: Deploy to Netlify
       uses: netlify/actions/cli@master
       env:
         NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
       with:
         args: deploy --prod
      ```

ぶんぶん

Netlify公式のActionsを使用する。Netlifyの認証トークン NETLIFY_AUTH_TOKEN とデプロイ先のサイトID NETLIFY_SITE_ID は予め取得しておいて、Secretsに環境変数として設定しておく

ぶんぶん

このままNetlifyにデプロイしてもUnityが起動に失敗するので、別にHeaderの設定を行う必要がある。プロジェクトのトップディレクトリに netlify.toml を作成し、以下の内容を記述する

[build]
  publish = "build/WebGL/WebGL"
[[headers]]
  for = "/Build/*.data.gz"
  [headers.values]
    Content-Encoding = "gzip"
    Content-Type = "application/octet-stream"

[[headers]]
  for = "/Build/*.wasm.gz"
  [headers.values]
    Content-Encoding = "gzip"
    Content-Type = "application/wasm"

[[headers]]
  for = "/Build/*.js"
  [headers.values]
    Content-Encoding = "js"
    Content-Type = "application/javascript"

[[headers]]
  for = "/Build/*.js.gz"
  [headers.values]
    Content-Encoding = "gzip"
    Content-Type = "application/javascript"

ぶんぶん

今回はWebGLの圧縮設定をgzipにしていますが、Brotliの場合は以下のようにする

[build]
  publish = "build/WebGL/WebGL"
[[headers]]
  for = "/Build/*.data.br"
  [headers.values]
    Content-Encoding = "br"
    Content-Type = "application/octet-stream"

[[headers]]
  for = "/Build/*.wasm.br"
  [headers.values]
    Content-Encoding = "br"
    Content-Type = "application/wasm"

[[headers]]
  for = "/Build/*.js"
  [headers.values]
    Content-Encoding = "js"
    Content-Type = "application/javascript"

[[headers]]
  for = "/Build/*.js.br"
  [headers.values]
    Content-Encoding = "br"
    Content-Type = "application/javascript"

ぶんぶん

netlify.toml では[[headers]]の設定とともに、[[build]]でデプロイするディレクトリを指定していますが、GameCIのデフォルトの設定だと build/WebGL/WebGL にビルドされるので、そこを指定しています

ぶんぶん

とりあえず上記２つのファイルを設定すれば、NetlifyでWebGLビルドが動くようになると思います

ぶんぶん

参考にしたもの