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. Il devrait ressembler à ceci :

  • Répertoire.nx/
    • …
  • Répertoire.vscode/
    • …
  • Répertoirenode_modules/
    • …
  • Répertoirepackages/ emplacement de vos sous-projets
    • …
  • .gitignore
  • .npmrc
  • .prettierignore
  • .prettierrc
  • nx.json configure les paramètres par défaut du CLI Nx et 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 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 du jeu

Section intitulée « API du jeu »

Commençons par créer notre API de jeu. Pour cela, créons une API tRPC nommée GameApi en suivant les étapes ci-dessous :

  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 de nouveaux fichiers apparaître dans votre arborescence.

Cliquez ici pour examiner ces fichiers en détail.

API des histoires

Section intitulée « API des histoires »

Créons maintenant notre API des histoires. Pour cela, utilisons le générateur 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 utilisateur du jeu : Site web

Section intitulée « Interface utilisateur du jeu : Site web »

Créons maintenant 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#react-website
  5. Remplissez les paramètres requis
    • name: GameUI
  6. Cliquez sur Generate
Cliquez ici pour examiner ces fichiers en détail.

Authentification de l’interface

Section intitulée « Authentification de l’interface »

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#react-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.

Connexion de l’UI à Story API

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

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

Connexion de l’UI à Game API

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

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

Infrastructure du jeu

Section intitulée « Infrastructure du jeu »

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

Mise à jour de l’infrastructure

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

Mettons à jour application-stack.ts pour instancier nos constructs :

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

Construction du code

Section intitulée « Construction du code »
Construisons maintenant notre code
Terminal window
pnpm nx run-many --target build --all
Fenêtre de terminal
? Souhaitez-vous synchroniser les changements pour mettre à jour l'espace de travail ? …
Oui, synchroniser et exécuter les tâches

Sélectionnez Oui pour résoudre les références TypeScript.

Les artefacts construits sont dans dist/. Félicitations ! 🎉🎉🎉