Tempo di lettura: 0 minuti6 lug 2024

Come eseguire il deploy di un'app Next.js su AWS utilizzando Amplify

Deployare un'applicazione Next.js su AWS utilizzando AWS Amplify è un processo potente ed efficiente che permette di scalare le applicazioni web con facilità. In questo articolo, vi guiderò attraverso i passaggi dettagliati per eseguire un deploy di un'app Next.js su AWS utilizzando AWS Amplify. Seguiremo un approccio passo-passo, assicurandoci di coprire ogni dettaglio necessario per portare la vostra applicazione dal vostro ambiente di sviluppo alla produzione.

Prerequisiti

Prima di iniziare, assicuratevi di avere:

Un account AWS.
Node.js e npm installati sul vostro computer.
Un'applicazione Next.js già pronta (se non ne avete una, potete crearne una utilizzando npx create-next-app).
AWS CLI installata e configurata sul vostro computer.

Passo 1: Preparazione dell'applicazione Next.js

Se non avete ancora un'app Next.js, creiamone una velocemente:

npx create-next-app my-next-app
cd my-next-app

Ora, verificate che l'app funzioni localmente:

npm run dev

Passo 2: Configurazione di AWS Amplify

Installazione del CLI di Amplify:
```
npm install -g @aws-amplify/cli
```
Inizializzazione di Amplify nel Progetto:

All'interno della directory del vostro progetto Next.js, eseguite:
```
amplify init
```
Rispondete alle domande del prompt. Ecco un esempio di risposte che potete fornire:
- Enter a name for the project: my-next-app
- Enter a name for the environment: dev
- Choose your default editor: Visual Studio Code (o il vostro editor preferito)
- Choose the type of app that you're building: javascript
- What javascript framework are you using: react
- Source Directory Path: pages
- Distribution Directory Path: out
- Build Command: npm run build
- Start Command: npm run start

Passo 3: Aggiunta di un hosting frontend

Aggiungere l'hosting al progetto:
```
amplify add hosting
```
Selezionate "Hosting with Amplify Console (Managed hosting with custom domains, Continuous integration)".
Pubblicare l'Applicazione:
```
amplify publish
```
Questo comando compila e distribuisce la vostra applicazione Next.js su AWS. Al termine, otterrete un URL dal quale potete accedere alla vostra app.

Passo 4: Configurazione del backend (Opzionale)

Se la vostra applicazione Next.js necessita di un backend (API, storage, autenticazione, ecc.), potete aggiungerli utilizzando Amplify.

Aggiungere un'API:
```
amplify add api
```
Seguite le istruzioni del prompt per configurare l'API (GraphQL o REST).
Aggiungere l'Autenticazione:
```
amplify add auth
```
Configurate il sistema di autenticazione (ad esempio, Amazon Cognito).
Eseguire l'aggiornamento delle risorse:
```
amplify push
```

Passo 5: Configurazione CI/CD

Per configurare la Continuous Integration e Continuous Deployment (CI/CD) con Amplify Console:

Andate alla console di AWS Amplify.
Cliccate su "Connect app".
Selezionate il repository del vostro codice (GitHub, GitLab, Bitbucket, o AWS CodeCommit).
Seguite le istruzioni per collegare il repository e configurare i build settings.

Amplify rileverà automaticamente il file amplify.yml nella radice del vostro progetto per configurare i processi di build e deploy.

Configurazione del file amplify.yml

Ecco un esempio di file amplify.yml per un'app Next.js:

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

Passo 6: Gestione del dominio personalizzato (Opzionale)

Se desiderate utilizzare un dominio personalizzato per la vostra applicazione:

Andate alla sezione "Domain management" nella console di Amplify.
Cliccate su "Add domain" e seguite le istruzioni per collegare il vostro dominio.

Conclusione

Deployare un'applicazione Next.js su AWS utilizzando AWS Amplify può sembrare complesso, ma seguendo questi passaggi dettagliati, potete ottenere una configurazione robusta e scalabile per la vostra applicazione web. Amplify non solo semplifica il processo di deploy, ma offre anche potenti strumenti per gestire l'intero ciclo di vita della vostra applicazione, dalla build alla produzione.

Con AWS Amplify, potete concentrarvi sullo sviluppo di funzionalità innovative, sapendo che l'infrastruttura della vostra applicazione è in buone mani. Buon deploy!