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

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 avec node --version
  • PNPM >= 10 (vous pouvez également utiliser Yarn >= 4, Bun >= 1 ou NPM >= 10 si vous préférez)
    • vérifiez avec 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 recommandons d’installer le Nx Console VSCode Plugin.

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

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

Fenêtre de terminal
cd my-project

Étape 2 : Ajouter le plugin Nx pour AWS

Installez le plugin avec :

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

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

Nous allons ajouter une API tRPC, un site React, une authentification Cognito et une infrastructure CDK dans ce guide rapide. 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
    • apiName: demo-api
  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

Ceci 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

Ceci 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

Ceci 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

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

Étape 4 : 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');
    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

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

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

Étape 5 : 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 déployé avec succès une application full-stack en utilisant @aws/nx-plugin !