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

AI地牢游戏

模块一：Monorepo 初始化

Section titled “模块一：Monorepo 初始化”

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

Terminal window
npx create-nx-workspace@~21.0.3 dungeon-adventure --pm=pnpm --preset=@aws/nx-plugin --ci=skip

这将在 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 开始创建不同的子项目。

游戏 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#cloudscape-website
  5. 填写必需参数
    • name: GameUI
  6. 点击 Generate

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

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

游戏 UI：身份验证

Section titled “游戏 UI：身份验证”

现在通过以下步骤配置 Game UI 以通过 Amazon Cognito 要求身份验证访问：

  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

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

Section titled “游戏 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
  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 提供了默认集成。默认情况下，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 引用！

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

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