UnityWebGLアプリをNext.jsでホスティングする

# 初めに
Next.jsでUnityWebGLアプリのホスティング方法が見つからなかったので、自分が実装した手順を記録します。
本手順では次のreact-unity-webglを使用しています。

https://react-unity-webgl.dev/

# 手順
## 1.事前準備
* UnityでアップロードしたいプロジェクトをWebGLビルドしておく
生成される`index.html` は利用しないので削除しても問題ない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/25cc2b92-985f-4007-9a76-a3367061dfef.png)

## 2.Next.js環境構築&動作確認
* Node.jsの導入
次のサイトからダウンロード→インストールする

https://nodejs.org/ja/

* Next.jsプロジェクト作成
```
npx create-next-app sample-app --use-npm --typescript
```
* サンプルプロジェクトディレクトリに移動
```
cd sample-app
```

* 開発環境で実行
以下のコマンドでビルド前でも動作を確認することができます
```
npm run dev
```
* ブラウザで開発環境での動作を確認
次の画面が表示されるのでURLを`ctrl + クリック`でブラウザを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/d54af4b4-982b-c9f3-2b8f-9d3670b577f1.png)
この画面が表示されれば環境構築が成功している（キャプチャは日本語翻訳が実行されている状態なので特に何もしていなければ英語で表示されます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/a081aa10-a701-68fe-9aab-e7a346d7443a.png)

# 3.UnityWebGLアプリの読み込み設定
* パッケージインストール
次のコマンドで`react-unity-webgl` をインストールする
```
npm install react-unity-webgl
```

```ts:sample-app\pages\index.tsx
// 先頭に追加
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import UnityApp from '../components/UnityApp'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <UnityApp></UnityApp>
    </div>
  )
}

```


* Unityビルドファイルの格納
`sample-app/public/` にUnityのビルドファイルを格納するための`unity-build/` をプロジェクトを追加し、その中にビルド時に生成されたディレクトリの中身をコピーする。
↓コピー元
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/e22c6ee8-a7e5-0dd2-9d28-24dc061f2b9e.png)
↓コピー先`sample-app/public/unity-build/` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/da442806-f54d-d393-a452-f17e52bd0e84.png)




`react-unity-webgl`のサンプルコードをベースに`UnityApp.js`ファイルを作成し、`sample-app/public/unity-build/`に格納されているファイルパスに修正する。

```diff_javascript:sample-app/compornents/UnityApp.js
import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";
export default function UnityApp() {
  const { unityProvider } = useUnityContext({
-    loaderUrl: "build/myunityapp.loader.js",
-    dataUrl: "build/myunityapp.data",
-    frameworkUrl: "build/myunityapp.framework.js",
-    codeUrl: "build/myunityapp.wasm",
+    loaderUrl: "../unity-build/Build/Build.loader.js",
+    dataUrl: "../unity-build/Build/Build.data.unityweb",
+    frameworkUrl: "../unity-build/Build/Build.framework.js.unityweb",
+    codeUrl: "../unity-build/Build/Build.wasm.unityweb",
+    streamingAssetsUrl: "../unity-build/StreamingAssets",
  });
  return (
    <Unity unityProvider={unityProvider} style={{ width: 800, height: 600 }} />
  );
}
```

:::note info
ここで`style={{ width: 800, height: 600 }}` の部分を`style={{ width: "100vw", height: "100vh" }}` に書き換えるとUnityアプリ部分が全画面表示になります。
:::
# 4.Next.jsプロジェクトのビルド&実行

* ビルド
次のコマンドでNext.jsプロジェクトをビルドする
```
npm run build
```

* 実行
次のコマンドでビルドしたプロジェクトを実行する
```
npm run start
```
開発環境時と同様にURLを`ctrl + クリック` するとブラウザが起動し、アプリの動作を確認することができる

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/55bc75d0-0821-d431-3cc4-845bf504b0c6.png">

# おまけ
多くのユースケースでUnity↔Next.js間で通信が必要になるメッセージ送受信方法についてはこちらを参考にしてみてください。

https://react-unity-webgl.dev/docs/api/send-message

https://react-unity-webgl.dev/docs/api/event-system



以上