Skip to content
@aws/nx-plugin
Blog

モノレポをセットアップする

タスク1: モノレポを作成する

Section titled “タスク1: モノレポを作成する”

新しいモノレポを作成するには、任意のディレクトリ内で次のコマンドを実行してください:

Terminal window
pnpm create @aws/nx-workspace dungeon-adventure --iac=cdk

これによりdungeon-adventureディレクトリ内にNXモノレポがセットアップされます。VSCodeでディレクトリを開くと、次のファイル構造が表示されます:

  • Directory.nx/
    • …
  • Directory.vscode/
    • …
  • Directorynode_modules/
    • …
  • Directorypackages/ サブプロジェクトが配置される場所
    • …
  • .gitignore
  • biome.json リンティングとフォーマット用のBiome設定
  • 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.config.mts Nx Plugin for AWSの設定

これで@aws/nx-pluginを使用して様々なサブプロジェクトを作成できるようになりました。

タスク2: Game APIを作成する

Section titled “タスク2: Game APIを作成する”

まず、Game APIを作成します。これを行うには、次の手順でGameApiというtRPC APIを作成します:

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

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

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

タスク3: ストーリーエージェントを作成する

Section titled “タスク3: ストーリーエージェントを作成する”

次にストーリーエージェントを作成しましょう。

ストーリーエージェント: Pythonプロジェクト

Section titled “ストーリーエージェント: Pythonプロジェクト”

Pythonプロジェクトを作成するには:

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

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

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

ストーリーエージェント

Section titled “ストーリーエージェント”

py#agentジェネレーターを使用してプロジェクトにStrandsエージェントを追加するには:

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

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

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

タスク4: インベントリツールをセットアップする

Section titled “タスク4: インベントリツールをセットアップする”

Inventory: TypeScriptプロジェクト

Section titled “Inventory: TypeScriptプロジェクト”

ストーリーエージェントがプレイヤーのインベントリを管理するためのツールを提供するMCPサーバーを作成しましょう。

まず、TypeScriptプロジェクトを作成します:

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

これにより、空のTypeScriptプロジェクトが作成されます。

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

Inventory: MCPサーバー

Section titled “Inventory: MCPサーバー”

次に、TypeScriptプロジェクトにMCPサーバーを追加します:

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

これによりMCPサーバーが追加されます。

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

タスク5: ゲームデータベースを作成する

Section titled “タスク5: ゲームデータベースを作成する”

ゲームの状態（保存されたゲームと各プレイヤーのインベントリ）はAmazon DynamoDBに保存されます。ts#dynamodbジェネレーターを使用してDungeonDbというDynamoDBプロジェクトを作成します:

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

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

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

タスク6: ユーザーインターフェース(UI)を作成する

Section titled “タスク6: ユーザーインターフェース(UI)を作成する”

このタスクでは、ゲームとやり取りできるUIを作成します。

ゲームUI: ウェブサイト

Section titled “ゲームUI: ウェブサイト”

UIを作成するには、次の手順でGameUIというウェブサイトを作成します:

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

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

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

ゲームUI: 認証

Section titled “ゲームUI: 認証”

次の手順を使用して、Amazon Cognito経由の認証アクセスを要求するようにゲームUIを設定しましょう:

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

ファイルツリーに新しいファイルが表示/変更されます。

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

ゲームUI: Game APIに接続する

Section titled “ゲームUI: Game APIに接続する”

以前に作成したGame APIに接続するようにゲームUIを設定しましょう。

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

ファイルツリーに新しいファイルが表示/変更されます。

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

ストーリーエージェント: Inventory MCPサーバーに接続する

Section titled “ストーリーエージェント: Inventory MCPサーバーに接続する”

ストーリーエージェントをInventory MCPサーバーに接続して、エージェントがMCPサーバーのツールを検出して呼び出せるようにしましょう。

  1. インストール Nx Console VSCode Plugin まだインストールしていない場合
  2. VSCodeでNxコンソールを開く
  3. クリック Generate (UI) "Common Nx Commands"セクションで
  4. 検索 @aws/nx-plugin - connection
  5. 必須パラメータを入力
    • sourceProject: story
    • targetProject: inventory
  6. クリック Generate
