Skip to content
@aws/nx-plugin
Blog

AIダンジョンゲーム

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

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

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

Terminal window
npx create-nx-workspace@~21.0.3 dungeon-adventure --pm=pnpm --preset=@aws/nx-plugin --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を使用してさまざまなサブプロジェクトを作成する準備が整いました。

Game API

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

ファイルツリーに新しいファイルが生成されているはずです。

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

Story API

Section titled “Story 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

ファイルツリーに新しいファイルが生成されているはずです。

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

Game UI: ウェブサイト

Section titled “Game UI: ウェブサイト”

ゲーム操作用のUIを作成します。以下の手順でGameUIという名前のウェブサイトを作成します：

  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

ファイルツリーに新しいファイルが生成されているはずです。

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

Game UI: 認証

Section titled “Game 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

ファイルツリーに変更が反映されます。

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

Game UI: Story API接続

Section titled “Game 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

ファイルツリーに変更が反映されます。

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

Game UI: Game API接続

Section titled “Game 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
  6. クリック Generate

ファイルツリーに変更が反映されます。

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

Game UI: インフラストラクチャ

Section titled “Game 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 * 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);


    // 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   The workspace is out of sync


...（TypeScript設定ファイルの同期メッセージ）
? 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参照を自動更新します。

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

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