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

AI地牢游戏

模块 1: 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

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

现在创建我们的故事 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：认证

现在通过以下步骤配置我们的游戏 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

现在配置我们的游戏 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

现在配置我们的游戏 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：基础设施

现在需要创建的最后一个子项目是 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);


    // 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 函数。

构建代码

现在是我们首次构建代码的时候了
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/ 文件夹即可，无需担心生成的文件散落在文件树中。

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