Unityで作ったゲームを気軽に遊べるようにしたいと考えていたところ、Azureに静的Webサイトを簡単に無料でデプロイできるサービス（Static Web Apps）があったので使ってみました。
ちなみにサンプルのゲームにはUnity勉強でお世話になっている本「Unity2021 3D/2Dゲーム開発実践入門」のCHAPTER-3で作成するゲーム「Illumiball」を利用しています。
必要なもの
この記事の内容を試すためには以下の準備が必要です。
- Unity HubでWebGL Build Supportモジュールをインストールしておく
- Azureアカウント
- GitHubアカウント
記事の構成
本記事は以下の2部構成で書いています。
- UnityでWebGLビルドする
- 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にアップロードします。
- GitHubのリポジトリ作成ページでリポジトリを作成する
- 先ほどビルドしたフォルダーの中身すべてcommitしてGitHubにpushする
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] をクリックし、ゲーム画面が表示されれば成功です。
