Skip to content

AIダンジョンゲーム

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

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

新しいモノレポを作成することから始めます。任意のディレクトリ内で次のコマンドを実行します:

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

これにより、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を使用してさまざまなサブプロジェクトを作成する準備が整いました。

まず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

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

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

次に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
    • moduleName: story_api
  6. クリック Generate

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

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

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

  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

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

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

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

ファイルツリーに変更が加えられます。

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

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

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

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

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

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

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

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関数をマッピングするデフォルト統合を設定します。

初めてのコードビルドを実行
Terminal window
pnpm nx run-many --target build --all

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

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

Yes, sync the changes and run the tasksを選択してください。TypeScript参照が自動的に追加され、IDEエラーが解消されます。

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

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