AIダンジョンゲーム
モジュール1: モノレポのセットアップ
Section titled “モジュール1: モノレポのセットアップ”まず新しいモノレポを作成します。任意のディレクトリ内で次のコマンドを実行してください:
npx create-nx-workspace@~21.4.1 dungeon-adventure --pm=pnpm --preset=@aws/nx-plugin --ci=skip
npx create-nx-workspace@~21.4.1 dungeon-adventure --pm=yarn --preset=@aws/nx-plugin --ci=skip
npx create-nx-workspace@~21.4.1 dungeon-adventure --pm=npm --preset=@aws/nx-plugin --ci=skip
npx create-nx-workspace@~21.4.1 dungeon-adventure --pm=bun --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を作成します:
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#trpc-api
- 必須パラメータを入力
- name: GameApi
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive
yarn nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive
npx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive
bunx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-run
yarn nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-run
npx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-run
bunx nx g @aws/nx-plugin:ts#trpc-api --name=GameApi --no-interactive --dry-run
ファイルツリーに新しいファイルが生成されているはずです。
ts#trpc-api で更新されたファイル
ts#trpc-api
ジェネレーターによって生成されたファイルの一覧です。ファイルツリー内の主要なファイルを確認します:
Directorypackages/
Directorycommon/
Directoryconstructs/
Directorysrc/
Directoryapp/ アプリ固有のCDKコンストラクト
Directoryapis/
- game-api.ts tRPC APIを作成するCDKコンストラクト
- index.ts
- …
- index.ts
Directorycore/ 汎用CDKコンストラクト
Directoryapi/
- rest-api.ts API Gateway Rest APIのベースコンストラクト
- trpc-utils.ts trpc API CDKコンストラクト用ユーティリティ
- utils.ts APIコンストラクト用ユーティリティ
- index.ts
- runtime-config.ts
- index.ts
- project.json
- …
Directorytypes/ 共有型定義
Directorysrc/
- index.ts
- runtime-config.ts CDKとウェブサイトで使用されるインターフェース定義
- project.json
- …
Directorygame-api/ tRPC API
Directorysrc/
Directoryclient/ 機械間通信用バニラクライアント
- index.ts
- sigv4.ts
Directorymiddleware/ Powertools計装
- error.ts
- index.ts
- logger.ts
- metrics.ts
- tracer.ts
Directoryschema/ APIの入出力定義
- echo.ts
Directoryprocedures/ APIプロシージャ/ルートの実装
- echo.ts
- index.ts
- init.ts コンテキストとミドルウェアのセットアップ
- local-server.ts ローカルtRPCサーバー実行用
- router.ts すべてのプロシージャを定義するLambdaハンドラーのエントリーポイント
- project.json
- …
- eslint.config.mjs
- vitest.workspace.ts
主要ファイルの解説:
import { awsLambdaRequestHandler, CreateAWSLambdaContextOptions,} from '@trpc/server/adapters/aws-lambda';import { echo } from './procedures/echo.js';import { t } from './init.js';import { APIGatewayProxyEvent } from 'aws-lambda';
export const router = t.router;
export const appRouter = router({ echo,});
export const handler = awsLambdaRequestHandler({ router: appRouter, createContext: ( ctx: CreateAWSLambdaContextOptions<APIGatewayProxyEvent>, ) => ctx, responseMeta: () => ({ headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': '*', }, }),});
export type AppRouter = typeof appRouter;
ルーターはtRPC APIのエントリーポイントを定義し、すべてのAPIメソッドを宣言する場所です。echo
メソッドの実装は./procedures/echo.ts
にあります。
import { publicProcedure } from '../init.js';import { EchoInputSchema, EchoOutputSchema,} from '../schema/echo.js';
export const echo = publicProcedure .input(EchoInputSchema) .output(EchoOutputSchema) .query((opts) => ({ result: opts.input.message }));
echo
メソッドの実装ファイルで、入力/出力データ構造を厳密に型定義しています。
import { z } from 'zod';
export const EchoInputSchema = z.object({ message: z.string(),});
export type IEchoInput = z.TypeOf<typeof EchoInputSchema>;
export const EchoOutputSchema = z.object({ result: z.string(),});
export type IEchoOutput = z.TypeOf<typeof EchoOutputSchema>;
すべてのtRPCスキーマ定義はZodを使用し、z.TypeOf
構文でTypeScript型としてエクスポートされます。
import { Construct } from 'constructs';import * as url from 'url';import { Code, Runtime, Function, FunctionProps, Tracing,} from 'aws-cdk-lib/aws-lambda';import { AuthorizationType, Cors, LambdaIntegration,} from 'aws-cdk-lib/aws-apigateway';import { Duration, Stack } from 'aws-cdk-lib';import { PolicyDocument, PolicyStatement, Effect, AccountPrincipal, AnyPrincipal,} from 'aws-cdk-lib/aws-iam';import { IntegrationBuilder, RestApiIntegration,} from '../../core/api/utils.js';import { RestApi } from '../../core/api/rest-api.js';import { Procedures, routerToOperations,} from '../../core/api/trpc-utils.js';import { AppRouter, appRouter } from ':dungeon-adventure/game-api';
type Operations = Procedures<AppRouter>;
export interface GameApiProps< TIntegrations extends Record<Operations, RestApiIntegration>,> { integrations: TIntegrations;}
export class GameApi< TIntegrations extends Record<Operations, RestApiIntegration>,> extends RestApi<Operations, TIntegrations> { public static defaultIntegrations = (scope: Construct) => { return IntegrationBuilder.rest({ operations: routerToOperations(appRouter), defaultIntegrationOptions: { runtime: Runtime.NODEJS_LATEST, handler: 'index.handler', code: Code.fromAsset( url.fileURLToPath( new URL( '../../../../../../dist/packages/game-api/bundle', import.meta.url, ), ), ), timeout: Duration.seconds(30), tracing: Tracing.ACTIVE, environment: { AWS_CONNECTION_REUSE_ENABLED: '1', }, } satisfies FunctionProps, buildDefaultIntegration: (op, props: FunctionProps) => { const handler = new Function(scope, `GameApi${op}Handler`, props); return { handler, integration: new LambdaIntegration(handler) }; }, }); };
constructor( scope: Construct, id: string, props: GameApiProps<TIntegrations>, ) { super(scope, id, { apiName: 'GameApi', defaultMethodOptions: { authorizationType: AuthorizationType.IAM, }, defaultCorsPreflightOptions: { allowOrigins: Cors.ALL_ORIGINS, allowMethods: Cors.ALL_METHODS, }, policy: new PolicyDocument({ statements: [ new PolicyStatement({ effect: Effect.ALLOW, principals: [new AccountPrincipal(Stack.of(scope).account)], actions: ['execute-api:Invoke'], resources: ['execute-api:/*'], }), new PolicyStatement({ effect: Effect.ALLOW, principals: [new AnyPrincipal()], actions: ['execute-api:Invoke'], resources: ['execute-api:/*/OPTIONS/*'], }), ], }), operations: routerToOperations(appRouter), ...props, }); }}
GameApiを定義するCDKコンストラクトです。defaultIntegrations
メソッドにより、tRPC APIの各プロシージャに対応するLambda関数が自動生成されます。バンドリングはバックエンドプロジェクトのビルドターゲットの一部として事前に行われます。
ストーリーAPI
Section titled “ストーリーAPI”次にFast APIのStoryApi
を作成します:
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - py#fast-api
- 必須パラメータを入力
- name: StoryApi
- moduleName: story_api
- クリック
Generate
pnpm nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive
yarn nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive
npx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive
bunx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-run
yarn nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-run
npx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-run
bunx nx g @aws/nx-plugin:py#fast-api --name=StoryApi --moduleName=story_api --no-interactive --dry-run
ファイルツリーに新しいファイルが生成されます。
py#fast-api で更新されたファイル
py#fast-api
ジェネレーターによって生成された主要ファイル:
Directory.venv/ モノレポ用仮想環境
- …
Directorypackages/
Directorycommon/
Directoryconstructs/
Directorysrc/
Directoryapp/
Directoryapis/
- story-api.ts Fast API用CDKコンストラクト
- project.json story_apiへのビルド依存関係追加
Directorytypes/
Directorysrc/
- runtime-config.ts StoryApi追加
Directorystory_api/
Directorystory_api/ Pythonモジュール
- init.py Powertools、FastAPI、ミドルウェアのセットアップ
- main.py すべてのルートを含むLambdaエントリーポイント
Directorytests/
- …
- .python-version
- project.json
- pyproject.toml
- .python-version
- pyproject.toml
- uv.lock
...(原文のまま)
StoryApiを定義するCDKコンストラクトです。defaultIntegrations
メソッドにより、FastAPIの各操作に対応するLambda関数が自動生成されます。
from .init import app, lambda_handler, tracer
handler = lambda_handler
@app.get("/")@tracer.capture_methoddef read_root(): return {"Hello": "World"}
すべてのAPIメソッドを定義する場所です。Pydanticを使用して型安全性を確保できます。
ゲームUI: ウェブサイト
Section titled “ゲームUI: ウェブサイト”ゲーム操作用UIを作成します:
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#react-website
- 必須パラメータを入力
- name: GameUI
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive
yarn nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive
npx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive
bunx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-run
yarn nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-run
npx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-run
bunx nx g @aws/nx-plugin:ts#react-website --name=GameUI --no-interactive --dry-run
ファイルツリーに新しいファイルが生成されます。
ts#react-website で更新されたファイル
ts#react-website
ジェネレーターによって生成された主要ファイル:
Directorypackages/
Directorycommon/
Directoryconstructs/
Directorysrc/
Directoryapp/
Directorystatic-websites/
- game-ui.ts ゲームUI用CDKコンストラクト
Directorycore/
- static-website.ts 汎用静的ウェブサイトコンストラクト
Directorygame-ui/
Directorypublic/
- …
Directorysrc/
Directorycomponents/
DirectoryAppLayout/ ページレイアウト
- index.ts
- navitems.ts
Directoryhooks/
- useAppLayout.tsx
Directoryroutes/ ファイルベースルーティング
- index.tsx
- __root.tsx
Directorywelcome/
- index.tsx
- config.ts
- main.tsx Reactエントリーポイント
- routeTree.gen.ts
- styles.css
- index.html
- project.json
- vite.config.ts
...(原文のまま)
ViteベースUIのバンドルパスが設定されたCDKコンストラクトです。
...(原文のまま)
Reactのマウントエントリーポイント。ファイルベースルーティングを採用しています。
...(原文のまま)
/welcome
ルート用コンポーネント。後述のチュートリアルで使用します。
ゲームUI: 認証
Section titled “ゲームUI: 認証”Amazon Cognitoによる認証を設定します:
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#react-website#auth
- 必須パラメータを入力
- cognitoDomain: game-ui
- project: @dungeon-adventure/game-ui
- allowSignup: true
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive
yarn nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive
npx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive
bunx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-run
yarn nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-run
npx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-run
bunx nx g @aws/nx-plugin:ts#react-website#auth --cognitoDomain=game-ui --project=@dungeon-adventure/game-ui --allowSignup=true --no-interactive --dry-run
ファイルツリーが更新されます。
ts#react-website#auth で更新されたファイル
ts#react-website#auth
ジェネレーターによる変更点:
Directorypackages/
Directorycommon/
Directoryconstructs/
Directorysrc/
Directorycore/
- user-identity.ts ユーザー/IDプール用CDKコンストラクト
Directorytypes/
Directorysrc/
- runtime-config.ts Cognito設定追加
Directorygame-ui/
Directorysrc/
Directorycomponents/
DirectoryAppLayout/
- index.tsx ヘッダーに認証情報追加
DirectoryCognitoAuth/
- index.ts Cognito認証管理
DirectoryRuntimeConfig/
- index.tsx ランタイム設定取得
Directoryhooks/
- useRuntimeConfig.tsx
- main.tsx Cognito追加
...(原文のまま)
RuntimeConfigProvider
とCognitoAuth
コンポーネントが追加され、Cognito認証が有効化されます。
ゲームUI: Story API接続
Section titled “ゲームUI: Story API接続”Story APIへの接続を設定します:
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - api-connection
- 必須パラメータを入力
- sourceProject: @dungeon-adventure/game-ui
- targetProject: dungeon_adventure.story_api
- クリック
Generate
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive
yarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive
npx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive
bunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-run
yarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-run
npx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-run
bunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=dungeon_adventure.story_api --no-interactive --dry-run
ファイルツリーが更新されます。
UI -> FastAPI接続 更新ファイル
api-connection
ジェネレーターによる変更点:
Directorypackages/
Directorygame-ui/
Directorysrc/
Directoryhooks/
- useSigV4.tsx リクエスト署名用
- useStoryApiClient.tsx StoryApiクライアント構築
- useStoryApi.tsx TanStack Query統合用
Directorycomponents/
- QueryClientProvider.tsx TanStack Queryプロバイダー
- StoryApiProvider.tsx StoryApiプロバイダー
- main.tsx プロバイダー追加
Directorystory_api/
Directoryscripts/
- generate_open_api.py
- project.json OpenAPI生成設定
...(原文のまま)
StoryApiへの認証済みリクエスト用フック。ビルド時に生成されるクライアントを使用します。
...(原文のまま)
TanStack Query統合用プロバイダーコンポーネント。生成ファイルは手動編集不可。
ゲームUI: Game API接続
Section titled “ゲームUI: Game API接続”Game APIへの接続を設定します:
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - api-connection
- 必須パラメータを入力
- sourceProject: @dungeon-adventure/game-ui
- targetProject: @dungeon-adventure/game-api
- クリック
Generate
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive
yarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive
npx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive
bunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-run
yarn nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-run
npx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-run
bunx nx g @aws/nx-plugin:api-connection --sourceProject=@dungeon-adventure/game-ui --targetProject=@dungeon-adventure/game-api --no-interactive --dry-run
ファイルツリーが更新されます。
UI -> tRPC接続 更新ファイル
api-connection
ジェネレーターによる変更点:
Directorypackages/
Directorygame-ui/
Directorysrc/
Directorycomponents/
- GameApiClientProvider.tsx GameAPIクライアント設定
Directoryhooks/
- useGameApi.tsx GameAPI用フック
- main.tsx tRPCプロバイダー追加
- package.json
...(原文のまま)
tRPCのReact Query統合を使用。バックエンド変更がフロントエンドに即時反映されます。
...(原文のまま)
tRPCプロバイダーが追加され、型安全性が確保されます。
ゲームUI: インフラストラクチャ
Section titled “ゲームUI: インフラストラクチャ”CDKインフラ用サブプロジェクトを作成します:
- インストール Nx Console VSCode Plugin まだインストールしていない場合
- VSCodeでNxコンソールを開く
- クリック
Generate (UI)
"Common Nx Commands"セクションで - 検索
@aws/nx-plugin - ts#infra
- 必須パラメータを入力
- name: infra
- クリック
Generate
pnpm nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive
yarn nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive
npx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive
bunx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive
変更されるファイルを確認するためにドライランを実行することもできます
pnpm nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-run
yarn nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-run
npx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-run
bunx nx g @aws/nx-plugin:ts#infra --name=infra --no-interactive --dry-run
ファイルツリーが更新されます。
ts#infra 更新ファイル
ts#infra
ジェネレーターによる変更点:
Directorypackages/
Directorycommon/
Directoryconstructs/
Directorysrc/
Directorycore/
Directorycfn-guard-rules/
- *.guard
- cfn-guard.ts
- index.ts
Directoryinfra
Directorysrc/
Directorystages/
- application-stage.ts CDKスタック定義
Directorystacks/
- application-stack.ts CDKリソース定義
- index.ts
- main.ts エントリーポイント
- cdk.json
- project.json
- tsconfig.json
- tsconfig.base.json
...(原文のまま)
CDKアプリケーションのエントリーポイント。cfn-guardによるインフラ検証が設定されます。
...(原文のまま)
ゲームのCDKリソースを構築する場所。
インフラストラクチャの更新
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 “コードのビルド”Nxコマンド
単一 vs 複数ターゲット
Section titled “単一 vs 複数ターゲット”run-many
コマンドは複数サブプロジェクトのターゲットを実行します。依存関係を正しい順序で処理します。
単一プロジェクトのビルドは次のように実行:
pnpm nx run @dungeon-adventure/infra:build
yarn nx run @dungeon-adventure/infra:build
npx nx run @dungeon-adventure/infra:build
bunx nx run @dungeon-adventure/infra:build
依存関係の可視化
Section titled “依存関係の可視化”次のコマンドで依存関係グラフを表示:
pnpm nx graph
yarn nx graph
npx nx graph
bunx nx graph

Nxはキャッシュを利用してビルドを高速化します。キャッシュを無効化するには--skip-nx-cache
を追加:
pnpm nx run @dungeon-adventure/infra:build --skip-nx-cache
yarn nx run @dungeon-adventure/infra:build --skip-nx-cache
npx nx run @dungeon-adventure/infra:build --skip-nx-cache
bunx nx run @dungeon-adventure/infra:build --skip-nx-cache
キャッシュクリア:
pnpm nx reset
yarn nx reset
npx nx reset
bunx nx reset
pnpm nx run-many --target build --all
yarn nx run-many --target build --all
npx nx run-many --target build --all
bunx nx run-many --target build --all
次のプロンプトが表示されます:
NX ワークスペースが同期されていません
[@nx/js:typescript-sync]: 一部のTypeScript設定ファイルにプロジェクト参照が不足しています
? 同期してタスクを実行しますか? …はい、同期してタスクを実行いいえ、同期せずに実行
**「はい、同期してタスクを実行」**を選択します。IDEのインポートエラーが解消されます。
ビルド成果物はモノレポルートのdist/
フォルダに生成されます。クリーン時はdist/
を削除できます。
おめでとうございます!ダンジョンアドベンチャーゲームのコア実装に必要なすべてのサブプロジェクトを作成しました。🎉🎉🎉