1 つの App UI で複数の Extend アプリをターゲットにする

Last updated on July 15, 2026

注釈：本資料はAI技術を用いて翻訳されています。

Overview​

備考

Generate code from Extend app specs では、単一サービスのワークフロー（react テンプレート、1 つの swaggers.json エントリ、1 つの生成クライアント、リクエストを正しい Extend アプリにルーティングするために実行時に設定する VITE_AB_EXTEND_APP_NAME）について説明しています。このページはその内容を前提としています。先にそちらを読んでください。

1 つの App UI から複数の Extend サービスを操作する必要がある場合は、react-multiple-extend-apps テンプレートを使用します。これは、Generate code from Extend app specs で説明されているコード生成ワークフローを拡張し、複数の Swagger 仕様をサポートします。各 Extend アプリは個別のサブディレクトリに生成されたクライアントを持ち、各生成クライアントには正しいサービスパスがすでに組み込まれているため、単一の VITE_AB_EXTEND_APP_NAME 環境変数は不要です。

Prerequisites​

Extend App UI のすべての前提条件がここにも適用されます。

備考

Public Cloud では、すべての管理者ロールが Extend > My Extend Apps > App UI に移動し、Open UI をクリックしてデプロイ済みの App UI を起動できます。ただし、App UI が カスタム権限を必要とする Extend アプリのエンドポイントを呼び出す場合、現時点で必要な権限を持つのは Studio Admin ロールのアカウントのみです。Game Admin または View Only ロールのみのアカウントは 403 を受け取ります。今後のリリースでこれらのロールのサポートが追加される予定です。詳細については、Public Cloud のデフォルトロールを参照してください。

Private Cloud では、ユーザーに紐づいたロールに自由に権限を追加できます。ロールへの権限の追加を参照してください。

さらに、デプロイ済みの Extend Service Extension または Event Handler アプリが 2 つ以上必要です。各アプリの Service URL を控えておいてください。これは Admin Portal の各 Extend アプリの詳細ページで確認できます。

このページの例では、Extend Tournament System の 2 つのインスタンスを使用しているため、テンプレート全体で tournamentapi と secondtournamentapi という名前が登場します。実際に進める際は、これらを自分のサービスの詳細に置き換えてください。

Quick start​

マルチターゲットのコード生成があらかじめ設定された react-multiple-extend-apps テンプレートをスキャフォールド（雛形生成）します。

extend-helper-cli clone-template --scenario "Extend App UI" --template react-multiple-extend-apps -d react-multiple-extend-apps
cd react-multiple-extend-apps

このテンプレートは、react テンプレートを拡張し、2 つのエントリを持つ swaggers.json、複数サービスの出力に合わせて調整された abcodegen.config.ts、および単一の UI から 2 つのトーナメントサービスを管理するリファレンス実装を備えています。

Prerequisites の値を使用して環境変数を設定します。Extend Helper CLI はこれらの値を読み取るため、一度エクスポートしておけば、以降のすべてのコマンドがそのまま機能します。

export AB_BASE_URL='<YourAGSBaseURL>'
export AB_CLIENT_ID='<YourClientID>'
export AB_CLIENT_SECRET='<YourClientSecret>'
export AB_NAMESPACE='<YourGameNamespace>'
export AB_APPUI_NAME='<YourAppUIName>'

同じターミナルセッションで、App UI を登録し、.env.local を生成して、依存関係をインストールします。

extend-helper-cli appui create --namespace $AB_NAMESPACE --name $AB_APPUI_NAME
extend-helper-cli appui setup-env --namespace $AB_NAMESPACE --name $AB_APPUI_NAME
npm install

setup-env コマンドは、認証用の変数と、シェル環境からあらかじめ入力された VITE_AB_NAMESPACE を含む .env.local を生成します。マルチアプリテンプレートでは VITE_SINGLE_EXTEND_APP_ONLY は設定されません。各生成クライアントには Swagger 仕様から取得した独自のサービスパスがすでに含まれているため、単一の VITE_AB_EXTEND_APP_NAME 環境変数は不要です。

