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

AI地牢游戏

模块 1: 单体仓库设置

Section titled “模块 1: 单体仓库设置”

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

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

这将在 dungeon-adventure 目录中设置一个 NX 单体仓库，您可以在 vscode 中打开它。其结构应如下所示：

  • 文件夹.nx/
    • …
  • 文件夹.vscode/
    • …
  • 文件夹node_modules/
    • …
  • 文件夹packages/ 此处将存放您的子项目
    • …
  • .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.config.mts 配置 AWS 的 Nx 插件

现在，我们已准备好使用 @aws/nx-plugin 开始创建不同的子项目。

游戏 API

Section titled “游戏 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

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

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

故事 API

Section titled “故事 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
    • moduleName: story_api
  6. 点击 Generate

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

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

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

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

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

更新基础设施

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 提供了默认集成。默认情况下，API 中的每个操作都映射到处理该操作的独立 Lambda 函数。

构建代码

Section titled “构建代码”
现在是我们首次构建代码的时候了
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 检测到一些可以自动更新的文件。在本例中，它指的是未设置对引用项目的 TypeScript 引用的 tsconfig.json 文件。选择 Yes, sync the changes and run the tasks 选项继续。您应该注意到所有与 IDE 相关的导入错误都会自动解决，因为同步生成器会自动添加缺失的 TypeScript 引用！

所有构建工件现在都位于单体仓库根目录的 dist/ 文件夹中。这是使用 @aws/nx-plugin 生成的项目时的标准做法，因为它不会用生成的文件污染文件树。如果您想清理文件，只需删除 dist/ 文件夹，而无需担心生成的文件散落在文件树中。

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