La guida definitiva per distribuire le applicazioni Docker

Docker ha rivoluzionato il modo in cui il software viene sviluppato, testato e distribuito. Ha eliminato molti dei problemi comuni della distribuzione del software, come i problemi di compatibilità e le differenze ambientali tra ambienti di sviluppo e di produzione.

In questo articolo esploreremo il processo di distribuzione di un container Docker in un ambiente di produzione. Parleremo di container, Docker, dei vantaggi dell’uso di Docker e delle sue opzioni di distribuzione. Infine, dimostreremo come costruire, dockerizzare e distribuire un’applicazione Next.js su Back4app Containers – in modo assolutamente gratuito!

Cosa sono i contenitori?

Un contenitore è un pacchetto eseguibile autonomo che include tutto ciò che serve per eseguire un’applicazione. Si tratta di codice, runtime, librerie, variabili d’ambiente e file di configurazione. L’aspetto positivo dei container è che possono essere distribuiti ovunque, sono di dimensioni ridotte, veloci ed efficienti.

Vantaggi dell’utilizzo dei contenitori

L’uso dei container può portare grandi benefici all’azienda. Può aiutare gli sviluppatori e il team operativo IT. Alcuni dei vantaggi dell’uso di Docker sono:

• Portabilità: i container possono essere distribuiti ovunque!
• Isolamento dell’applicazione: i container isolano l’applicazione e le sue dipendenze dal sistema host.
• Separazione delle responsabilità: il lavoro è diviso tra sviluppatori e team operativo IT.
• Sviluppo più rapido delle applicazioni: non è necessario armeggiare con ambienti di sviluppo locali, CI/CD.
• Facile scalabilità: i container possono scalare facilmente in combinazione con il software di orchestrazione.

Per maggiori informazioni sui container, date un’occhiata a Cosa sono i container nel cloud computing?

Contenitori contro macchine virtuali

Le macchine virtuali (VM) sono un’astrazione dell’hardware fisico, mentre i container sono virtualizzati a livello di sistema operativo. Le macchine virtuali offrono maggiore isolamento e sicurezza, mentre i container non occupano molto spazio e sono più efficienti e scalabili.

È possibile combinare container e macchine virtuali per ottenere il meglio di entrambi.

Che cos’è Docker?

Docker è uno strumento open-source basato su Linux che consente agli sviluppatori di creare, distribuire ed eseguire applicazioni in contenitori leggeri. Offre tutti i vantaggi della tecnologia di containerizzazione e consente di codificare, spedire e distribuire il software più velocemente che mai!

È una tecnologia stabile e collaudata, rilasciata nel 2013. Da allora è stata adottata da molte grandi aziende, tra cui Google, AWS e Microsoft. È supportata da un’enorme comunità di sviluppatori, il che significa che è possibile trovare facilmente aiuto in caso di problemi.

Docker non è l’unico strumento di containerizzazione sul mercato, ma è il più popolare. Tra le alternative più valide ci sono Podman, LXD, Containerd e Buildah.

Vantaggi dell’utilizzo di Docker

Oltre a tutti i vantaggi della tecnologia di containerizzazione, Docker offre numerosi altri vantaggi. Vediamoli.

Leggero

Grazie alla sua natura leggera e veloce, Docker offre un sostituto pratico ed economico alle macchine virtuali. Docker è adatto per ambienti ad alta densità e per distribuzioni di piccole e medie dimensioni in cui è necessario fare di più con meno risorse.

Controllo della versione

Docker consente la gestione delle versioni delle applicazioni, rendendo facile il rollback a una versione precedente, se necessario. Ciò può contribuire a ridurre i tempi di inattività e a minimizzare l’impatto dei problemi legati agli aggiornamenti o alle modifiche di un’applicazione.

Collaborazione migliorata

