Skip to content
@aws/nx-plugin
Blog

AIダンジョンゲーム

モジュール1: モノレポのセットアップ

まず新しいモノレポを作成します。任意のディレクトリで以下のコマンドを実行してください：

Terminal window
npx create-nx-workspace@~20.6.3 dungeon-adventure --pm=pnpm --preset=ts --ci=skip --formatter=prettier

これによりdungeon-adventureディレクトリ内にNXモノレポがセットアップされ、vscodeで開けるようになります。ファイル構造は以下のようになります：

  • Directory.nx/
    • …
  • Directory.vscode/
    • …
  • Directorynode_modules/
    • …
  • Directorypackages/ サブプロジェクトが配置される場所
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json Nx CLIとモノレポのデフォルト設定
  • package.json 全Node依存関係の定義
  • pnpm-lock.yaml または bun.lock, yarn.lock, package-lock.json（パッケージマネージャー依存）
  • pnpm-workspace.yaml（pnpm使用時）
  • README.md
  • tsconfig.base.json 全Nodeベースサブプロジェクトが継承する設定
  • tsconfig.json

@aws/nx-pluginのコンポーネントをモノレポに追加するには、まず開発依存関係としてインストールする必要があります。dungeon-adventureモノレポのルートで以下のコマンドを実行してください：

Terminal window
pnpm add -Dw @aws/nx-plugin

これで@aws/nx-pluginを使用してさまざまなサブプロジェクトを作成する準備が整いました。

ゲームAPI

まずGame APIを作成します。以下の手順でtRPC APIのGameApiを作成します：

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#trpc-api
  5. 必須パラメータを入力
    • apiName: GameApi
  6. クリック Generate

ファイルツリーに新しいファイルが生成されます。

詳細を確認するにはこちらをクリック

ストーリーAPI

Fast APIのStoryApiを作成します：

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - py#fast-api
  5. 必須パラメータを入力
    • name: StoryApi
  6. クリック Generate

ファイルツリーに新しいファイルが生成されます。

詳細を確認するにはこちらをクリック

ゲームUI: Webサイト

ゲーム操作用UIを作成します：

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#cloudscape-website
  5. 必須パラメータを入力
    • name: GameUI
  6. クリック Generate

ファイルツリーに新しいファイルが生成されます。

詳細を確認するにはこちらをクリック

ゲームUI: 認証

Amazon Cognitoによる認証を設定します：

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#cloudscape-website#auth
  5. 必須パラメータを入力
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. クリック Generate

ファイルツリーが更新されます。

詳細を確認するにはこちらをクリック

ゲームUI: Story API接続

Story APIへの接続を設定します：

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - api-connection
  5. 必須パラメータを入力
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: dungeon_adventure.story_api
  6. クリック Generate

ファイルツリーが更新されます。

詳細を確認するにはこちらをクリック

ゲームUI: Game API接続

Game APIへの接続を設定します：

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - api-connection
  5. 必須パラメータを入力
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: @dungeon-adventure/game-api-backend
  6. クリック Generate

ファイルツリーが更新されます。

詳細を確認するにはこちらをクリック

ゲームUI: インフラストラクチャ

CDKインフラ用サブプロジェクトを作成します：

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - ts#infra
  5. 必須パラメータを入力
    • name: infra
  6. クリック Generate

ファイルツリーが更新されます。

詳細を確認するにはこちらをクリック

インフラストラクチャの更新

application-stack.tsを以下のように更新します：

import {
  GameApi,
  GameUI,
  StoryApi,
  UserIdentity,
} from ':dungeon-adventure/common-constructs';
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';


export class ApplicationStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);


    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi');
    const storyApi = new StoryApi(this, 'StoryApi');


    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    new GameUI(this, 'GameUI');
  }
}

コードのビルド

初回ビルドの実行
Terminal window
pnpm nx run-many --target build --all

以下のプロンプトが表示されます：

Terminal window
 NX  ワークスペースが同期されていません


[@nx/js:typescript-sync]: TypeScript設定ファイルにプロジェクト参照が不足しています


? 同期してタスクを実行しますか？ …
はい、同期してタスクを実行
いいえ、同期せずに実行

**「はい、同期してタスクを実行」**を選択してください。TypeScript参照が自動設定され、IDEエラーが解消されます。

ビルド成果物はdist/フォルダに生成されます。クリーンアップ時はdist/を削除してください。

おめでとうございます！ダンジョンアドベンチャーゲームのコア実装に必要な全サブプロジェクトの作成が完了しました。🎉🎉🎉