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

AI地牢游戏

模块一：Monorepo 配置

我们将从创建一个新的 monorepo 开始。在您选择的目录下运行以下命令：

Terminal window
npx create-nx-workspace@~20.6.3 dungeon-adventure --pm=pnpm --preset=ts --ci=skip --formatter=prettier

这将在 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 的组件添加到 monorepo 中，我们需要将其作为开发依赖项安装。在 dungeon-adventure monorepo 的根目录下运行以下命令：

Terminal window
pnpm add -Dw @aws/nx-plugin

现在我们可以使用 @aws/nx-plugin 开始创建不同的子项目了。

游戏 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. 填写必需参数
    • apiName: GameApi
  6. 点击 Generate

您应该看到文件树中出现了一些新文件。

点击此处查看这些文件的详细信息。

故事 API

现在创建我们的故事 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
  6. 点击 Generate

您应该看到文件树中出现了一些新文件。

点击此处查看这些文件的详细信息。

游戏 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

您应该看到文件树中出现了一些新文件。

点击此处查看这些文件的详细信息。

游戏 UI：身份验证

现在通过 Amazon Cognito 配置我们的 Game UI 要求身份验证访问。按照以下步骤操作：

  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

您应该看到文件树中出现/更改了一些新文件。

点击此处查看这些文件的详细信息。

游戏 UI：连接故事 API

现在配置我们的 Game 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.story_api
  6. 点击 Generate

您应该看到文件树中出现/更改了一些新文件。

点击此处查看这些文件的详细信息。

游戏 UI：连接游戏 API

现在配置我们的 Game 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-backend
  6. 点击 Generate

您应该看到文件树中出现/更改了一些新文件。

点击此处查看这些文件的详细信息。

游戏 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 * 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);


    // 定义堆栈的代码在此处
    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi');
    const storyApi = new StoryApi(this, 'StoryApi');


    // 授予已验证角色调用 API 的权限
    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    // 确保最后实例化，以便自动配置 runtime-config.json
    new GameUI(this, 'GameUI');
  }
}

构建代码

现在是我们首次构建代码的时候了
Terminal window
pnpm nx run-many --target build --all

您应该会看到以下提示：

Terminal window
 NX   工作区不同步


[@nx/js:typescript-sync]: 某些 TypeScript 配置文件缺少对其依赖项目的项目引用，或包含过时的项目引用。


这将在 CI 中导致错误。


? 是否要同步识别到的更改以使工作区保持最新？ …
是，同步更改并运行任务
否，不同步直接运行任务

此消息表示 NX 检测到一些可以自动更新的文件。在本例中，它指的是缺少对相关项目的 Typescript 引用的 tsconfig.json 文件。选择 是，同步更改并运行任务 选项继续。您应该注意到所有 IDE 相关的导入错误自动解决，因为同步生成器会自动添加缺失的 Typescript 引用！

所有构建产物现在可在 monorepo 根目录的 dist/ 文件夹中找到。这是使用 @aws/nx-plugin 生成的项目时的标准做法，因为它不会用生成的文件污染您的文件树。如果您想清理文件，只需删除 dist/ 文件夹，无需担心生成的文件散落各处。

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