Zenn
Open9

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

Netlify
Unity
GitHub Actions
ぶんぶんぶんぶん

とりあえず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にデプロイしても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"

https://docs.netlify.com/configure-builds/file-based-configuration/

ぶんぶんぶんぶん

今回は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ビルドが動くようになると思います