Condividi tramite


Esercitazione: Creare un'app contenitore con Visual Studio Code

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 datie gestire più contenitori con Docker Compose.

VS Code offre un'estensione Container Tools 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.
  • Creare un'immagine del contenitore.
  • Avviare un contenitore di app.

Prerequisiti

L'esercitazione funziona con Windows 10 o versioni successive e Docker Desktop impostato per usare contenitori Linux.

Creare un contenitore

Un contenitore è un processo nel computer. È isolato da tutti gli altri processi nel computer host. Questo isolamento utilizza 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 Container Tools per VS Code, è possibile usare i contenitori in VS Code. Oltre ai menu di scelta rapida in Esplora contenitori, è 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.

  1. 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 Docker Desktop è in esecuzione e scegliere Passare ai contenitori Linux.

  2. In VS Code selezionare Terminale>Nuovo terminale.

  3. 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 mappa la porta 80 dell'host alla porta 80 nel contenitore.
    • docker/getting-started Specifica l'immagine da usare.

    Consiglio

    È 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
    
  4. In VS Code selezionare l'icona Contenitori a sinistra per visualizzare Esplora contenitori.

    Screenshot mostra l'estensione Container Tools con il tutorial docker/getting-started in esecuzione.

    L'estensione di VS Code "Strumenti dei Container" mostra i contenitori in esecuzione sul tuo 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.

  5. Fare clic con il pulsante destro del mouse su docker/getting-started per aprire un menu contestuale. Selezionare Apri nel browser.

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

    Verrà visualizzata una pagina, ospitata in locale, su DockerLabs.

  6. Fare clic con il pulsante destro del mouse su docker/getting-started per aprire un menu contestuale. 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>
    
  7. Aggiornare il browser. La pagina Introduzione che hai visto un attimo fa è scomparsa.

Creare un'immagine del contenitore per l'app

Questa esercitazione usa una semplice applicazione Todo.

Screenshot mostra l'applicazione di esempio con diversi elementi aggiunti e una casella di testo e un pulsante per aggiungere nuovi elementi.

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.

  1. Passare al repository Docker Getting Started Tutorial e quindi selezionare Code>Download ZIP. Estrarre il contenuto in una cartella locale.

    Screenshot mostra parte del sito GitHub, con il pulsante codice verde e l'opzione Scarica ZIP evidenziata.

  2. In VS Code selezionare File>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 specifica.

    Screenshot di Visual Studio Code che mostra il file package.json aperto con l'app caricata.

  3. Creare un file denominato Dockerfile nella stessa cartella del file package.json con il contenuto seguente.

    FROM node:lts-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.

  4. In Esplora file, a sinistra in VS Code, fare clic con il pulsante destro del mouse sul Dockerfile e quindi selezionare Build Image. Immettere getting-started come tag per l'immagine nella casella di testo.

    Il tag è un nome descrittivo per l'immagine.

    Per creare un'immagine del contenitore dalla riga di comando, usare il comando seguente dalla cartella app con il dockerfile .

    docker build -t getting-started .
    

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

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

Il . alla fine del comando docker build indica 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.

  1. Per avviare il contenitore, usare il comando seguente.

    docker run -dp 3000:3000 getting-started
    

    Il parametro -d indica che il contenitore è in esecuzione in modalità disconnessa, in background. Il valore -p 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.

  2. Dopo alcuni secondi, in Visual Studio Code, in Esplora Contenitori, fare clic con il pulsante destro del mouse su getting-started e selezionare Apri nel browser. È invece possibile aprire il browser web su http://localhost:3000.

    Dovresti vedere l'app in esecuzione.

    Screenshot mostra l'app di esempio senza elementi e il testo Nessun elemento ancora Aggiungi uno sopra.

  3. 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

Hai completato questa esercitazione e ora hai un gestore delle cose da fare funzionante con alcuni elementi aggiunti. Hai appreso a creare immagini di container ed eseguire un'app containerizzata.

Mantieni tutto quello che hai fatto finora per continuare questa serie di tutorial. Provare quindi la seconda parte di questa serie:

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