Docker Hub è un repository basato su cloud per l’archiviazione, la condivisione e la gestione di immagini Docker e non è necessario creare un’immagine Docker da zero. Fornisce una posizione centrale per scoprire e condividere le immagini Docker più diffuse, comprese quelle create dalla comunità Docker e le immagini ufficiali dei fornitori di software. È strettamente integrato con Docker CLI e Docker Desktop.

Scalabilità

Docker fornisce un’architettura scalabile che può essere utilizzata per distribuire applicazioni su sistemi distribuiti su larga scala, come cluster o piattaforme cloud. La capacità di Docker di gestire un gran numero di container e di orchestrarli attraverso strumenti come Docker Swarm o Kubernetes consente di scalare facilmente verso l’alto o verso il basso in base alla domanda.

Docker e sviluppo locale

Il modo più semplice per far funzionare Docker sul proprio computer locale è installare Docker Desktop. Docker Desktop è un’applicazione che fornisce un’interfaccia grafica facile da usare e gli strumenti necessari per costruire, testare e distribuire applicazioni containerizzate sul computer locale. Permette di gestire contenitori, immagini e volumi. Dispone di Docker Engine, Docker CLI e Docker Compose integrati.

Inoltre, consente di utilizzare le estensioni Docker che possono aiutare ad automatizzare i flussi di lavoro e le attività. Docker Desktop facilita la collaborazione con altri sviluppatori e ha un ottimo supporto per Docker Hub.

Docker Desktop è disponibile su Windows, Mac e Linux.

Opzioni di distribuzione Docker

Sviluppare un’applicazione con Docker è facile e i container possono essere distribuiti su varie piattaforme. In generale, possiamo suddividerli nei seguenti gruppi:

1. Hosting convenzionale
2. Infrastruttura come servizio (IaaS)
3. Piattaforma come servizio (PaaS)
4. Contenitore come servizio (CaaS)

In base alla loro astrazione, possiamo visualizzarli in un grafico piramidale come questo:

Analizziamo ciascuno di essi.

Docker e l’hosting convenzionale

Come avrete capito, i container Docker possono essere facilmente distribuiti sul vostro server. Per rendere Docker attivo e funzionante sul vostro server dovrete:

1. Installare il motore Docker.
2. Costruire le immagini Docker (localmente) o estrarle da un registro di container.
3. Utilizzare le immagini per avviare i contenitori.
4. Configurare la rete, i volumi, il firewall e così via.

Se si desidera semplificare ulteriormente il processo di distribuzione, è possibile utilizzare Docker Compose. Docker Compose consente di dichiarare servizi, reti e volumi in un unico file. Inoltre, è ottimo per le applicazioni Docker multi-container.

Docker su IaaS

L’Infrastructure as a Service (IaaS) è un modello di servizio di cloud computing che fornisce risorse informatiche come server, reti, sistemi operativi e storage in un ambiente virtualizzato. Questi server cloud sono tipicamente forniti all’organizzazione attraverso API di alto livello o dashboard avanzate che consentono ai clienti di avere il controllo completo sull’intera infrastruttura.

Docker su IaaS non è molto diverso dall’utilizzo del proprio server. Se optate per questo approccio, dovrete seguire passi simili a quelli dell’hosting tradizionale.

Alcuni dei fornitori di IaaS includono AWS, GCP, Azure.

Docker su PaaS

Platform as a Service (PaaS) è un modello di servizio di cloud computing che fornisce agli utenti un ambiente cloud in cui sviluppare, gestire e distribuire applicazioni. Oltre a fornire risorse informatiche, il PaaS viene fornito con molti strumenti precostituiti per lo sviluppo, la personalizzazione e il test delle applicazioni. La maggior parte dei fornitori di PaaS consente di rendere operativa la propria applicazione in pochi clic!

Le piattaforme PaaS che supportano Docker semplificano ulteriormente il processo di distribuzione. I fornitori di PaaS di solito forniscono ottimi strumenti che consentono di distribuire l’applicazione Docker senza problemi.

Per saperne di più su PaaS, consultate Cos’è PaaS – Platform as a Service?

