Esercitazione: Creare un'app Docker con Visual Studio Code

Articolo
08/25/2023

Questa esercitazione è l'inizio di una serie in quattro parti che introduce Docker per l'uso con Visual Studio Code (VS Code). Si apprenderà come creare ed eseguire contenitori Docker, rendere persistenti i dati e gestire più contenitori con Docker Compose.

VS Code offre un'estensione Docker che consente di usare un servizio Docker Desktop locale. Docker Desktop viene eseguito nel computer e gestisce i contenitori locali, che sono ambienti virtualizzati compattati che forniscono una piattaforma per la compilazione e l'esecuzione di app. I contenitori non richiedono le dimensioni e il sovraccarico di un sistema operativo completo.

In questa prima esercitazione si apprenderà come:

Creare un contenitore Docker.
Compila un'immagine del contenitore.
Avviare un contenitore di app.

Prerequisiti

Visual Studio Code installato.
Estensione Docker VS Code installata.
Docker Desktop configurato per l'uso di contenitori Linux.
Un account dell'hub Docker. È possibile creare gratuitamente un account.

L'esercitazione funziona con Windows 10 o versione successiva e Docker Desktop configurato per l'uso di contenitori Linux.

Creazione di un contenitore

Un contenitore è un processo nel computer. È isolato da tutti gli altri processi nel computer host. Questo isolamento usa spazi dei nomi del kernel e gruppi di controllo.

Un contenitore usa un file system isolato. Questo file system personalizzato viene fornito da un'immagine del contenitore. L'immagine contiene tutti gli elementi necessari per eseguire un'applicazione, ad esempio tutte le dipendenze, la configurazione, gli script e i file binari. L'immagine contiene anche altre configurazioni per il contenitore, ad esempio variabili di ambiente, un comando predefinito da eseguire e altri metadati.

Dopo aver installato l'estensione Docker per VS Code, è possibile usare i contenitori in VS Code. Oltre ai menu di scelta rapida nel riquadro Docker, è possibile selezionare Terminale>nuovo terminale per aprire una finestra della riga di comando. È anche possibile eseguire comandi in una finestra Bash. A meno che non sia specificato, qualsiasi comando etichettato come Bash può essere eseguito in una finestra Bash o nel terminale di VS Code.

Impostare Docker sulla modalità contenitore Linux. Per passare ai contenitori Linux se si è attualmente impostati su contenitori Windows, fare clic con il pulsante destro del mouse sull'icona Docker nell'area di notifica mentre è in esecuzione Docker Desktop e scegliere Passa ai contenitori Linux.
In VS Code selezionare Terminale>nuovo terminale.
Nella finestra del terminale o in una finestra Bash eseguire questo comando.
```
docker run -d -p 80:80 docker/getting-started
```
Questo comando contiene i parametri seguenti:
- -d Eseguire il contenitore in modalità disconnessa, in background.
- -p 80:80 Eseguire il mapping della porta 80 dell'host alla porta 80 nel contenitore.
- docker/getting-started Specifica l'immagine da usare.
Suggerimento

È possibile combinare flag di caratteri singoli per abbreviare il comando completo. Ad esempio, il comando precedente può essere scritto come segue:
```
docker run -dp 80:80 docker/getting-started
```
In VS Code selezionare l'icona Docker a sinistra per visualizzare l'estensione Docker.

L'estensione Docker VS Code mostra i contenitori in esecuzione nel computer. È possibile accedere ai log dei contenitori e gestire il ciclo di vita del contenitore, ad esempio arrestare e rimuovere.

Il nome del contenitore, modest_shockley in questo esempio, viene creato in modo casuale. I tuoi avranno un nome diverso.
Fare clic con il pulsante destro del mouse su docker/getting-started per aprire un menu di scelta rapida. Fare clic su Open in Browser (Apri nel browser).

Aprire invece un browser e immettere http://localhost/tutorial/.

Verrà visualizzata una pagina, ospitata in locale, su DockerLabs.
Fare clic con il pulsante destro del mouse su docker/getting-started per aprire un menu di scelta rapida. Selezionare Rimuovi per rimuovere questo contenitore.

