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

ゲーム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”

次に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: ウェブサイト

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

ゲーム操作用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

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

これらのファイルの詳細を確認するにはここをクリックしてください。

ゲーム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接続”

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 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 * 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


...（プロンプト内容）...


? 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/を削除可能です。

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