Docker su CaaS

Container as a Service (CaaS) è un tipo di Platform as a Service (PaaS) che fornisce specificamente una piattaforma per l’esecuzione e la gestione di applicazioni containerizzate. È stato progettato per semplificare l’esecuzione, la gestione e la scalabilità dei container e dei microservizi Docker nel cloud.

Il CaaS è l’opzione più semplice da utilizzare, poiché è specializzato per i container e astrae dall’infrastruttura sottostante, liberando gli sviluppatori dalla gestione dei server e delle reti sottostanti. La maggior parte dei fornitori di CaaS include funzionalità aggiuntive come lo scaling, il bilanciamento del carico, il failover automatico, le distribuzioni a tempo zero e così via!

Esempi di CaaS sono Back4app Containers, AWS ECS, Azure ACI e Google GKE.

Per saperne di più sul CaaS, consultate Cos’è il CaaS – Container as a Service?

Distribuire un contenitore Docker su Back4app Containers

In questa sezione dell’articolo, codificheremo, dockerizzeremo e distribuiremo una semplice applicazione Next.js su Back4app Containers.

Che cos’è Back4app Containers?

Back4app Containers è una piattaforma open-source gratuita per la distribuzione e la scalabilità di applicazioni su container distribuiti a livello globale. Permette di concentrarsi sul proprio software e di spedirlo più velocemente senza doversi preoccupare di DevOps. La piattaforma è strettamente integrata con GitHub, ha un sistema CI/CD integrato e consente di rendere operativa la vostra applicazione in pochi minuti!

Perché utilizzare Back4app Containers?

• Si integra bene con GitHub
• Distribuzioni a tempo zero
• Facile da usare e con un livello gratuito
• Assistenza clienti eccellente

Introduzione al progetto

Costruiremo una semplice applicazione web TODO con archiviazione persistente. L’applicazione consentirà agli utenti di aggiungere, rimuovere e contrassegnare i compiti come eseguiti. La costruiremo con Next.js, React e Zustand per la gestione e la persistenza dello stato. Infine, dockerizzeremo l’applicazione e la distribuiremo su Back4app Containers.

Il prodotto finale avrà questo aspetto:

Prerequisiti:

• Esperienza con JavaScript ES6
• Conoscenza di base di React e Next.js
• Capacità di utilizzare Git e GitHub

Codice App

Inizializzazione del progetto

Iniziamo creando un nuovo progetto Next.js.

Il modo più semplice per avviare un progetto Next.js è usare l’utility create-next-app. Aprite il vostro terminale ed eseguite il seguente comando:

$ npx create-next-app@latest

√ What is your project named? ... nextjs-todo
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Success! Created a new Next.js app in C:\Users\Nik\WebstormProjects\nextjs-todo.

Quindi, eseguire il server:

$ npm run dev

Navigate su http://localhost:3000 e dovreste vedere la pagina di destinazione predefinita di Next.js.

Material UI

Possiamo semplificare il processo di creazione delle interfacce utente con Material UI, una libreria di componenti React che segue il Material Design di Google. Questa libreria offre una vasta selezione di componenti pronti all’uso, rendendo semplice ed efficiente la creazione di interfacce utente.

Sentitevi liberi di sostituire Material UI con un framework UI diverso, come React Bootstrap o Ant Design.

Per aggiungere Material UI al progetto, eseguire:

$ npm install @mui/material @emotion/react @emotion/styled

Material UI utilizza il font Roboto per impostazione predefinita. Installiamolo con:

$ npm install @fontsource/roboto

Quindi, spostarsi in _app.js e aggiungere le seguenti importazioni all’inizio del file:

Interfaccia utente

La nostra applicazione web avrà le due pagine seguenti:

1. / visualizzerà l’elenco delle attività
2. /add consente agli utenti di aggiungere un nuovo compito.

Cominciamo con la pagina di indice.

