Distribuisci un'app Next.js su Amplify Hosting

Questo tutorial illustra la creazione e la distribuzione di un'applicazione Next.js da un repository Git.

Prima di iniziare questo tutorial, completa i seguenti prerequisiti.

Registrati per un Account AWS

Se non sei già un AWS cliente, devi crearne uno Account AWS seguendo le istruzioni online. La registrazione ti consente di accedere ad Amplify e AWS ad altri servizi che puoi utilizzare con la tua applicazione.

Creazione di un'applicazione

Crea un'applicazione Next.js di base da utilizzare per questo tutorial, utilizzando le create-next-appistruzioni nella documentazione di Next.js.

Crea un repository Git

Amplify GitHub supporta, GitLab Bitbucket e. AWS CodeCommit Invia la tua create-next-app applicazione al tuo repository Git.

Passaggio 1: Connect un repository Git

In questo passaggio, connetti la tua applicazione Next.js in un repository Git ad Amplify Hosting.

Per connettere un'app in un repository Git

1. Apri la console Amplify.

2. Se stai distribuendo la tua prima app nella regione corrente, per impostazione predefinita inizierai dalla pagina del AWS Amplifyservizio.

   Scegli Crea nuova app nella parte superiore della pagina.

3. Nella pagina Inizia a creare con Amplify, scegli il tuo provider di repository Git, quindi scegli Avanti.

   Per gli GitHub archivi, Amplify utilizza la funzione Apps per autorizzare GitHub l'accesso ad Amplify. Per ulteriori informazioni sull'installazione e l'autorizzazione dell'App, consulta. GitHub Configurazione dell'accesso Amplify ai GitHub repository

   Nota

   Dopo aver autorizzato la console Amplify con Bitbucket GitLab, AWS CodeCommit oppure, Amplify recupera un token di accesso dal provider del repository, ma non lo archivia sui server. AWS Amplify accede al repository utilizzando chiavi di distribuzione installate solo in uno specifico repository.

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

   1. Seleziona il nome del repository da connettere.

   2. Seleziona il nome del ramo del repository da connettere.

   3. Seleziona Successivo.

Passaggio 2: Conferma le impostazioni di build

Amplify rileva automaticamente la sequenza di comandi di compilazione da eseguire per il ramo che stai distribuendo. In questo passaggio rivedi e confermi le impostazioni di build.

Per confermare le impostazioni di build per un'app

1. Nella pagina delle impostazioni dell'app, individua la sezione Impostazioni di creazione.

   Verifica che il comando Frontend build e la directory di output Build siano corretti. Per questa app di esempio Next.js, la directory di output Build è impostata su. .next

2. La procedura per aggiungere un ruolo di servizio varia a seconda che si desideri creare un nuovo ruolo o utilizzarne uno esistente.

   • Per creare un nuovo ruolo:

     1. Scegli Crea e usa un nuovo ruolo di servizio.

   • Per utilizzare un ruolo esistente:

     1. Scegli Usa un ruolo esistente.

     2. Nell'elenco dei ruoli di servizio, seleziona il ruolo da utilizzare.

3. Seleziona Successivo.

Fase 3: Distribuire l'applicazione

In questo passaggio distribuisci la tua app nella rete AWS globale di distribuzione dei contenuti ()CDN.

Per salvare e distribuire un'app

1. Nella pagina di revisione, verifica che i dettagli del repository e le impostazioni dell'app siano corretti.

2. Scegliere Save and deploy (Salva e distribuisci). La creazione del front-end richiede in genere da 1 a 2 minuti, ma può variare in base alle dimensioni dell'app.

3. Una volta completata la distribuzione, puoi visualizzare l'app utilizzando il link al dominio amplifyapp.com predefinito.

Nota

Per aumentare la sicurezza delle tue applicazioni Amplify, il dominio amplifyapp.com è registrato nella Public Suffix List (). PSL Per una maggiore sicurezza, ti consigliamo di utilizzare i cookie con un __Host- prefisso se hai bisogno di impostare cookie sensibili nel nome di dominio predefinito per le tue applicazioni Amplify. Questa pratica ti aiuterà a difendere il tuo dominio dai tentativi di falsificazione delle richieste tra siti (). CSRF Per ulteriori informazioni, consulta la pagina Impostazione cookie nella pagina Mozilla Developer Network.

Passaggio 4: (Facoltativo) ripulisci le risorse

Se non ti serve più l'app che hai distribuito per il tutorial, puoi eliminarla. In questo modo hai la certezza che non ti vengano addebitati costi per risorse che non stai utilizzando.

Per eliminare un'app

1. Dal menu delle impostazioni dell'app nel riquadro di navigazione, scegli Impostazioni generali.

2. Nella pagina delle impostazioni generali, scegli Elimina app.

3. Nella finestra di conferma, inseriscidelete. Quindi scegli Elimina app.

Aggiungi funzionalità alla tua app

Ora che hai un'app distribuita su Amplify, puoi esplorare alcune delle seguenti funzionalità disponibili per la tua applicazione ospitata.

Variabili di ambiente

Le applicazioni spesso richiedono informazioni di configurazione in fase di esecuzione. Queste configurazioni possono essere dettagli di connessione al database, API chiavi o parametri. Le variabili di ambiente forniscono un modo per esporre queste configurazioni in fase di compilazione. Per ulteriori informazioni, consulta Variabili di ambiente.

Domini personalizzati

In questo tutorial, Amplify ospita la tua app per te sul dominio amplifyapp.com predefinito con URL un esempio. https://branch-name.d1m7bkiki6tdw1.amplifyapp.com Quando connetti la tua app a un dominio personalizzato, gli utenti vedono che la tua app è ospitata su un dominio personalizzatoURL, ad esempio. https://www.example.com Per ulteriori informazioni, consulta Configurazione di domini personalizzati.

Anteprime delle pull request

Le anteprime delle richieste pull web offrono ai team un modo per visualizzare in anteprima le modifiche apportate alle pull request (PRs) prima di unire il codice a un ramo di produzione o di integrazione. Per ulteriori informazioni, vedete Anteprime Web per le richieste pull.

Gestione di più ambienti

Per scoprire come Amplify funziona con i feature branch GitFlow e i flussi di lavoro per supportare più implementazioni, consulta Distribuzioni di feature branch e flussi di lavoro in team.