swaggers.json 内の各プレースホルダー URL を、対応するサービスの Swagger URL に置き換えます。各エントリは [serviceName, aliasName, swaggerFileOutput, swaggerURL] にマッピングされます。

[
  ["tournamentapi", "tournamentapi", "tournament.json", "https://<YourFirstServiceURL>/apidocs/api.json"],
  ["secondtournamentapi", "secondtournamentapi", "secondtournament.json", "https://<YourSecondServiceURL>/apidocs/api.json"]
]
  • serviceName: 生成されたファイルの出力先として src/codegen/ 配下で使用されるサブディレクトリ名です。
  • aliasName: serviceName と一致させる必要があります。この設定では shouldProduceIndexFiles が無効になっているため使用されません。
  • swaggerFileOutput: ダウンロードした仕様を swaggers/ 配下にローカルキャッシュするために使用されるファイル名です。
  • swaggerURL: 取得する Swagger v2 の URL です。Extend アプリの場合、これはサービス URL 配下の /apidocs/api.json です。

次に、コード生成を実行します。

npm run codegen

これにより、型付きの TypeScript ファイルが src/codegen/tournamentapi/ と src/codegen/secondtournamentapi/ に生成されます。react-multiple-extend-apps テンプレートは、生成されたファイルをモジュールごとのサブディレクトリに分けて src/codegen/ 配下に出力するため、複数の生成クライアントを互いに分離した状態に保てます。

生成されたクライアントの準備が整いました。ホットリロード対応のローカル開発サーバーを起動するには、次を実行します。

npm run dev

ターミナルに表示された URL（通常は http://localhost:5173）を開きます。リファレンス実装には、それぞれ異なる Extend アプリインスタンスからデータを取得する First tournament service と Second tournament service へのリンクを含むナビゲーションバーが含まれています。AccelByte のインフラストラクチャにデプロイするには、App UI をアップロードします。

extend-helper-cli appui upload --namespace $AB_NAMESPACE --name $AB_APPUI_NAME

アップロードが完了したら、Admin Portal に移動し、Extend > My Extend Apps > App UI に移動します。アプリのテーブル行にある Open UI をクリックします。ゲームの namespace にアクセスできるユーザーは誰でもその App UI を確認できます。

AccelByte Gaming Services (AGS) Admin Portal に表示された react-multiple-extend-apps テンプレートの App UI

Codegen configuration​

multiple-extend-apps テンプレートの abcodegen.config.ts には、以下のデフォルト設定が含まれています。

{
  // Skips generating index files. These are useful for npm libraries,
  // but unnecessary when the generated code is used locally.
  shouldProduceIndexFiles: false,

  // Splits generated output into a subdirectory per service name.
  // This is required when generating clients for multiple Extend apps
  // so that each service's types and query functions stay isolated.
  splitOutputByServiceName: true,

  // Overrides specific types that don't resolve cleanly in TypeScript.
  overrideAsAny: {
    ProtobufAny: true
  }
}

単一アプリのテンプレートと異なる点が 2 つあります。まず、splitOutputByServiceName: true が必要です。これがないと、異なるサービスから生成されたファイルが同じ出力ディレクトリで競合してしまいます。次に、ここでは basePath は '' に設定されていません。単一アプリのテンプレートでは、basePath: '' によって生成されたクライアントからサービスパスが取り除かれ、実行時に VITE_AB_EXTEND_APP_NAME によって再度注入される仕組みになっています。複数のアプリをターゲットとする場合、各クライアントはダウンロードした仕様から得られる独自の basePath を保持するため、各クライアントはすでに自身のサービスに紐づいています。実行時に環境変数は不要です。

Next steps​

  • @accelbyte/sdk-extend-app-ui によってエクスポートされるコンポーネントと関数の完全なリファレンスについては、Extend App UI SDK API reference を参照してください。
  • App UI に関する一般的な問題を診断し解決するには、Troubleshoot Extend App UI を参照してください。
に最終更新
On this page