詳細を確認するにはここをクリック

ゲームUI: ストーリーエージェントに接続する

Section titled “ゲームUI: ストーリーエージェントに接続する”

ゲームUIをストーリーエージェントに接続しましょう。エージェントがAG-UIを話すため、connectionジェネレーターはCopilotKitを配線します。テーマ付きチャットコンポーネントと、レンダリング準備が整った@ag-ui/clientのHttpAgentが得られます。

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

Game APIとInventory MCPサーバーをデータベースに接続する

Section titled “Game APIとInventory MCPサーバーをデータベースに接続する”

Game APIとInventory MCPサーバーの両方がDynamoDBテーブルを読み書きするため、DungeonDbプロジェクトに接続しましょう。connectionジェネレーターはターゲットがts#dynamodbプロジェクトであることを検出し、各ソースプロジェクトのdevターゲットがDynamoDB Localを自動的に起動するように配線します。

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

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

Section titled “ゲーム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

ファイルツリーに新しいファイルが表示/変更されます。

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

タスク7: インフラストラクチャーを更新する

Section titled “タスク7: インフラストラクチャーを更新する”

生成されたコンストラクトの一部をインスタンス化するために、packages/infra/src/stacks/application-stack.tsを更新しましょう:

import {
  GameApi,
  GameUI,
  InventoryMcpServer,
  StoryAgent,
  UserIdentity,
} from ':dungeon-adventure/common-constructs';
import { Stack, StackProps, CfnOutput } from 'aws-cdk-lib';
import { Construct } from 'constructs';
export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);


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


    const gameApi = new GameApi(this, 'GameApi', {
      integrations: GameApi.defaultIntegrations(this).build(),
    });


    const mcpServer = new InventoryMcpServer(this, 'InventoryMcpServer');


    // Use Cognito for user authentication with the agent
    const storyAgent = new StoryAgent(this, 'StoryAgent', {
      identity: userIdentity,
    });


    new CfnOutput(this, 'StoryAgentArn', {
      value: storyAgent.agentCoreRuntime.agentRuntimeArn,
    });
    new CfnOutput(this, 'InventoryMcpArn', {
      value: mcpServer.agentCoreRuntime.agentRuntimeArn,
    });


    // Grant the agent permissions to invoke our mcp server
    mcpServer.grantInvokeAccess(storyAgent);


    // Grant the authenticated role access to invoke the api
    gameApi.grantInvokeAccess(userIdentity.identityPool.authenticatedRole);


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

タスク8: コードをビルドする

Section titled “タスク8: コードをビルドする”
初めてコードをビルドする時が来ました

コマンドラインを使用して、次のコマンドを実行して最初にリントの問題を修正します:

Terminal window
pnpm lint

次に、完全なビルドを実行するために次のコマンドを実行します:

Terminal window
pnpm build

次のプロンプトが表示されます:

Terminal window
 NX   The workspace is out of sync


[@nx/js:typescript-sync]: Some TypeScript configuration files are missing project references to the projects they depend on or contain outdated project references.


This will result in an error in CI.


? Would you like to sync the identified changes to get your workspace up to date? …
Yes, sync the changes and run the tasks
No, run the tasks without syncing the changes

このメッセージは、NXが自動的に更新できるファイルを検出したことを示しています。この場合、参照プロジェクトにTypeScript参照が設定されていないtsconfig.jsonファイルを指しています。

Yes, sync the changes and run the tasksオプションを選択して続行します。同期ジェネレーターが不足しているTypeScript参照を自動的に追加するため、IDEに関連するすべてのインポートエラーが自動的に解決されることに気付くはずです!

すべてのビルド成果物は、モノレポのルートにあるdist/フォルダ内で利用できるようになりました。これは、@aws/nx-pluginによって生成されたプロジェクトを使用する場合の標準的な慣行であり、生成されたファイルでファイルツリーが汚染されることはありません。ファイルをクリーンにしたい場合は、ビルド成果物がファイルツリー全体に散らばることを心配せずにdist/フォルダを削除してください。

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