Skip to content
@aws/nx-plugin
Blog

AIダンジョンゲーム

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

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

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

Terminal window
npx create-nx-workspace@~21.4.1 dungeon-adventure --pm=pnpm --preset=@aws/nx-plugin --iacProvider=CDK --ci=skip

これにより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.config.mts Nx Plugin for AWSの設定

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

ゲームAPI

Section titled “ゲーム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#trpc-api
  5. 必須パラメータを入力
    • name: GameApi
  6. クリック Generate

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

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

ストーリーAPI

Section titled “ストーリーAPI”

次にStory APIを作成します。以下の手順でStoryApiというFast APIを作成します：

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

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

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

ゲーム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#react-website
  5. 必須パラメータを入力
    • name: GameUI
  6. クリック Generate

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

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

ゲームUI: 認証

Section titled “ゲームUI: 認証”

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

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

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

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

ゲームUI: Story API接続

Section titled “ゲームUI: Story API接続”

Game UIを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接続

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

Game UIを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
  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

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

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

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

Section titled “インフラストラクチャの更新”

packages/infra/src/stacks/application-stack.tsを更新し、生成済みコンストラクトを初期化します：

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


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


    // The code that defines your stack goes here
    const userIdentity = new UserIdentity(this, 'UserIdentity');


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


    // grant our authenticated role access to invoke our APIs
    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    // Ensure this is instantiated last so our runtime-config.json can be automatically configured
    new GameUI(this, 'GameUI');
  }
}

各API操作に個別のLambda関数をマッピングするデフォルトインテグレーションを設定しています。

コードのビルド

Section titled “コードのビルド”
初めてのコードビルド
Terminal window
pnpm nx run-many --target build --all

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

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


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


CIでエラーが発生します。


? 変更を同期してワークスペースを最新状態にしますか？ …
はい、変更を同期してタスクを実行
いいえ、同期せずにタスクを実行

「はい」を選択するとTypeScript参照が自動追加され、IDEエラーが解消されます。

ビルド成果物はモノレポルートのdist/フォルダに生成されます。クリーンアップ時はdist/を削除します。

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