Introduzione
Se lavori in un'azienda tecnologica come ingegnere del software, ci sono buone probabilità che ti venga chiesto di creare e distribuire frequentemente le applicazioni. Queste applicazioni sono in genere app Web basate su framework come React, Redux o Vue.js.
Un contenitore Docker può essere utilizzato per creare un pacchetto dell'app in modo che possa essere eseguita in qualsiasi ambiente senza richiedere dipendenze o librerie preinstallate. In questo tutorial, tratteremo tutto ciò che devi sapere sull'app Web basata su Dockerizing React.
Cos'è Docker?
Docker è un software open source che ti consente di containerizzare la tua applicazione. La containerizzazione è un processo che consente di eseguire un'applicazione all'interno di un ambiente di macchina virtuale. Il contenitore può essere eseguito su qualsiasi macchina senza la necessità di installare dipendenze sulla macchina host.
La containerizzazione è un'ottima opzione per la distribuzione di applicazioni negli ambienti di produzione. Garantisce che l'applicazione sia completamente autonoma e richiede solo un insieme minimo di dipendenze per funzionare correttamente. Ciò riduce il rischio di introdurre dipendenze che potrebbero influire su altre applicazioni o servizi sullo stesso host.
Perché dovresti Dockerizzare la tua app Web?
Se prevedi di distribuire la tua applicazione in produzione, dovresti assolutamente considerare l'utilizzo di Docker. Ti consentirà di eseguire la tua app in qualsiasi ambiente senza la necessità di installare dipendenze sulla macchina.
Dockerizzare l'app garantisce che l'app venga eseguita in produzione esattamente come previsto. Ti consente inoltre di condividere facilmente la tua applicazione con altre persone nella tua organizzazione pubblicandola su Docker Hub o altri registri pubblici.
Creare un'applicazione React
Innanzitutto, crea un'applicazione di React di base nel tuo sistema. Le istruzioni seguenti ti aiuteranno a installare Node.js e il modulo create-react-app.
Prima di iniziare, devi installare Node.js sul tuo computer. Sui sistemi basati su Debian, puoi usare i seguenti comandi per installare Node.js:
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt install nodejs Dopo aver installato Node.js, usa il comando npm per installare il modulo create-react-app a livello globale:
sudo npm install create-react-app --target=global Dopo aver installato CRA, puoi andare avanti e creare un progetto React eseguendo il comando seguente:
npx create-react-app my-app Il comando precedente creerà una directory my-app con l'applicazione di react di base. È possibile passare alla directory appena creata e iniziare a reagire all'applicazione utilizzando i comandi indicati di seguito:
cd my-app
npm start L'applicazione di react predefinita verrà avviata sulla porta 3000. È possibile aprire un browser Web e accedere all'applicazione di React all'indirizzo http://localhost:300 o utilizzare l'indirizzo IP del sistema.
La tua applicazione di React predefinita è ora pronta.
Creare un Dockerfile per l'applicazione React
Dopo aver creato la tua app di react, puoi procedere e creare un Dockerfile per la tua app. Questo file conterrà tutte le istruzioni per creare la tua app all'interno di un container. Crea un nuovo file chiamato Dockerfile all'interno della directory principale del tuo progetto e aggiungi il codice seguente.
vim Dockerfile Aggiungi il seguente codice al file:
# Using node:16-alpine base image
FROM node:16-alpine
# Set /app as the default work directory
WORKDIR /app
# copy package.json to the working directory for packages installation
COPY package.json /app
# Install npm dependencies
RUN yarn install
# Copy all the project files to the working directory
COPY . .
# Expose the port of your application to bind with the host port
EXPOSE 3000
# run your app
CMD ['yarn', 'run', 'start']Analizziamo ogni riga di codice sopra per capire cosa sta facendo.
- FROM – Questo è il nome dell'immagine di base che utilizzerai per creare il tuo contenitore. Dovresti usare Alpine Linux, poiché è leggero e ha tutti gli strumenti necessari per la tua app.
- WORKDIR – Specifica la directory di lavoro per eseguire le istruzioni successive nel Dockerfile. Questa sarà la directory montata all'interno del contenitore come /app.
- COPY – Viene utilizzato per copiare tutti i file e le cartelle dalla directory corrente alla directory di lavoro. COPY. . copierà tutti i file e le cartelle dalla directory corrente alla directory di lavoro utilizzando la copia ricorsiva. Ciò significa che verranno copiate anche le cartelle nascoste.
- RUN – Viene utilizzato per eseguire un comando all'interno del contenitore. Qui stiamo usando npm install, che installerà tutte le dipendenze all'interno del contenitore.
- EXPOSE – Viene utilizzato per esporre la porta 3000 sul container. Questa porta verrà utilizzata per ospitare l'app React.
Creare ed eseguire il contenitore Docker
Quindi, crea l'immagine Docker eseguendo il comando indicato di seguito. Qui "react-app" è il nome dell'immagine:
docker build -t react-app . Questa immagine verrà creata nel registro immagini locale. Quindi puoi creare un contenitore Docker con il comando seguente:
sudo docker run -it -p 3000:3000 -d react-app Ora verifica che il contenitore sia in esecuzione sul tuo sistema:
docker containers ls Infine, apri un browser e connettiti a localhost sulla porta 3000 (o usa la tua porta definita). Dovresti vedere l'applicazione di react.
Puoi utilizzare un Dockerfile per automatizzare la creazione e l'aggiornamento della tua immagine. Questo è utile se stai lavorando con un team e le persone stanno aggiungendo codice alla stessa applicazione.
Creare il file di configurazione Docker-compose
Andiamo avanti ed eseguiamo l'app React con Docker Compose. Apri un nuovo file chiamato docker-compose.yml all'interno della directory principale del tuo progetto e aggiungi il codice seguente:
version: '3'
services:
client:
stdin_open: true
build:
context: .
ports:
- "3000:3000"Salva il file e chiudilo.
Quindi esegui il comando seguente per creare ed eseguire contenitori docker.
sudo docker-compose build sudo docker-compose up -dConclusione
In questo articolo, abbiamo discusso del motivo per cui dovresti Dockerizzare la tua app e come farlo. Abbiamo anche discusso dei vantaggi dell'utilizzo di Docker, di diverse versioni di Docker, della struttura dei file Docker e di come eseguire i container. Abbiamo anche discusso di come creare e distribuire un'app React utilizzando Create-React-App e Docker.
