Introducción
Si trabaja en una empresa de tecnología como ingeniero de software, es muy probable que se le pida que cree y distribuya aplicaciones con frecuencia. Estas aplicaciones suelen ser aplicaciones web basadas en marcos, como React, Redux o Vue.js.
Se puede usar un contenedor Docker para empaquetar la aplicación para que pueda ejecutarse en cualquier entorno sin necesidad de dependencias o bibliotecas preinstaladas. En este tutorial, cubriremos todo lo que necesita saber sobre la aplicación web basada en Dockerizing React.
¿Qué es Docker?
Docker es un software de código abierto que le permite contener su aplicación. La contenedorización es un proceso que le permite ejecutar una aplicación dentro de un entorno de máquina virtual. El contenedor puede ejecutarse en cualquier máquina sin necesidad de instalar dependencias en la máquina host.
La contenedorización es una excelente opción para implementar aplicaciones en entornos de producción. Garantiza que la aplicación sea completamente autónoma y solo requiera un conjunto mínimo de dependencias para funcionar correctamente. Esto reduce el riesgo de introducir dependencias que podrían afectar a otras aplicaciones o servicios en el mismo host.
¿Por qué debería dockerizar su aplicación web?
Si planea implementar su aplicación en producción, definitivamente debería considerar usar Docker. Le permitirá ejecutar su aplicación en cualquier entorno sin necesidad de instalar dependencias en la máquina.
Dockerizar la aplicación garantiza que la aplicación se ejecute en producción exactamente como se esperaba. También le permite compartir fácilmente su aplicación con otras personas de su organización al publicarla en Docker Hub u otros registros públicos.
Crear una aplicación React
Primero, cree una aplicación React básica en su sistema. Las instrucciones a continuación lo ayudarán a instalar Node.js y el módulo create-react-app .
Antes de comenzar, debe instalar Node.js en su computadora. En los sistemas basados en Debian, puede usar los siguientes comandos para instalar Node.js:
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt install nodejs Después de instalar Node.js, use el comando npm para instalar el módulo create-react-app globalmente:
sudo npm install create-react-app --target=global Después de instalar CRA, puede continuar y crear un proyecto React ejecutando el siguiente comando:
npx create-react-app my-app El comando anterior creará un directorio my-app con la aplicación básica de reacción. Puede ir al directorio recién creado y comenzar a React a la aplicación usando los siguientes comandos:
cd my-app
npm start La aplicación de reacción predeterminada se iniciará en el puerto 3000 . Puede abrir un navegador web y acceder a la aplicación React en http: // localhost: 300 o usar la dirección IP del sistema.
Su aplicación React predeterminada ya está lista.
Crear un Dockerfile para la aplicación React
Una vez que haya creado su aplicación de reacción, puede continuar y crear un Dockerfile para su aplicación. Este archivo contendrá todas las instrucciones para crear su aplicación dentro de un contenedor. Cree un nuevo archivo llamado Dockerfile dentro del directorio raíz de su proyecto y agregue el siguiente código.
vim Dockerfile Agregue el siguiente código al archivo:
# 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']Repasemos cada línea de código anterior para averiguar qué está haciendo.
- 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.
- EJECUTAR - Se utiliza para ejecutar un comando dentro del contenedor. Aquí estamos usando npm install, que instalará todas las dependencias dentro del contenedor.
- EXPOSE: se utiliza para exponer el puerto 3000 en el contenedor. Este puerto se utilizará para alojar la aplicación React.
Crear y ejecutar el contenedor Docker
Luego, cree la imagen de Docker ejecutando el comando que se indica a continuación. Aquí "react-app" es el nombre de la imagen:
docker build -t react-app . Esta imagen se creará en el registro de imágenes local. Luego puede crear un contenedor Docker con el siguiente comando:
sudo docker run -it -p 3000:3000 -d react-app Ahora verifique que el contenedor se esté ejecutando en su sistema:
docker containers ls Finalmente, abra un navegador y conéctese a localhost en el puerto 3000 (o use su puerto definido). Deberías ver la aplicación de reacción.
Puede usar un Dockerfile para automatizar la creación y actualización de su imagen. Esto es útil si está trabajando con un equipo y las personas están agregando código a la misma aplicación.
Cree el archivo de configuración de Docker-compose
Avancemos y ejecutemos la aplicación React con Docker Compose. Abra un nuevo archivo llamado docker-compose.yml dentro del directorio raíz de su proyecto y agregue el siguiente código:
version: '3'
services:
client:
stdin_open: true
build:
context: .
ports:
- "3000:3000"Guarde el archivo y ciérrelo.
Luego ejecute el siguiente comando para crear y ejecutar contenedores docker.
sudo docker-compose build sudo docker-compose up -dConclusión
En este artículo, hemos discutido por qué debería dockerizar su aplicación y cómo hacerlo. También discutimos los beneficios de usar Docker, las diferentes versiones de Docker, la estructura de archivos de Docker y cómo ejecutar contenedores. También discutimos cómo construir e implementar una aplicación React usando Create-React-App y Docker.
