Implementazione di un'app SSR Next.js con Amplify - AWS AmplifyOspitare

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Implementazione di un'app SSR Next.js con Amplify

Per impostazione predefinita, Amplify distribuisce nuove app SSR utilizzando il servizio di elaborazione di Amplify Hosting con supporto per Next.js 12 e 13. Amplify Hosting compute gestisce completamente le risorse necessarie per implementare un'app SSR. Le app SSR nel tuo account Amplify che hai distribuito prima del 17 novembre 2022 utilizzano il provider SSR Classic (solo Next.js 11).

Ti consigliamo vivamente di migrare le app utilizzando l'SSR Classic (solo Next.js 11) al provider SSR di elaborazione Amplify Hosting. Amplify non esegue migrazioni automatiche per te. È necessario migrare manualmente l'app e quindi avviare una nuova build per completare l'aggiornamento. Per istruzioni, consulta Migrazione di un'app SSR Next.js 11 al calcolo Amplify Hosting.

Utilizza le seguenti istruzioni per distribuire una nuova app SSR.

Per distribuire un'app SSR su Amplify utilizzando il provider SSR di calcolo Amplify Hosting
  1. Accedi AWS Management Console e apri la console Amplify.

  2. Nella pagina Tutte le app, scegli Nuova app, quindi Host web app.

  3. Seleziona il tuo GitHub, Bitbucket o il provider di AWS CodeCommit repository GitLab, quindi scegli Continua.

  4. Nella pagina Aggiungi ramo del repository, procedi come segue:

    1. Nell'elenco dei repository aggiornati di recente, seleziona il nome del repository da connettere.

    2. Nell'elenco Branch, seleziona il nome del ramo del repository da connettere.

    3. Seleziona Avanti.

  5. L'app richiede un ruolo di servizio IAM che Amplify assume quando chiama altri servizi per tuo conto. Puoi consentire ad Amplify Hosting compute di creare automaticamente un ruolo di servizio per te oppure puoi specificare un ruolo che hai creato.

    • Per consentire ad Amplify di creare automaticamente un ruolo e associarlo alla tua app

      1. Nella sezione IAM Role, scegli Crea e usa un nuovo ruolo di servizio.

    • Per associare un ruolo di servizio creato in precedenza

      1. Nella sezione Ruolo IAM, scegli Usa un ruolo di servizio esistente.

      2. Scegli il ruolo da usare dall'elenco.

  6. Seleziona Avanti.

  7. Nella pagina Revisione, scegli Salva e distribuisci.

Impostazioni del file Package.json

Quando distribuisci un'app Next.js, Amplify ispeziona lo script di build dell'app nel file per rilevare se package.json l'app è SSR o SSG.

Di seguito è riportato un esempio dello script di compilazione per un'app SSR Next.js. Lo script di compilazione "next build" indica che l'app supporta sia le pagine SSG che SSR.

"scripts": { "dev": "next dev", "build": "next build", "start": "next start" },

Di seguito è riportato un esempio dello script di compilazione per un'app SSG Next.js. Lo script di compilazione "next build && next export" indica che l'app supporta solo pagine SSG.

"scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" },

Impostazioni di costruzione Amplify

Dopo aver esaminato il package.json file dell'app per determinare se si sta implementando un'app SSG o SSR, Amplify verifica le impostazioni di build per l'app. Puoi salvare le impostazioni di build nella console Amplify o in amplify.yml un file nella radice del tuo repository. Per ulteriori informazioni, consulta Configurazione delle impostazioni di compilazione.

Se Amplify rileva che stai distribuendo un'app SSR Next.js e non è presente amplify.yml alcun file, genera una specifica di build per l'app e la imposta su. baseDirectory .next Se stai distribuendo un'app in cui è presente un file, le impostazioni di build nel amplify.yml file sostituiscono tutte le impostazioni di build nella console. Pertanto, è necessario impostare manualmente il baseDirectory to .next nel file.

Di seguito è riportato un esempio delle impostazioni di build per un'app in cui baseDirectory è impostato su.next. Ciò indica che gli artefatti della build riguardano un'app Next.js che supporta pagine SSG e SSR.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/*

Se Amplify rileva che stai distribuendo un'app SSG, genera una specifica di build per l'app e la imposta su. baseDirectory out Se stai distribuendo un'app in cui è presente un amplify.yml file, devi impostarlo manualmente nel file. baseDirectory out

Di seguito è riportato un esempio delle impostazioni di generazione per un'app in cui baseDirectory è impostato out su. Ciò indica che gli artefatti della build sono per un'app Next.js che supporta solo pagine SSG.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out files: - '**/*' cache: paths: - node_modules/**/*