Per rimuovere un contenitore usando la riga di comando, eseguire questo comando per ottenere l'ID contenitore:
```
docker ps
```
Arrestare e rimuovere quindi il contenitore:
```
docker stop <container-id>
docker rm <container-id>
```
Aggiorna il browser. La pagina Attività iniziali che hai visto un attimo fa è sparita.

Creare un'immagine del contenitore per l'app

Questa esercitazione usa una semplice applicazione Todo.

Screenshot shows the sample application with several items added and a text box and button to add new items.

L'app consente di creare elementi di lavoro e di contrassegnarli come completati o eliminarli.

Per compilare l'applicazione, creare un Dockerfile. Un Dockerfile è uno script basato su testo di istruzioni che viene usato per creare un'immagine del contenitore.

Passare al repository Docker Getting Started Tutorial (Esercitazione introduttiva a Docker) e quindi selezionare Code Download ZIP (Scarica ZIP codice>). Estrarre il contenuto in una cartella locale.
In VS Code selezionare File Open Folder (Apri>cartella). Passare alla cartella dell'app nel progetto estratto e aprire tale cartella. Verrà visualizzato un file denominato package.json e due cartelle denominate src e spec.
Creare un file denominato Dockerfile nella stessa cartella del file package.json con il contenuto seguente.
```
FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
Nota

Assicurarsi che il file non abbia estensioni di file come .txt.
In Esplora file, a sinistra in VS Code, fare clic con il pulsante destro del mouse sul Dockerfile e quindi scegliere Compila immagine. Immettere getting-started come tag per l'immagine nella casella di testo della voce di testo.

Il tag è un nome descrittivo per l'immagine.

Per creare un'immagine del contenitore dalla riga di comando, usare il comando seguente.
```
docker build -t getting-started .
```
Nota

In una finestra Bash esterna passare alla app cartella contenente il Dockerfile per eseguire questo comando.

È stato usato il Dockerfile per compilare una nuova immagine del contenitore. Si potrebbe aver notato che molti "livelli" sono stati scaricati. Il Dockerfile inizia dall'immagine node:20-alpine . A meno che l'immagine non fosse già nel computer, l'immagine doveva essere scaricata.

Dopo il download dell'immagine, il Dockerfile copia l'applicazione e usa yarn per installare le dipendenze dell'applicazione. Il CMD valore nel Dockerfile specifica il comando predefinito da eseguire all'avvio di un contenitore da questa immagine.

Alla . fine del docker build comando viene indicato che Docker deve cercare il Dockerfile nella directory corrente.

Avviare il contenitore dell'app

Ora che si dispone di un'immagine, è possibile eseguire l'applicazione.

Per avviare il contenitore, usare il comando seguente.
```
docker run -dp 3000:3000 getting-started
```
Il -d parametro indica che il contenitore è in esecuzione in modalità disconnessa, in background. Il -p valore crea un mapping tra la porta host 3000 e la porta del contenitore 3000. Senza il mapping delle porte, non sarebbe possibile accedere all'applicazione.
Dopo alcuni secondi, in VS Code, nell'area Docker, in CONTENITORi fare clic con il pulsante destro del mouse su Attività iniziali e scegliere Apri nel browser. È invece possibile aprire il Web browser su http://localhost:3000.

Verrà visualizzata l'app in esecuzione.
Aggiungere un elemento o due per verificare se funziona come previsto. È possibile contrassegnare gli elementi come completi e rimuovere elementi. Il front-end archivia correttamente gli elementi nel back-end.

Passaggi successivi

Questa esercitazione è stata completata ed è disponibile un gestore elenco todo in esecuzione con alcuni elementi. Si è appreso come creare immagini del contenitore ed eseguire un'app in contenitori.

Mantenere tutto ciò che è stato fatto finora per continuare questa serie di esercitazioni. Provare quindi la seconda parte di questa serie:

Aggiornare e condividere un'app Docker

Ecco alcune risorse che potrebbero essere utili per l'utente: