Unityで作ったゲームをWebGLビルドしてAzure Static Web Appsで公開する

Unityで作ったゲームを気軽に遊べるようにしたいと考えていたところ、Azureに静的Webサイトを簡単に無料でデプロイできるサービス(Static Web Apps)があったので使ってみました。

ちなみにサンプルのゲームにはUnity勉強でお世話になっている本「Unity2021 3D/2Dゲーム開発実践入門」のCHAPTER-3で作成するゲーム「Illumiball」を利用しています。

必要なもの

この記事の内容を試すためには以下の準備が必要です。

  • Unity HubでWebGL Build Supportモジュールをインストールしておく
  • Azureアカウント
  • GitHubアカウント

記事の構成

本記事は以下の2部構成で書いています。

  1. UnityでWebGLビルドする
  2. Azure Static Web Appsで公開する

1. UnityでWebGLビルドする

まずはUnityでの操作です。

圧縮を無効化する

デフォルトの設定では生成されるJavaScriptファイルが圧縮されているのですが、恐らくStatic Web Appsが対応していないことによりゲームが動作しないので、圧縮を無効化します。

  • [Edit] -> [Project Settings…] とクリックし、プロジェクト設定ダイアログを開く
  • [Player]メニューを選択し、WebGLのアイコンのタブを開く
  • [Publishing Settings] の [Compression Format] を [Disabled] にする

ビルドする

ビルドしてWebコンテンツを生成します。

  • [File] -> [Build Settings…] とクリックし、ビルド設定ダイアログを開く
  • [Platform] で [WebGL] を選択し、 [Switch Platform] をクリックする
  • プラットフォームの切り替えが完了したら、 [Build] をクリックする
  • フォルダ選択のダイアログが開くので、Webコンテンツを生成してほしいフォルダを指定して [フォルダーの選択] をクリックする

2. Azure Static Web Appsで公開する

先ほど生成したWebコンテンツを公開します。

GitHubにWebコンテンツをアップロードする

Static Web Apps は基本的にGitHubとの連携を前提としているのでまずはWebコンテンツをGitHubにアップロードします。

Static Web Appsを作成する

いよいよ最後の作業です。

  • Azureポータルから [Static Web Apps] を選択し、 [Create] をクリックする
  • 以下の画像を参考に情報を入力する。特筆する点は以下の通り
    • 個人の開発なら [Plan type] はFreeを選べる
    • [Azure Functions and staging details] は地理的に近そうな [East Asia] を選ぶ
    • [Deployment details] は [GitHub] にして、 [Sign in with GitHub] からGitHubアカウントを認証する
    • その後、先ほど作成したGitHubリポジトリを指定する
    • [Build Presets] は [Custom] にする
  • [Review + create] をクリックし、リソースを作成する
  • 少し待つとGitHub Actionsのワークフローが動き出し、WebコンテンツがSite Web Appsにデプロイされる

確認

Static Web Appsのリソースページから [Browse] をクリックし、ゲーム画面が表示されれば成功です。