Salta ai contenuti
@aws/nx-plugin
Blog

Guida di Avvio Rapido

Questa guida ti accompagna attraverso le basi dell’installazione e dell’utilizzo di @aws/nx-plugin per costruire rapidamente progetti su AWS.

Prerequisiti

Le seguenti dipendenze globali sono necessarie prima di procedere:

  • Git
  • Node >= 22 (Consigliamo di utilizzare strumenti come NVM per gestire le versioni di Node)
    • verifica eseguendo node --version
  • PNPM >= 10 (puoi usare anche Yarn >= 4, Bun >= 1 o NPM >= 10 se preferisci)
    • verifica eseguendo pnpm --version, yarn --version, bun --version o npm --version
  • UV >= 0.5.29
    1. installa Python 3.12 eseguendo: uv python install 3.12.0
    2. verifica con uv python list --only-installed
  • Credenziali AWS configurate per il tuo account AWS di destinazione (dove verrà distribuita la tua applicazione)
  • Se utilizzi VSCode, consigliamo di installare il Nx Console VSCode Plugin.

Passaggio 1: Inizializzare una nuova workspace Nx

Esegui il seguente comando per creare una workspace Nx con il package manager preferito:

Terminal window
npx create-nx-workspace@~20.6.3 my-project --pm=pnpm --preset=ts --ci=skip --formatter=prettier

Al termine, accedi alla directory del progetto:

Terminal window
cd my-project

Passaggio 2: Aggiungere il plugin Nx per AWS

Installa il plugin con:

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

Passaggio 3: Utilizzare i generatori per impostare il progetto

In questa guida rapida aggiungeremo un’API tRPC, un sito React, l’autenticazione Cognito e un’infrastruttura CDK. A seconda del tipo di progetto, puoi scegliere qualsiasi combinazione di generatori per configurare rapidamente il tuo progetto. Consulta le Guide nella barra di navigazione a sinistra per vedere l’elenco completo delle opzioni.

Aggiungi un’API tRPC

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#trpc-api
  5. Compila i parametri richiesti
    • apiName: demo-api
  6. Clicca su Generate

Questo creerà l’API all’interno della cartella packages/demo-api.

Aggiungi un sito React

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#cloudscape-website
  5. Compila i parametri richiesti
    • name: demo-website
  6. Clicca su Generate

Questo impalcaggio crea un nuovo sito React in packages/demo-website.

Aggiungi l’autenticazione Cognito

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#cloudscape-website#auth
  5. Compila i parametri richiesti
    • project: @my-project/demo-website
    • cognitoDomain: my-demo
  6. Clicca su Generate

Questo configura l’infrastruttura necessaria e il codice React per aggiungere l’autenticazione Cognito al tuo sito.

Collega il frontend al backend

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - api-connection
  5. Compila i parametri richiesti
    • sourceProject: @my-project/demo-website
    • targetProject: @my-project/demo-api-backend
  6. Clicca su Generate

Questo configura i provider necessari per garantire che il tuo sito possa chiamare la tua API tRPC.

Aggiungi un’infrastruttura CDK

  1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
  2. Apri la console Nx in VSCode
  3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
  4. Cerca @aws/nx-plugin - ts#infra
  5. Compila i parametri richiesti
    • name: infra
  6. Clicca su Generate

Questo configura un’app CDK che puoi utilizzare per distribuire la tua infrastruttura su AWS.

Passaggio 4: Definisci le risorse cloud e distribuisci su AWS

Apri packages/infra/src/stacks/application-stack.ts e aggiungi il seguente codice:

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

Questo è tutto il codice CDK necessario per distribuire la nostra applicazione full-stack.

Compila e distribuisci l’infrastruttura

Successivamente, esegui questo comando per compilare il progetto:

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

Passaggio 5: Esegui il frontend localmente

  1. Recupera il file runtime-config.json:

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

  2. Avvia il server locale del sito

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

Il tuo sito sarà disponibile all’indirizzo http://localhost:4200.

Congratulazioni! 🎉 Hai distribuito con successo un’applicazione full-stack utilizzando @aws/nx-plugin!