[Unity 6] Unity Web（旧 WebGL）から自前 API に通信できるか？EC2 上の Express サーバーで通信検証してみた

対象読者

• Unity で Web アプリを公開したい開発者
• バックエンドも少し触れるフルスタック志向の個人開発者
• LLM やクラウド連携を検討中の技術者

参考記事

• デスクトップ＆モバイルウェブゲーム開発プラットフォーム｜Unity

概要

2024 年に登場した Unity 6 では、Web 向けのビルドターゲットの名称がこれまでの「WebGL」から「Unity Web」へと変更されました。この変更は単なる名称の刷新にとどまらず、WebGPU など次世代ブラウザ技術への対応を見据えた布石として注目されています。

とはいえ、「Unity Web」という新名称が登場したからといって、通信周りの制約が大幅に緩和されたというわけではありません。従来の WebGL ビルドにはいくつかの制限がありました。たとえば：

• UnityWebRequest は非同期通信しか使えない
• CORS（クロスオリジン）制約を回避する設定が必須
• file:// で開いた index.html では通信が行えない

これらは Unity 6 の「Unity Web」でも基本的には変わっておらず、外部サーバーと通信するためには、一定の構成と知識が必要です。

そこで本記事では、Unity Web で構築したクライアントから、Amazon EC2 上に構築した自前の API に対して HTTP 通信が可能かどうかを検証します。

たとえば次のような構成を想定しています：

• Unity 側：HTTP 通信を行うための組み込みクラス UnityWebRequest を使用して、GET メソッドで /hello API を叩く
• EC2 側：Node.js（Express）で CORS 対応済みの API を用意
• ブラウザ上の Unity Web クライアントから通信できるかどうかを検証

Unity を使ってブラウザゲームやクラウド連携アプリを開発したいと考えている方にとって、自前 API との通信がきちんと動作するかどうかは避けて通れない確認項目です。とくに LLM や認証など外部連携を視野に入れた設計では、クライアントとサーバーの連携構成の基本を押さえておくことが不可欠です。

想定シナリオ

この記事は、次のような悩みや検証ニーズを持つ方に特に役立ちます：

• Unity Web でブラウザゲームを作ったけど、外部の API（例：Express）にアクセスしようとして CORS エラーで詰まった
• とりあえず EC2 を借りて API を動かしたいが、Unity 側とつながらない。原因が Unity 側なのか AWS 側なのか分からない
• 将来的に LLM をゲームに組み込む前に、まずはシンプルな API 通信を成功させておきたい
• Unity で Web ビルドまではうまくいったが、実際にブラウザで開いたところ通信エラーが発生して原因がつかめない

キーワード

Unity 6 / Unity Web / WebGL / UnityWebRequest / CORS / API 通信 / ブラウザゲーム

検証環境

今回の検証は以下の環境で行いました。

Unity 側

Unity Web 用のビルドには、Unity Hub で「Web Build Support」モジュールを追加する必要があります。

サーバー側（EC2）

構成図

クライアントから API にリクエストを送り、レスポンスを受け取るまでの構成を、以下の図に示します。

ユーザーのブラウザ上で動作する Unity Web クライアント（index.html + wasm + JavaScript）は、UnityWebRequest を用いて外部の HTTP API にアクセスします。

API サーバーは Amazon EC2 上で動作しており、Node.js（Express）で /hello エンドポイントを提供します。クライアントからの GET リクエストに対して、サーバーは {"message": "Hello from EC2!"} という JSON を返します。

この構成では、以下のポイントが通信成功の鍵となります：

• Unity 側の UnityWebRequest はブラウザ実行環境で動作するため、CORS 制約を受ける
• Express 側で CORS ヘッダーを明示的に許可する必要がある（開発中は全許可でもよい）
• EC2 のセキュリティグループで、HTTP リクエストを受け付けるポート（例: 5000）を開放しておく必要がある

この構成をもとに、次のセクションでは Unity 側から API にアクセスするための実装を紹介します。

サーバーの実装

Amazon EC2 上では、Node.js と Express を用いて /hello エンドポイントを持つ簡易な API サーバーを構築します。

CORS 設定を忘れると、Unity 側からのアクセスはブラウザでブロックされてしまうため、ミドルウェアで明示的に許可します。

パッケージのインストール

mkdir unity-api-server && cd unity-api-server
npm init -y
npm install express cors

サーバーコード（server.js）

const express = require('express');
const cors = require('cors');

const app = express();
const PORT = 5000;

// CORS を全許可（開発用）
app.use(cors());

app.get('/hello', (req, res) => {
  res.json({ message: 'Hello from EC2!' });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://0.0.0.0:${PORT}`);
});

