跳转到内容
@aws/nx-plugin
Blog

设置 monorepo

任务 1：创建 monorepo

Section titled “任务 1：创建 monorepo”

要创建新的 monorepo，在目标目录中运行以下命令：

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

这将在 dungeon-adventure 目录中设置 NX monorepo。在 VSCode 中打开该目录时，您将看到此文件结构：

  • 文件夹.nx/
    • …
  • 文件夹.vscode/
    • …
  • 文件夹node_modules/
    • …
  • 文件夹packages/ 此处存放所有子项目
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json 配置 Nx CLI 和 monorepo 默认值
  • 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 开始创建不同的子项目。

任务 2：创建游戏 API

Section titled “任务 2：创建游戏 API”

首先创建游戏 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

您将看到文件树中出现了新文件。

点击此处查看文件详情。

任务 3：创建故事代理

Section titled “任务 3：创建故事代理”

现在创建故事代理。

故事代理：Python 项目

Section titled “故事代理：Python 项目”

要创建 Python 项目：

  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - py#project
  5. 填写必需参数
    • name: story
  6. 点击 Generate

您将看到文件树中出现了新文件。

点击此处查看文件详情。

故事代理：Strands 代理

Section titled “故事代理：Strands 代理”

使用 py#strands-agent 生成器为项目添加 Strands 代理：

  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - py#strands-agent
  5. 填写必需参数
    • project: story
  6. 点击 Generate

您将看到文件树中出现了新文件。

点击此处查看文件详情。

任务 4：设置库存工具

Section titled “任务 4：设置库存工具”

库存：TypeScript 项目

Section titled “库存：TypeScript 项目”

创建 MCP 服务器，为故事代理提供管理玩家库存的工具。

首先创建 TypeScript 项目：

  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - ts#project
  5. 填写必需参数
    • name: inventory
  6. 点击 Generate

这将创建一个空的 TypeScript 项目。

点击此处查看文件详情。

库存：MCP 服务器

Section titled “库存：MCP 服务器”

接下来为 TypeScript 项目添加 MCP 服务器：

  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - ts#mcp-server
  5. 填写必需参数
    • project: inventory
  6. 点击 Generate

这将添加 MCP 服务器。

点击此处查看文件详情。

任务 5：创建用户界面 (UI)

Section titled “任务 5：创建用户界面 (UI)”

在此任务中，我们将创建与游戏交互的 UI。

游戏 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：身份验证”

通过以下步骤配置游戏 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：连接游戏 API

Section titled “游戏 UI：连接游戏 API”

配置游戏 UI 连接之前创建的游戏 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

您将看到文件树中出现了新文件或变更。

点击此处查看文件详情。

任务 6：更新基础设施

Section titled “任务 6：更新基础设施”

更新 packages/infra/src/stacks/application-stack.ts 以实例化部分已生成的构造体：

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


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


    const userIdentity = new UserIdentity(this, 'UserIdentity');


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


    const { userPool, userPoolClient } = userIdentity;


    const mcpServer = new InventoryMcpServer(this, 'InventoryMcpServer');


    // Use Cognito for user authentication with the agent
    const storyAgent = new StoryAgent(this, 'StoryAgent', {
      authorizerConfiguration: {
        customJwtAuthorizer: {
          discoveryUrl: `https://cognito-idp.${Stack.of(userPool).region}.amazonaws.com/${userPool.userPoolId}/.well-known/openid-configuration`,
          allowedAudience: [userPoolClient.userPoolClientId],
        },
      },
      environment: {
        INVENTORY_MCP_ARN: mcpServer.agentCoreRuntime.arn,
      },
    });
    // Add the Story Agent ARN to runtime-config.json so it can be referenced by the website
    RuntimeConfig.ensure(this).config.agentArn =
      storyAgent.agentCoreRuntime.arn;


    new CfnOutput(this, 'StoryAgentArn', {
      value: storyAgent.agentCoreRuntime.arn,
    });
    new CfnOutput(this, 'InventoryMcpArn', {
      value: mcpServer.agentCoreRuntime.arn,
    });


    // Grant the agent permissions to invoke our mcp server
    mcpServer.agentCoreRuntime.grantInvoke(storyAgent.agentCoreRuntime);


    // Grant the authenticated role access to invoke the api
    gameApi.grantInvokeAccess(userIdentity.identityPool.authenticatedRole);


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

任务 7：构建代码

Section titled “任务 7：构建代码”
现在首次构建代码

使用命令行运行：

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

该消息表示 NX 检测到可自动更新的文件。此处指未设置项目引用的 tsconfig.json 文件。

选择 Yes, sync the changes and run the tasks 选项继续。您会注意到所有 IDE 相关导入错误自动解决，因为同步生成器会自动添加缺失的 TypeScript 引用！

所有构建产物现在位于 monorepo 根目录的 dist/ 文件夹中。这是使用 @aws/nx-plugin 生成项目的标准做法，避免生成文件污染文件树。如需清理文件，删除 dist/ 文件夹即可，无需担心生成文件散布在文件树各处。

恭喜！您已创建开始实现 AI 地牢冒险游戏核心所需的所有子项目。🎉🎉🎉