Aller au contenu
@aws/nx-plugin
Blog

Guide de Démarrage Rapide

Ce guide vous présente les bases de l’installation et de l’utilisation de @aws/nx-plugin pour développer rapidement des projets sur AWS.

Prérequis

Les dépendances globales suivantes sont nécessaires avant de continuer :

  • Git
  • Node >= 22 (Nous recommandons d’utiliser un outil comme NVM pour gérer vos versions de Node)
    • vérifier en exécutant node --version
  • PNPM >= 10 (vous pouvez aussi utiliser Yarn >= 4, Bun >= 1 ou NPM >= 10 si vous préférez)
    • vérifier en exécutant pnpm --version, yarn --version, bun --version ou npm --version
  • UV >= 0.5.29
    1. installer Python 3.12 en exécutant : uv python install 3.12.0
    2. vérifier avec uv python list --only-installed
  • Identifiants AWS configurés pour votre compte AWS cible (où votre application sera déployée)
  • Si vous utilisez VSCode, nous recommandons d’installer le Plugin VSCode Nx Console.

Étape 1 : Initialiser un nouvel espace de travail Nx

Exécutez la commande suivante pour créer un espace de travail Nx avec le gestionnaire de paquets de votre choix :

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

Une fois terminé, accédez au répertoire du projet :

Fenêtre de terminal
cd my-project

Étape 2 : Utiliser les générateurs pour structurer votre projet

Dans ce guide rapide, nous ajouterons une API tRPC, un site React, une authentification Cognito et une infrastructure CDK. Selon le type de projet que vous construisez, vous pouvez choisir n’importe quelle combinaison de générateurs pour initialiser rapidement votre projet. Consultez les Guides dans la barre de navigation à gauche pour voir la liste complète des options.

Ajouter une API tRPC

  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: demo-api
    • auth: IAM
  6. Cliquez sur Generate

Cela créera l’API dans le dossier packages/demo-api.

Ajouter un site React

  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: demo-website
  6. Cliquez sur Generate

Cela génère un nouveau site React dans packages/demo-website.

Ajouter 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
    • project: @my-project/demo-website
    • cognitoDomain: my-demo
  6. Cliquez sur Generate

Cela configure l’infrastructure nécessaire et le code React pour ajouter l’authentification Cognito à votre site.

Connecter le frontend au backend

  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: @my-project/demo-website
    • targetProject: @my-project/demo-api-backend
  6. Cliquez sur Generate

Cela configure les fournisseurs nécessaires pour que votre site puisse appeler votre API tRPC.

Ajouter 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

Cela configure une application CDK que vous pouvez utiliser pour déployer votre infrastructure sur AWS.

Étape 3 : Définir les ressources cloud et déployer sur AWS

Ouvrez packages/infra/src/stacks/application-stack.ts et ajoutez le code suivant :

import * as cdk from 'aws-cdk-lib';
import { DemoApi, DemoWebsite, UserIdentity } from ':my-project/common-constructs';
import { Construct } from 'constructs';


export class ApplicationStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);


    const identity = new UserIdentity(this, 'identity');
    const api = new DemoApi(this, 'api', {
      integrations: DemoApi.defaultIntegrations(this).build(),
    });
    api.grantInvokeAccess(identity.identityPool.authenticatedRole);


    new DemoWebsite(this, 'website');
  }
}

C’est tout le code CDK nécessaire pour déployer notre application full-stack.

Construire et déployer l’infrastructure

Exécutez ensuite la commande suivante pour construire votre projet :

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

Étape 4 : Exécuter le frontend localement

  1. Récupérez le fichier runtime-config.json :

    Terminal window
    pnpm nx run @demo/demo-website:load:runtime-config

  2. Démarrez le serveur local du site :

    Terminal window
    pnpm nx run @demo/demo-website:serve

Votre site sera disponible à l’adresse http://localhost:4200.

Félicitations ! 🎉 Vous avez réussi à construire et déployer une application full-stack avec @aws/nx-plugin !