Aller au contenu
@aws/nx-plugin
Blog

Guide de Démarrage Rapide

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

Prérequis

Section intitulée « 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érifiez en exécutant node --version
  • PNPM >= 10 (vous pouvez aussi utiliser Yarn >= 4, Bun >= 1 ou NPM >= 10 si vous préférez)
    • vérifiez en exécutant pnpm --version, yarn --version, bun --version ou npm --version
  • UV >= 0.5.29
    1. installez Python 3.12 en exécutant : uv python install 3.12.0
    2. vérifiez 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 vous recommandons d’installer le Plugin Nx Console pour VSCode.

Étape 1 : Initialiser un nouvel espace de travail Nx

Section intitulée « É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

Section intitulée « É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

Section intitulée « 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

Section intitulée « 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

Section intitulée « 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

Section intitulée « 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
  6. Cliquez sur Generate

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

Ajouter une infrastructure CDK

Section intitulée « Ajouter une 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

Section intitulée « É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

Section intitulée « Construire et déployer l’infrastructure »

Ensuite, exécutez la commande suivante pour construire votre projet :

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

Étape 4 : Exécuter le frontend localement

Section intitulée « É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 !