Aller au contenu
@aws/nx-plugin
Blog

Jeu de Donjon IA

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@~20.6.3 dungeon-adventure --pm=pnpm --preset=ts --ci=skip --formatter=prettier

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 utilisation de pnpm
  • README.md
  • tsconfig.base.json étendu par tous les sous-projets Node
  • tsconfig.json

Pour intégrer des composants du @aws/nx-plugin dans le monorepo, nous devons l’installer comme dépendance de développement en exécutant cette commande depuis la racine du monorepo dungeon-adventure :

Terminal window
pnpm add -Dw @aws/nx-plugin

Nous sommes maintenant prêts à créer nos différents sous-projets avec le @aws/nx-plugin.

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
    • apiName: GameApi
  6. Cliquez sur Generate

De nouveaux fichiers devraient apparaître dans l’arborescence.

Cliquez ici pour examiner ces fichiers en détail.

API de narration

Créons maintenant notre API de narration 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
  6. Cliquez sur Generate

De nouveaux fichiers devraient apparaître.

Cliquez ici pour examiner ces fichiers en détail.

Interface de jeu : Site web

Créons l’interface utilisateur avec Cloudscape :

  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

De nouveaux fichiers apparaissent.

Cliquez ici pour examiner ces fichiers en détail.

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
Cliquez ici pour examiner ces fichiers en détail.

Interface de jeu : Connexion à l’API de narration

Connectons l’UI à l’API Story :

  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
Cliquez ici pour examiner ces fichiers en détail.

Interface de jeu : Connexion à l’API de jeu

Connectons l’UI à l’API Game :

  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-backend
  6. Cliquez sur Generate
Cliquez ici pour examiner ces fichiers en détail.

Infrastructure de jeu

Créons le projet 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
Cliquez ici pour examiner ces fichiers en détail.

Mise à jour de l’infrastructure

Modifions application-stack.ts pour instancier nos constructions :

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);


    // Code de la stack ici
    const userIdentity = new UserIdentity(this, 'UserIdentity');


    const gameApi = new GameApi(this, 'GameApi');
    const storyApi = new StoryApi(this, 'StoryApi');


    [storyApi, gameApi].forEach((api) =>
      api.grantInvokeAccess(userIdentity.identityPool.authenticatedRole),
    );


    new GameUI(this, 'GameUI');
  }
}

Construction du code

Construisons maintenant notre code
Terminal window
pnpm nx run-many --target build --all

Vous devriez voir :

Fenêtre de terminal
 NX   The workspace is out of sync


[@nx/js:typescript-sync]: Certains fichiers de configuration TypeScript manquent des références de projet.


? Souhaitez-vous synchroniser les modifications pour mettre à jour l'espace de travail ? …
Oui, synchroniser et exécuter les tâches
Non, exécuter sans synchroniser

Sélectionnez Oui pour résoudre les erreurs d’import.

Les artefacts sont dans dist/. Supprimez ce dossier pour nettoyer.

Félicitations ! Vous avez créé tous les sous-projets nécessaires pour développer Dungeon Adventure. 🎉🎉🎉