実行方法

node server.js

• http://<EC2のパブリックIP>:5000/hello にアクセスすると、JSON が返ります。
• セキュリティグループでポート 5000 が開放されていることを確認してください。

クライアントサイドの実装

構成例

Assets/
├── Scripts/
│   └── HelloApiClient.cs
└── StreamingAssets/
    └── config.json

スクリプト例（HelloApiClient.cs）

using System.Collections;
using UnityEngine;
using UnityEngine.Networking;
using System.IO;
using TMPro;

[System.Serializable]
public class ConfigData
{
    public string apiUrl;
}

public class HelloApiClient : MonoBehaviour
{
    public TextMeshProUGUI resultText;
    private string _apiUrl;

    private void Start()
    {
        StartCoroutine(LoadConfigAndRequest());
    }

    IEnumerator LoadConfigAndRequest()
    {
        string path = Path.Combine(Application.streamingAssetsPath, "config.json");

        UnityWebRequest configRequest = UnityWebRequest.Get(path);
        yield return configRequest.SendWebRequest();

        if (configRequest.result != UnityWebRequest.Result.Success)
        {
            Debug.LogError("Config load failed: " + configRequest.error);
            yield break;
        }

        string json = configRequest.downloadHandler.text;
        ConfigData config = JsonUtility.FromJson<ConfigData>(json);
        _apiUrl = config.apiUrl;

        yield return GetHelloMessage();
    }

    IEnumerator GetHelloMessage()
    {
        UnityWebRequest request = UnityWebRequest.Get(_apiUrl);
        yield return request.SendWebRequest();

        if (request.result != UnityWebRequest.Result.Success)
        {
            Debug.LogError($"API error: {request.error}");
            if (resultText != null)
                resultText.text = $"Error: {request.error}";
        }
        else
        {
            string response = request.downloadHandler.text;
            Debug.Log($"API response: {response}");
            if (resultText != null)
                resultText.text = response;
        }
    }
}

config.json の中身（例）

{
  "apiUrl": "http://YOUR_EC2_PUBLIC_IP:5000/hello"
}

補足

• resultText は UI の Text - TextMeshPro コンポーネントにバインドしてください（Canvas > Text -TextMeshPro を用意）。
• Start() で自動的に通信が始まります。
• Web ビルド時、StreamingAssets フォルダは自動的に Build/StreamingAssets/ にコピーされます。ローカルサーバー起動時に config.json へのアクセスが可能か確認してください。

動作確認

Unity Editor での動作確認

Play ボタン を押して Console にログが出力されること、 ResultText に結果が反映されることを確認します。

実行結果

Web ビルドとローカルサーバーでの動作確認

Unity Web でビルドしたゲームは、ローカルで確認する際にも 必ず HTTP サーバーを使って実行する必要があります。
直接 index.html を開いても StreamingAssets にアクセスできず、API 通信も制限されてしまいます。

ビルド

1. Unity エディタで
   　File > Build Settings を開く
2. Platform を Web に変更して Switch Platform をクリック
3. Build をクリックし、適当な出力フォルダ（例：WebBuild/）を指定

http-server をグローバルインストール

npm install -g http-server

Unity Web のビルド出力先へ移動

cd path/to/your/WebBuild

サーバーを起動

http-server -p 8080

ブラウザでアクセス

http://localhost:8080/

index.html が自動で読み込まれ、ゲームが実行されます。ブラウザの DevTools（F12）を開き、「Console」や「Network」タブで通信状況を確認します。CORS が正しく設定されていれば、/hello へのリクエストが成功し、JSON が返ってきます。

実行結果

まとめ

今回の検証では、Unity Web ビルドから Amazon EC2 上の Express API に対して HTTP 通信が可能かどうかを実際に確認しました。

• Unity 側では UnityWebRequest を用いた GET 通信を実装
• サーバー側は Node.js（Express）で簡易 API を構築し、CORS 対応
• ブラウザ実行時にも通信が成功し、レスポンスが画面に表示された

今後の展望

• 本検証は GET メソッドによるシンプルな JSON API 通信に限定していましたが、今後は POST / PUT / DELETE などの HTTP メソッドへの対応や、トークンベースの認証処理（例：JWT）も検証対象とする予定です。
• また、今回のサンプルのような仕組みをベースに、将来的には GPT API や外部の LLM サービスを組み込み、Unity Web 上でインタラクティブに応答する AI 駆動のゲームやキャラクター体験へ発展させることも検討しています。

Unity をフロントエンドとする場合でも、Web 技術やクラウドサービスとの連携をしっかり設計することで、
シングルプレイヤーのゲームに留まらない、新しい体験設計が可能になります。