Per rendere il nostro codice più organizzato, creiamo una nuova cartella nella radice del progetto, chiamata components. All’interno di questa cartella, creare un nuovo file chiamato Task.js con il seguente contenuto:

Quindi, utilizzare il componente appena creato in index.js per visualizzare le attività:

1. Abbiamo usato l’hook useState() di React per creare lo stato dei task.
2. Abbiamo popolato l’array dei compiti con alcuni dati fittizi.
3. Abbiamo usato i componenti MUI e il componente Task per visualizzare i compiti (o un messaggio se non ci sono ancora compiti).

Eseguire il server di sviluppo:

$ npm run dev

Andate su http://localhost:3000 e vedrete l’elenco delle attività:

Procediamo con la creazione di una pagina per l’aggiunta di compiti.

Creare un nuovo file chiamato add.js all’interno della cartella pages:

Questo codice visualizza un semplice modulo che consente agli utenti di aggiungere nuovi compiti.

Riavviare il server e navigare in /add o fare clic sul pulsante “Aggiungi attività” in alto a destra dello schermo. Si dovrebbe vedere qualcosa di simile a questo:

Bene, la nostra interfaccia utente è ora completa. Nel prossimo passo, implementeremo la logica e lo stato effettivi.

Gestione dello Stato

Per gestire lo stato globale useremo Zustand, una libreria di gestione dello stato piccola, veloce e scalabile per applicazioni React.

Si inizia con l’installazione tramite npm:

$ npm install zustand

Successivamente, dobbiamo creare un negozio.

Per rendere il nostro codice più organizzato, creiamo una cartella dedicata allo stato globale, chiamata store. All’interno di questa cartella, creiamo un file chiamato storage.js con il seguente contenuto:

1. Zustand create() crea il negozio.
2. Per salvare lo stato in localStorage abbiamo usato il middleware persist().
3. è un array contenente i compiti dell’utente.
4. addTask, deleteTask, markTaskAsDone sono metodi per manipolare l’array dei task.

L’ultima cosa da fare è passare in rassegna tutte le pagine e i componenti che richiedono lo stato globale e vincolarli.

Iniziate navigando in index.js e modificandolo in questo modo:

Non dimenticate di aggiungere l’importazione all’inizio del file:

import useGlobalStore from "@/store/storage";

Quindi, spostarsi in components/Task.js e modificarlo in questo modo:

Infine, passare a pages/add.js e fare in modo che handleSubmit() invii il task:

Ancora una volta, non dimenticatevi dell’importazione:

import useGlobalStore from "@/store/storage";

Bene, la nostra applicazione web ora utilizza Zustand per gestire la memorizzazione globale e la persiste tramite localStorage. Eseguite pure l’applicazione per verificare che tutto funzioni.

App Dockerize

I passaggi seguenti richiedono l’installazione di Docker. Il modo più semplice per installare Docker è scaricare Docker Desktop.

Verificare che Docker sia in esecuzione:

$ docker --version

Docker version 20.10.22, build 3a2c30b

Configurare Next.js

Per prima cosa, andare nel file next.config.js e impostare l’uscita su "standalone" in questo modo:

Modificando questa impostazione, si creerà una versione standalone della nostra applicazione Next.js con la prossima compilazione. Un’applicazione standalone può essere distribuita senza installare node_modules. La build standalone è dotata anche di un server web integrato.

Dockerfile

Per dockerizzare la nostra applicazione useremo un Dockerfile. Un Dockerfile è un file di testo semplice che ci permette di definire l’immagine di base, l’ambiente, le variabili ambientali, i comandi, le impostazioni di rete, i volumi e così via.

Creare un file Docker nella root del progetto con i seguenti contenuti:

Questo file Docker sfrutta le build multi-stage. I build multi-stage ci permettono di ridurre notevolmente le dimensioni dell’immagine e di costruire le nostre immagini più velocemente. Abbiamo creato i seguenti tre stadi:

