UnityをWebGLビルドするとき、Build And Runを実行するとブラウザで確認することができますがBuildを実行した場合は自分でホストしなければ確認することができません。
やっかいなことに圧縮設定を行っている場合、正しくレスポンスを行わなければ正常に動作しません。
そこで、簡単にWebGLビルドをホストできるコマンドを作ったので紹介します。
使い方
仕様にはNodeJSが必要なので事前にダウンロードしておいてください。
# インストール
$ npm install -g @yaegaki/unity-http-server
# カレントディレクトリをホストする
$ unity-http-server
# パス、ポート、アドレスを指定してホストする
$ unity-http-server ./webgl-build-path -p 8080 -a 0.0.0.0
npxを使用してインストールせずに実行することも可能です。
$ npx -y @yaegaki/unity-http-server -p 8080 -a 0.0.0.0
面白い機能として Google Cloud Storageにアップロードしているファイル をホストすることもできます。
WebGLビルドを gs://hogehoge-bucket/game にアップロードした場合、以下のコマンドを実行することで http://localhost:8080 でアクセスできるようになります。
$ unity-http-server gs://hogehoge-bucket/game
解説
UnityのWebGLビルドで圧縮を行っている場合、正しくレスポンスのヘッダを設定しなければ以下のようなエラーになります。
これについてはUnity Manualに記載があります。
以下のように拡張子に応じて適切に Content-Encoding と Content-Type を設定する必要があります。
| Compression method | File extension | Response header |
|---|---|---|
| gzip | .gz | Content-Encoding: gzip |
| Brotli | .br | Content-Encoding:br |
| File extension | Response header |
|---|---|
| .wasm, .wasm.gz, .wasm.br | Content-Type: application/wasm |
| .js, .js.gz, .js.br | Content-Type: application/javascript |
unity-http-serverではファイルの拡張子を見てこの辺のヘッダを設定するようにしています。
まとめ
UnityのWebGLビルドをホストする方法はいろいろあると思いますが、unity-http-serverはできるだけシンプルで特にオプションを指定することなく使用できるようにしています。
WebGLビルドをするときに地味に面倒だった部分がこのコマンドを使うことで便利になると思います。