In questo articolo spiegheremo come containerizzare un’applicazione Next.js con un Dockerfile per un deployment personalizzabile. In alternativa, è sempre possibile distribuire un’applicazione Next.js su Kinsta utilizzando il deployment automatico.

Con Docker, possiamo impacchettare un’applicazione, il suo ambiente e le sue dipendenze in un container isolato. Un container consiste in un’applicazione in esecuzione in una versione ridotta di Linux. Un’immagine Docker è il progetto di un container e il container è un’istanza in esecuzione di un’immagine.

Per containerizzare un’applicazione, utilizziamo un metodo dichiarativo tramite un Dockerfile. Docker legge ed esegue gli script definiti in questo file per costruire e distribuire l’applicazione.

Vantaggi della containerizzazione di un’applicazione

La containerizzazione di un’applicazione offre numerosi vantaggi, tra cui portabilità, stabilità, scalabilità, sicurezza e prestazioni. Distribuendo un’applicazione su Kinsta con un Dockerfile, se ne sfruttano anche le possibilità di personalizzazione.

Portabilità

Docker incapsula tutto ciò di cui un’applicazione ha bisogno per funzionare, consentendo di passare facilmente da un ambiente all’altro. L’applicazione può essere eseguita in locale, su un computer con un sistema operativo diverso o in ambienti di staging e di produzione. In tutti i casi, Docker genera l’applicazione con gli stessi componenti, e ciò rende più semplici la scrittura del codice, il test e la distribuzione.

Scalabilità

Con Docker è possibile eseguire diverse istanze dello stesso container su server diversi. Gli orchestratori di container gestiscono l’aumento del traffico senza influire sulle prestazioni dell’applicazione.

Stabilità

Se un’applicazione viene eseguita in un container isolato, si avranno risultati sempre prevedibili spostando il codice tra i sistemi di sviluppo, test e produzione. Dato che un container contiene le stesse versioni delle librerie e dei pacchetti necessari, riduce al minimo il rischio di bug dovuti alle diverse revisioni delle dipendenze.

Inoltre, quando un’applicazione viene distribuita su un server di produzione, Docker la tiene isolata dalle altre applicazioni, riducendo al minimo il rischio di essere colpiti dai picchi di traffico di queste ultime.

Sicurezza

I container Docker offrono un ambiente più sicuro per i carichi di lavoro rispetto ai modelli tradizionali. Dato che suddividono le applicazioni in componenti molto più piccoli e non accoppiati, ognuno isolato dall’altro, la superficie di attacco è notevolmente ridotta. I container Docker riducono la possibilità che gli hacker possano sfruttare i sistemi informatici e rendono più difficile la diffusione di una violazione in caso di attacco. Approfondiamo l’argomento in quest’articolo: Le best practice di sicurezza per i container Docker.

Prestazioni

I container non contengono un intero sistema operativo come le macchine virtuali e i server tradizionali. Per questo hanno un ingombro notevolmente ridotto e sono più veloci da costruire e avviare.

Distribuzione personalizzata

Su Kinsta è possibile distribuire automaticamente le applicazioni utilizzando Buildpacks e Nixpacks. Ma se, in base alla codebase dell’applicazione, il processo di build viene attivato automaticamente, non resta molto spazio per le personalizzazioni. Se si effettua il deploy su Kinsta con un Dockerfile, si può configurare con precisione il modo in cui si vuole costruire e distribuire un’applicazione.

Requisiti

Per distribuire un’applicazione Next.js con Docker, occorre quanto segue:

Una semplice applicazione Next.js

Se si parte da un’applicazione esistente, si può saltare questo passaggio. Se invece si sta iniziando da zero, bisogna creare una nuova applicazione Next.js:

  1. Aprire il terminale e installare create-next-app:
npm i -g create-next-app@latest
  1. Spostarsi nella directory in cui si vuole installare l’applicazione e create una nuova applicazione Next.js:
npx create-next-app@latest new-app

Next chiederà di specificare una serie di opzioni per la configurazione dell’applicazione. Per questo tutorial, basterà accettare i valori predefiniti.

  1. Per vedere l’anteprima della nuova applicazione, spostarsi nella cartella new-app ed eseguire questo comando:
npm run dev

Come riferimento, abbiamo seguito questo metodo per creare un’applicazione di esempio.

Containerizzare un’applicazione Next.js con un Dockerfile

Per containerizzare un’applicazione Next.js e distribuirla con Docker, si crei un Dockerfile nella directory principale dell’applicazione.

Fase di build