1. La fase delle dipendenze copia il file delle dipendenze e installa le dipendenze.
2. La fase di costruzione copia le dipendenze e costruisce il progetto tramite npm.
3. Lo stadio runner copia la build standalone e la serve tramite il server standalone.

Infine, abbiamo esposto una porta che Back4app Containers utilizzerà per mappare l’applicazione.

Per ulteriori informazioni sull’uso di Docker con Next.js, consultare il repository with-docker.

.dockerignore

Prima di creare un’immagine, Docker cerca un file .dockerignore. Un file .dockerignore ci permette di definire quali file non vogliamo includere nell’immagine. Questo può ridurre notevolmente le dimensioni dell’immagine. Funziona in modo simile a un file .gitignore.

Creare un file .dockerignore nella radice del progetto con i seguenti contenuti:

Assicuratevi di aggiungere altre directory o file che desiderate escludere.

Creare ed eseguire l’immagine

Procediamo con la creazione e l’etichettatura della nostra immagine Docker:

$ docker build -t nextjs-todo:1.0 .

Se si elencano le immagini, si dovrebbe vedere la nuova immagine:

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED       SIZE
nextjs-todo       1.0       7bce66230eb1   2 hours ago   160MB

Infine, utilizzare l’immagine per avviare un nuovo contenitore Docker:

$ docker run -it -p 3000:3000 -d nextjs-todo:1.0

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

È possibile usare -d per avviare il contenitore Docker in modalità distaccata. Ciò significa che il contenitore viene eseguito in background nel terminale e non riceve input né visualizza output.

Ben fatto, la vostra applicazione è ora in esecuzione in un contenitore! Andate su http://localhost:3000 e vedrete la vostra applicazione TODO.

GitHub

Per distribuire l’applicazione su Back4app Containers è necessario caricare il codice sorgente su un repository GitHub. Creare un nuovo repository su GitHub, aggiungere il remote, aggiungere .gitignore e fare il commit del codice. Una volta che il codice è su GitHub, passare al passo successivo.

Se volete solo testare Back4app Containers, sentitevi liberi di creare un fork del repo back4app-containers-nextjs e distribuirlo al suo posto.

Distribuire l’applicazione nei contenitori Back4app

Per eseguire i passaggi seguenti è necessario disporre di un account Back4app. Se lo avete già , accedete, altrimenti procedete con la registrazione dell’account gratuito.

Per lavorare con Back4app è necessario creare un’app. Quando si accede alla dashboard, viene visualizzato l’elenco delle app. Fare clic su “Crea una nuova app” per creare una nuova app.

Quindi, selezionare “Containers as a Service”.

Se non l’avete ancora fatto, collegate GitHub a Back4app e importate i repository che desiderate distribuire. Una volta collegato GitHub, i repository saranno visualizzati nella tabella.

Scegliere il repository che si desidera distribuire facendo clic su “Seleziona”.

Successivamente, Back4app chiederà di configurare l’ambiente. Scegliere un nome per l’applicazione, io sceglierò nextjs-todo. Sentitevi liberi di lasciare tutto il resto come predefinito.

Infine, fare clic su “Create App” per creare automaticamente l’applicazione e distribuirla.

Si verrà quindi reindirizzati ai dettagli dell’applicazione, dove si potranno vedere i registri di distribuzione.

Attendete qualche minuto per la distribuzione dell’applicazione e voilà! La vostra applicazione è ora disponibile su Back4app Containers. Per vedere la vostra applicazione in azione, fate clic sull’URL verde visualizzato a sinistra.

Conclusione

Nel corso dell’articolo abbiamo spiegato cos’è Docker, i suoi vantaggi e come potete integrarlo nel vostro flusso di lavoro. A questo punto dovreste essere in grado di codificare, dockerizzare e distribuire le vostre applicazioni Next.js nei contenitori Back4app.

Il codice sorgente finale è disponibile sul repository GitHub di back4app-containers-nextjs.

FAQ