Unity WebGLをAzure SWA ルーティング設定してデプロイする

概要

• UnityのWebGLを静的Webアプリにhttps://SWAのURL/aapp 、https://SWAのURL/bappというように、URLで分けてデプロイしたい場合の覚書
• 例えば、モバイルとXRデバイスとかで分けたり

前提

• Unity Project作成済み
• SWA作成済み
• Github ActionsでSWAへのデプロイ設定済み

ビルド

UnityでWebGLをaappとbappのディレクトリ配下にビルドします

/project-root
  ├── aapp/
  │     ├── index.html
  │     ├── Build/
  │     ├── TemplateData/
  ├── bapp/
  │     ├── index.html
  │     ├── Build/
  │     ├── TemplateData/

staticwebapp.config.jsonの追加

• /project-rootにstaticwebapp.config.jsonを追加する
  https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration#routes

{
  "routes": [
    {
      "route": "/aapp",
      "serve": "/aapp/index.html"
    },
    {
      "route": "/aapp/Build/{file}",
      "serve": "/aapp/Build/{file}"
    },
    {
      "route": "/aapp/TemplateData/{file}",
      "serve": "/aapp/TemplateData/{file}"
    },
    {
      "route": "/bapp",
      "serve": "/bapp/index.html"
    },
    {
      "route": "/bapp/Build/{file}",
      "serve": "/bapp/Build/{file}"
    },
    {
      "route": "/bapp/TemplateData/{file}",
      "serve": "/bapp/TemplateData/{file}"
    }
  ],
  "mimeTypes": {
    ".wasm": "application/wasm",
    ".data": "application/octet-stream",
    ".js": "application/javascript",
    ".css": "text/css",
    ".ico": "image/x-icon"
  }
}

ルートにindex.htmlを追加する

• ルートにindex.htmlがないと、デプロイ中にエラーが出るため、追加しておく

  • 中身は適当で..

• 最終的にこのようになります

  /project-root
    ├── aapp/
    │     ├── index.html
    │     ├── Build/
    │     ├── TemplateData/
    ├── bapp/
    │     ├── index.html
    │     ├── Build/
    │     ├── TemplateData/
    ├── staticwebapp.config.json
    ├── index.html
  

index.html の修正

• Unityでビルドしたindex.htmlを変更し、各環境で正しくリソースを読み込むようにする
  • 各パスにaappを追加。bappも同じことします

    <link rel="shortcut icon" href="aapp/TemplateData/favicon.ico">
    <link rel="stylesheet" href="aapp/TemplateData/style.css">

      var buildUrl = "aapp/Build";
      var loaderUrl = buildUrl + "/aapp.loader.js";
      var config = {
        dataUrl: buildUrl + "/aapp.data.br",
        frameworkUrl: buildUrl + "/aapp.framework.js.br",
        codeUrl: buildUrl + "/aapp.wasm.br",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "TestSwaWebgl",
        productVersion: "0.1.0",
        showBanner: unityShowBanner,

デプロイ

• あとはGithub ActionsでSWAにデプロイ
• 完了後にhttps://SWAのURL/aapp 、https://SWAのURL>/bappにアクセスするとそれぞれのUnityアプリが動作します
  • キャッシュで上手くいかない場合はシークレットウインドウとかで試してください

まとめ

• ルーティング設定はSWAに限らずもっと一般的な機能だと思うので覚えてて損はないかと
• SWA × Github Actionsデプロイ初見だったけど、SWA側でポチポチ設定できたので楽でした
• https://にアクセスした場合はリダイレクトするなり考えんといかんなぁ..