Aller au contenu
@aws/nx-plugin
Blog

Jeu de Donjon IA

Module 1 : Configuration du monorepo

Section intitulée « Module 1 : Configuration du monorepo »

Nous allons commencer par créer un nouveau monorepo. Depuis le répertoire de votre choix, exécutez la commande suivante :

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

Cela configurera un monorepo NX dans le répertoire dungeon-adventure que vous pourrez ensuite ouvrir dans vscode. Le résultat devrait ressembler à ceci :

  • Répertoire.nx/
    • …
  • Répertoire.vscode/
    • …
  • Répertoirenode_modules/
    • …
  • Répertoirepackages/ emplacement des sous-projets
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json configure les paramètres par défaut du CLI Nx et du monorepo
  • package.json définit toutes les dépendances Node
  • pnpm-lock.yaml ou bun.lock, yarn.lock, package-lock.json selon le gestionnaire de paquets
  • pnpm-workspace.yaml si vous utilisez pnpm
  • README.md
  • tsconfig.base.json étendu par tous les sous-projets Node
  • tsconfig.json

Maintenant, nous sommes prêts à créer nos différents sous-projets en utilisant le @aws/nx-plugin.

API de jeu

Section intitulée « API de jeu »

Commençons par créer notre API de jeu. Créons une API tRPC nommé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 devriez voir apparaître de nouveaux fichiers dans l’arborescence.

Cliquez ici pour examiner ces fichiers en détail.

API de scénario

Section intitulée « API de scénario »

Créons maintenant notre API de scénario avec FastAPI :

  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#fast-api
  5. Remplissez les paramètres requis
    • name: StoryApi
    • moduleName: story_api
  6. Cliquez sur Generate

De nouveaux fichiers devraient apparaître.

Cliquez ici pour examiner ces fichiers en détail.

Interface de jeu : Site web

Section intitulée « Interface de jeu : Site web »

Créons l’interface utilisateur avec :

  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#cloudscape-website
  5. Remplissez les paramètres requis
    • name: GameUI
  6. Cliquez sur Generate
Cliquez ici pour les détails.

Interface de jeu : Authentification

Section intitulée « Interface de jeu : Authentification »

Ajoutons l’authentification Cognito :

  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#cloudscape-website#auth
  5. Remplissez les paramètres requis
    • cognitoDomain: game-ui
    • project: @dungeon-adventure/game-ui
    • allowSignup: true
  6. Cliquez sur Generate
Détails ici.

Connexion à l’API de scénario

Section intitulée « Connexion à l’API de scénario »

Connectons l’UI à StoryApi :

  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.story_api
  6. Cliquez sur Generate
Voir les modifications.

Connexion à l’API de jeu

Section intitulée « Connexion à l’API de jeu »

Connectons l’UI à GameApi :

  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
Examiner les changements.

Infrastructure du jeu

Section intitulée « Infrastructure du jeu »

Créons 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
Détails de la configuration.

Mise à jour de l’infrastructure

Section intitulée « Mise à jour de l’infrastructure »

Mettons à jour 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');
  }
}

Nous utilisons les intégrations par défaut pour nos APIs, chaque opération étant mappée à une fonction Lambda.

Construction du code

Section intitulée « Construction du code »
Exécution des builds
Terminal window
pnpm nx run-many --target build --all

Vous serez invité à synchroniser les références TypeScript. Sélectionnez Yes pour résoudre les erreurs d’import.

Les artefacts sont générés dans dist/. Félicitations, votre monorepo est prêt ! 🎉🎉🎉