Integrazione di Docker con Visual Studio Code: una guida passo passo

L’integrazione di Docker con Visual Studio Code (VS Code) migliora significativamente l’esperienza di sviluppo, consentendo agli sviluppatori di creare e gestire in modo efficiente i file Docker, visualizzare container e immagini e accedere facilmente a log o terminali. Questo articolo fornisce una guida completa alla configurazione di Docker in VS Code tramite l’estensione Docker.

Come installare l’estensione Docker in VS Code

Prima di installare l’estensione Docker, assicurati che sia Docker che Visual Studio Code siano configurati correttamente sul tuo computer. Per iniziare, apri la vista Estensioni in VS Code, cerca “Docker” e installa l’estensione Docker ufficiale fornita da Microsoft.

Una volta completata l’installazione, noterai che nell’angolo inferiore sinistro dell’editor apparirà l’icona Docker/Containers, a indicare che Docker Explorer è ora disponibile.

Stabilire una connessione tra Docker Desktop e VS Code

Quando Docker Desktop è in esecuzione, l’estensione Docker con VS Code si connette senza problemi. In genere, non è richiesta alcuna configurazione aggiuntiva, a meno che la configurazione di Docker non preveda configurazioni speciali (ad esempio, host remoti o integrazione WSL).

Per verificare la connessione, clicca sull’icona Docker/Container per avviare Docker Explorer. Qui puoi osservare i container in esecuzione e quelli arrestati, insieme a immagini, registri, volumi e reti.

Gestione di contenitori, immagini e volumi direttamente da VS Code

Con Docker completamente integrato in VS Code, gestire le attività dei container non è mai stato così semplice. Puoi visualizzare comodamente sia i container in esecuzione che quelli arrestati nella sezione CONTAINERS.

Inoltre, facendo clic con il pulsante destro del mouse su un contenitore qualsiasi, avrai la possibilità di avviarlo, arrestarlo, riavviarlo o rimuoverlo con un semplice clic.

È anche possibile estrarre nuove immagini, creare immagini da configurazioni esistenti o ripulire facilmente le immagini inutilizzate. Ad esempio, per eliminare un’immagine che non è più necessaria, è sufficiente fare clic destro su di essa e selezionare Rimuovi.

Inoltre, la gestione dei volumi collegati ai contenitori è semplice: basta fare clic con il pulsante destro del mouse sul volume desiderato per ispezionarlo o modificarlo.

Puoi anche esplorare e gestire reti, registri, contesti Docker e accedere a una sezione di aiuto e feedback, ottimizzando ulteriormente il tuo flusso di lavoro di sviluppo.

Creazione ed esecuzione di un’applicazione containerizzata in VS Code

Come esempio pratico, creiamo una semplice applicazione Node.js Express per illustrare le funzionalità dell’estensione Docker. Iniziamo creando una nuova cartella in VS Code per il progetto. All’interno di questa cartella, creiamo un file denominato “Node.js” index.jse inseriamo il seguente codice:

Questo frammento di codice di base imposta una piccola app Express in ascolto sulla porta 4000, rispondendo con il messaggio “Benvenuti nella nostra app Express!” quando si accede all’URL radice (/).Costituisce una base per testare il Dockerfile.

Successivamente, avrai bisogno di un Dockerfile. Invece di creare manualmente un Dockerfile e specificarne le istruzioni, l’estensione Docker può semplificare questo processo. Apri la Command Palette premendo su ⇧⌘PMac o Ctrl++ su Windows e inserisci il comando.ShiftPAdd Docker files to Workspace

Seleziona Node.js come piattaforma per la tua applicazione tra le opzioni fornite.

Punta al file “package.json” che si trova nella root del tuo progetto. Questo file è il file di configurazione principale per la tua applicazione e guiderà l’estensione Docker nella generazione dei file essenziali relativi a Docker.

Successivamente, indica il numero di porta che la tua app utilizzerà in modo che Docker possa esporla in modo appropriato.

Selezionare Sì quando richiesto per includere il file Docker Compose.

L’estensione Docker genererà ora un Dockerfile, un file “.dockerignore” e un file “compose.yaml”, a seconda della selezione effettuata.

Per procedere con la creazione dell’immagine Docker, fai clic con il pulsante destro del mouse sul Dockerfile e seleziona Crea immagine oppure, in alternativa, esegui Docker Images: Crea immagine dalla palette dei comandi.

Dopo il processo di compilazione, vai alla sezione Immagini in Docker Explorer per vedere il tuo progetto appena creato riflesso lì:

Ora, per eseguire l’immagine, apri la palette dei comandi ed esegui container images: run, oppure fai semplicemente clic con il pulsante destro del mouse sull’immagine e seleziona Esegui.

Seleziona l’immagine più recente dall’elenco visualizzato.

Infine, puoi verificare che l’applicazione sia in esecuzione controllando la sezione Contenitori in Docker Explorer.

Per accedere alla tua app, fai clic con il pulsante destro del mouse sul contenitore in esecuzione in Docker Explorer e seleziona Apri nel browser.

Di conseguenza, potrai vedere il contenitore in azione con la tua applicazione accessibile tramite la porta specificata in precedenza.

Conclusione

L’integrazione di Docker in Visual Studio Code semplifica il processo di sviluppo, consentendo agli sviluppatori di costruire, eseguire e controllare in modo efficiente i container direttamente dal proprio ambiente di programmazione. Dopo aver completato la configurazione, sarà possibile creare file Docker, navigare tra container e immagini e visualizzare log o output del terminale con un solo clic. Questa integrazione non solo semplifica l’esecuzione e il test delle applicazioni, ma mantiene anche un flusso di lavoro organizzato e produttivo.

Fonte e immagini