Risoluzione dei problemi relativi alle applicazioni renderizzate lato server

Se riscontri problemi imprevisti durante la distribuzione di un'SSRapp con Amplify Hosting Compute, consulta i seguenti argomenti per la risoluzione dei problemi. Se non trovi una soluzione al tuo problema qui, consulta la guida alla risoluzione dei problemi di calcolo SSR web nell'archivio GitHub Amplify Hosting Issues.

Ho bisogno di aiuto per usare un adattatore di framework

Se riscontri problemi durante la distribuzione di un'SSRapp che utilizza un adattatore di framework, consultaUtilizzo di adattatori open source per qualsiasi framework SSR.

APILe route Edge causano il fallimento della mia build di Next.js

Attualmente, Amplify non supporta Next.js Edge Routes. API È necessario utilizzare sistemi non edge APIs e middleware per ospitare l'app con Amplify.

La rigenerazione statica incrementale su richiesta non funziona per la mia app

A partire dalla versione 12.2.0, Next.js supporta la rigenerazione statica incrementale (ISR) per eliminare manualmente la cache Next.js per una pagina specifica. Tuttavia, Amplify attualmente non supporta On-Demand. ISR Se la tua app utilizza la riconvalida su richiesta di Next.js, questa funzionalità non funzionerà quando distribuisci l'app su Amplify.

L'output di build della mia applicazione supera la dimensione massima consentita

Attualmente, la dimensione massima di output di build supportata da Amplify SSR per le app è di 220 MB. Se ricevi un messaggio di errore che indica che la dimensione dell'output di compilazione dell'app supera la dimensione massima consentita, devi prendere provvedimenti per ridurla.

Per ridurre le dimensioni dell'output di compilazione di un'app, puoi ispezionare gli artefatti di build dell'app e identificare eventuali dipendenze di grandi dimensioni da aggiornare o rimuovere. Innanzitutto, scarica gli artefatti della build sul tuo computer locale. Quindi, controlla la dimensione delle directory. Ad esempio, la node_modules directory potrebbe contenere file binari come @swc e a @esbuild cui fanno riferimento i file di runtime del server Next.js. Poiché questi file binari non sono necessari in fase di esecuzione, è possibile eliminarli dopo la compilazione.

Utilizzate le seguenti istruzioni per scaricare l'output della build di un'app e controllare la dimensione delle directory utilizzando il AWS Command Line Interface comando (). CLI

Per scaricare e controllare l'output della build di un'app Next.js

1. Apri una finestra di terminale ed esegui il comando seguente. Modifica l'ID dell'app, il nome del ramo e l'ID del lavoro con le tue informazioni. Per l'ID del lavoro, usa il numero di build della build fallita su cui stai indagando.

   aws amplify get-job --app-id abcd1234 --branch-name main --job-id 2

2. Nell'output del terminale, individua gli artefatti predefiniti URL nella sezione,,. job steps stepName: "BUILD" URLÈ evidenziato in rosso nell'output di esempio seguente.

   "job": {
       "summary": {
           "jobArn": "arn:aws:amplify:us-west-2:111122223333:apps/abcd1234/main/jobs/0000000002",
           "jobId": "2",
           "commitId": "HEAD",
           "commitTime": "2024-02-08T21:54:42.398000+00:00",
           "startTime": "2024-02-08T21:54:42.674000+00:00",
           "status": "SUCCEED",
           "endTime": "2024-02-08T22:03:58.071000+00:00"
       },
       "steps": [
           {
               "stepName": "BUILD",
               "startTime": "2024-02-08T21:54:42.693000+00:00",
               "status": "SUCCEED",
               "endTime": "2024-02-08T22:03:30.897000+00:00",
               "logUrl": "https://aws-amplify-prod-us-west-2-artifacts.s3.us-west-2.amazonaws.com/abcd1234/main/0000000002/BUILD/log.txt?X-Amz-Security-Token=IQoJb3JpZ2luX2V...Example

3. Copiatelo e URL incollatelo in una finestra del browser. Un artifacts.zip file viene scaricato sul computer locale. Questo è il risultato della tua build.

4. Esegui il comando du disk usage per controllare la dimensione delle directory. Il comando di esempio seguente restituisce la dimensione delle directory compute andstatic.

   du -csh compute static

   Di seguito è riportato un esempio di output con informazioni sulle dimensioni per le static directory compute and.

    29M    compute
   3.8M    static
    33M    total

5. Aprire la compute directory e individuarla. node_modules Controlla le dipendenze dei file che puoi aggiornare o rimuovere per ridurre le dimensioni della cartella.

6. Se la tua app include file binari che non sono necessari in fase di esecuzione, eliminali dopo la compilazione aggiungendo i seguenti comandi alla sezione build del file dell'amplify.ymlapp.

   - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
   - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

   Di seguito è riportato un esempio della sezione dei comandi di compilazione di un amplify.yml file con questi comandi aggiunti dopo l'esecuzione di una build di produzione.

   frontend:
     phases:
       build:
         commands:
            -npm run build
            
            // After running a production build, delete the files
            - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
            - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

La mia build fallisce con un errore di memoria esaurita

Next.js consente di memorizzare nella cache gli elementi della build per migliorare le prestazioni nelle build successive. Inoltre, il AWS CodeBuild contenitore di Amplify comprime e carica questa cache su Amazon S3, per tuo conto, per migliorare le prestazioni di build successive. Ciò potrebbe causare il fallimento della compilazione con un errore di memoria esaurita.

Esegui le seguenti azioni per evitare che l'app superi il limite di memoria durante la fase di compilazione. Innanzitutto, rimuovi .next/cache/**/* dalla sezione cache.paths delle impostazioni di build. Quindi, rimuovi la variabile di NODE_OPTIONS ambiente dal file delle impostazioni di build. Invece, imposta la variabile di NODE_OPTIONS ambiente nella console Amplify per definire il limite massimo di memoria del nodo. Per ulteriori informazioni sull'impostazione delle variabili di ambiente utilizzando la console Amplify, vedere. Impostazione delle variabili di ambiente

Dopo aver apportato queste modifiche, riprova a eseguire la build. Se riesce, aggiungilo .next/cache/**/* nuovamente alla sezione cache.paths del file delle impostazioni di build.

Per ulteriori informazioni sulla configurazione della cache di Next.js per migliorare le prestazioni della build, consulta il AWS CodeBuildsito Web Next.js.

La dimensione di HTTP risposta della mia applicazione è troppo grande

Attualmente, la dimensione massima di risposta supportata da Amplify per le app Next.js 12 e successive che utilizzano la piattaforma Web Compute è di 5,72 MB. Le risposte oltre tale limite restituiscono 504 errori senza contenuto ai client.

Come posso misurare l'ora di avvio della mia app di elaborazione a livello locale?

Utilizza le seguenti istruzioni per determinare l'ora di inizializzazione/avvio locale dell'app Compute Next.js 12 o versione successiva. Puoi confrontare le prestazioni della tua app a livello locale con quelle di Amplify Hosting e utilizzare i risultati per migliorare le prestazioni della tua app.

Per misurare localmente il tempo di inizializzazione di un'app Next.js Compute

1. Apri il next.config.js file dell'app e imposta l'outputopzione standalone come segue.

   ** @type {import('next').NextConfig} */
   const nextConfig = {
     // Other options
     output: "standalone",
   };
   
   module.exports = nextConfig;

2. Apri una finestra di terminale ed esegui il seguente comando per creare l'app.

   next build

3. Esegui il seguente comando per copiare la .next/static cartella in.next/standalone/.next/static.

   cp -r .next/static .next/standalone/.next/static

4. Esegui il comando seguente per copiare la public cartella in.next/standalone/public.

   cp -r public .next/standalone/public

5. Eseguire il comando seguente per avviare il server Next.js.

   node .next/standalone/server.js

6. Nota quanto tempo occorre tra l'esecuzione del comando nel passaggio 5 e l'avvio del server. Quando il server è in ascolto su una porta, dovrebbe stampare il seguente messaggio.

   Listening on port 3000

7. Nota quanto tempo impiega il caricamento di tutti gli altri moduli dopo l'avvio del server nel passaggio 6. Ad esempio, il caricamento di librerie bugsnag richiede 10-12 secondi. Dopo il caricamento, verrà visualizzato il messaggio [bugsnag] loaded di conferma.

8. Aggiungi insieme le durate temporali del passaggio 6 e del passaggio 7. Questo risultato è l'ora di inizializzazione/avvio locale dell'app Compute.