Nel Dockerfile, si inizia con la fase di build:

  1. Si può utilizzare l’ultima immagine ufficiale stabile di Node.js Alpine come immagine di base per la fase di build:
FROM node:18-alpine AS build
WORKDIR /app
  1. Copiare i file package.json e package-lock.json nel container:
COPY package*.json ./
  1. Installare le dipendenze dell’applicazione con:
RUN npm ci
  1. Copiare il resto del codice dell’applicazione nel container con:
COPY . .
  1. Eseguire la build l’applicazione:
RUN npm run build

Fase di runtime

Si passa poi alla fase di runtime:

  1. Si può utilizzare l’ultima immagine ufficiale stabile di Node.js Alpine come immagine di base per la fase di runtime:
FROM node:18-alpine AS runtime
  1. Impostare la directory di lavoro su /app:
WORKDIR /app
  1. Copiare i file package.json e package-lock.json nel container:
COPY package*.json ./
  1. Installare solo le dipendenze di produzione:
RUN npm ci --only=production
  1. Copiare l’applicazione generata dalla fase di build alla fase di runtime:
COPY --from=build /app/.next ./.next
  1. Copiare la cartella public dalla fase di build alla fase di runtime:
COPY --from=build /app/public ./public
  1. Esporre la porta 3000:
EXPOSE 3000
  1. Eseguire il contenitore come utente senza privilegi:
USER node
  1. Avviare l’applicazione Next.js:
CMD ["npm", "start"]

Otterremo il seguente Dockerfile:

FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runtime

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public

EXPOSE 3000
USER node
CMD ["npm", "start"]

Distribuire l’applicazione in locale con Docker

Sebbene sia possibile visualizzare l’anteprima dell’applicazione con run npm dev, consigliamo di eseguirla in locale con Docker per imitare l’ambiente di produzione e per testare e visualizzare l’anteprima di eventuali modifiche apportate al Dockerfile dell’applicazione.

Per visualizzare l’anteprima dell’applicazione:

  1. Eseguire la build dell’applicazione con docker build:
docker build -t next-docker .
  1. Eseguire il container per visualizzare l’anteprima dell’applicazione:
docker run -p 3000:3000 next-docker
  1. Nel browser, aprire http://localhost:3000.

Distribuire un’applicazione Next.js containerizzata su Kinsta

Per distribuire l’applicazione su Kinsta con un Dockerfile si possono seguire questi passaggi.

  1. Utilizzare un repository Git (su GitHub, GitLab o Bitbucket) per l’hosting della base di codice dell’applicazione.
  2. Accedere all’account MyKinsta o crearne uno nuovo per accedere al cruscotto.
  3. Fare clic su Aggiungi servizio e selezionare Applicazione.
  4. Selezionare il provider Git, il repository e il branch da cui si vuole effettuare il deploy.
  5. Selezionare la casella Distribuzione automatica su commit se si desidera distribuire l’applicazione a ogni push del repo.
  6. Selezionare il data center più vicino al proprio pubblico e fare clic su Continua.
  7. Scegliere l’ambiente di build e selezionare Usa un Dockerfile per installare l’immagine del container.
  8. Se il Dockerfile non si trova nella root del repo, scegliere Contesto per indicarne il percorso e fare clic su Continua.
  9. È possibile lasciare vuota la voce Comando Start. Kinsta usa npm start per avviare l’applicazione.
  10. Selezionare la dimensione del pod e il numero di istanze più adatto all’applicazione e fare clic su Continua.
  11. Inserire i dati della carta di credito e fare clic su Crea applicazione.

L’applicazione è pronta per la distribuzione. Se è stata selezionata la casella Distribuzione automatica su commit al punto 5, Kinsta avvierà automaticamente la distribuzione.

Riepilogo

In questo articolo abbiamo descritto alcuni vantaggi di Docker rispetto ai modelli tradizionali; abbiamo spiegato come creare un Dockerfile per un’applicazione Next.js e come costruirla e distribuirla con Docker in locale e poi distribuirla su Kinsta.

L’Hosting di Applicazioni di Kinsta rende più semplice ed efficiente il lavoro di sviluppo.

Caratteristiche come le applicazioni containerizzate su infrastruttura GCP in esecuzione su macchine C2 con 37 data center, l’integrazione premium di Cloudflare per offrire un CDN ad alte prestazioni che serve il sito da 260+ Points of Presence, la protezione DDoS del firewall di livello enterprise, l’Edge Caching e il monitoraggio dell’attività (con garanzia di uptime del 99%), assicurano che ogni applicazione venga eseguita in modo veloce e sicuro e che sia disponibile su internet senza problemi.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.