Aller au contenu

Configurer un monorepo

Pour créer un nouveau monorepo, depuis le répertoire de votre choix, exécutez la commande suivante :

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

Cela configurera un monorepo NX dans le répertoire dungeon-adventure. Lorsque vous ouvrez le répertoire dans VSCode, vous verrez cette structure de fichiers :

  • Répertoire.nx/
  • Répertoire.vscode/
  • Répertoirenode_modules/
  • Répertoirepackages/ c’est ici que résideront vos sous-projets
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json configure le CLI Nx et les paramètres par défaut du monorepo
  • package.json toutes les dépendances Node sont définies ici
  • pnpm-lock.yaml ou bun.lock, yarn.lock, package-lock.json selon le gestionnaire de paquets
  • pnpm-workspace.yaml si utilisation de pnpm
  • README.md
  • tsconfig.base.json tous les sous-projets Node étendent ce fichier
  • tsconfig.json
  • aws-nx-plugin.config.mts configuration du plugin Nx pour AWS

Nous pouvons maintenant commencer à créer nos différents sous-projets en utilisant le @aws/nx-plugin.

Tout d’abord, créons notre API de jeu. Pour ce faire, créez une API tRPC appelée GameApi en suivant ces étapes :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - ts#trpc-api
  5. Remplissez les paramètres requis
    • name: GameApi
  6. Cliquez sur Generate

Vous verrez de nouveaux fichiers apparaître dans votre arborescence de fichiers.

Cliquez ici pour examiner ces fichiers en détail.

Créons maintenant nos agents de narration.

Pour créer un projet Python :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - py#project
  5. Remplissez les paramètres requis
    • name: story
  6. Cliquez sur Generate

Vous verrez de nouveaux fichiers apparaître dans votre arborescence de fichiers.

Cliquez ici pour examiner ces fichiers en détail.

Pour ajouter un agent Strands au projet avec le générateur py#strands-agent :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - py#strands-agent
  5. Remplissez les paramètres requis
    • project: story
  6. Cliquez sur Generate

Vous verrez de nouveaux fichiers apparaître dans votre arborescence de fichiers.

Cliquez ici pour examiner ces fichiers en détail.

Créons un serveur MCP pour fournir des outils à notre agent Story afin de gérer l’inventaire d’un joueur.

Tout d’abord, nous créons un projet TypeScript :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - ts#project
  5. Remplissez les paramètres requis
    • name: inventory
  6. Cliquez sur Generate

Cela créera un projet TypeScript vide.

Cliquez ici pour examiner ces fichiers en détail.

Ensuite, nous allons ajouter un serveur MCP à notre projet TypeScript :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - ts#mcp-server
  5. Remplissez les paramètres requis
    • project: inventory
  6. Cliquez sur Generate

Cela ajoutera un serveur MCP.

Cliquez ici pour examiner ces fichiers en détail.

Dans cette tâche, nous allons créer l’interface utilisateur qui vous permettra d’interagir avec le jeu.

Pour créer l’interface utilisateur, créez un site web appelé GameUI en suivant ces étapes :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - ts#react-website
  5. Remplissez les paramètres requis
    • name: GameUI
  6. Cliquez sur Generate

Vous verrez de nouveaux fichiers apparaître dans votre arborescence de fichiers.

Cliquez ici pour examiner ces fichiers en détail.

Configurons notre interface utilisateur du jeu pour exiger un accès authentifié via Amazon Cognito en suivant ces étapes :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - ts#react-website#auth
  5. Remplissez les paramètres requis
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. Cliquez sur Generate

Vous verrez de nouveaux fichiers apparaître/changer dans votre arborescence de fichiers.

Cliquez ici pour examiner ces fichiers en détail.

Interface utilisateur du jeu : Connexion à l’API du jeu

Section intitulée « Interface utilisateur du jeu : Connexion à l’API du jeu »

Configurons notre interface utilisateur du jeu pour se connecter à notre API GameApi créée précédemment.

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - api-connection
  5. Remplissez les paramètres requis
    • sourceProject: @dungeon-adventure/game-ui
    • targetProject: @dungeon-adventure/game-api
  6. Cliquez sur Generate

Vous verrez de nouveaux fichiers apparaître/changer dans votre arborescence de fichiers.

Cliquez ici pour examiner ces fichiers en détail.

Créons le sous-projet final pour l’infrastructure CDK.

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - ts#infra
  5. Remplissez les paramètres requis
    • name: infra
  6. Cliquez sur Generate

Vous verrez de nouveaux fichiers apparaître/changer dans votre arborescence de fichiers.

Cliquez ici pour examiner ces fichiers en détail.

Mettons à jour packages/infra/src/stacks/application-stack.ts pour instancier certains de nos constructs générés :

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');
}
}
Il est maintenant temps de construire notre code pour la première fois

En utilisant la ligne de commande, exécutez :

Terminal window
pnpm nx run-many --target build --all

Vous serez invité avec le message suivant :

Fenêtre de terminal
NX The workspace is out of sync
[@nx/js:typescript-sync]: Certains fichiers de configuration TypeScript manquent de références de projet aux projets dont ils dépendent ou contiennent des références de projet obsolètes.
Cela entraînera une erreur en CI.
? Souhaitez-vous synchroniser les changements identifiés pour mettre à jour votre workspace ?
Oui, synchroniser les changements et exécuter les tâches
Non, exécuter les tâches sans synchroniser les changements

Ce message indique que NX a détecté certains fichiers qui peuvent être mis à jour automatiquement pour vous. Dans ce cas, il fait référence aux fichiers tsconfig.json qui n’ont pas de références TypeScript configurées sur les projets référencés.

Sélectionnez l’option Oui, synchroniser les changements et exécuter les tâches pour continuer. Vous devriez remarquer que toutes vos erreurs d’importation liées à l’IDE sont automatiquement résolues car le générateur de synchronisation ajoutera automatiquement les références TypeScript manquantes !

Tous les artefacts construits sont maintenant disponibles dans le dossier dist/ situé à la racine du monorepo. C’est une pratique standard lors de l’utilisation de projets générés par le @aws/nx-plugin car cela ne pollue pas votre arborescence de fichiers avec des fichiers générés. Si vous souhaitez nettoyer vos fichiers, supprimez le dossier dist/ sans vous soucier des fichiers générés dispersés dans l’arborescence de fichiers.

Félicitations ! Vous avez créé tous les sous-projets requis pour commencer à implémenter le cœur de notre jeu d’aventure de donjon IA. 🎉🎉🎉