La creación de contenedores de sus proyectos con Docker simplifica la experiencia de desarrollo y facilita la implementación directa en entornos de nube. Echemos un vistazo a cómo podemos empaquetar un sitio React como contenedor Docker.
Este artículo se centra en los proyectos que se han comenzado a utilizar create-react-app
(CRA). Si ha expulsado su configuración de CRA o está utilizando un proceso de compilación personalizado, deberá editar el archivo npm run build
comando en consecuencia.
Las imágenes de Docker se crean usando un archivo Dockerfile
. Define una imagen base para usar, como el servidor web Apache. Luego, enumera una serie de comandos que agregan paquetes, aplican cambios de configuración y copian los archivos que necesita la aplicación.
Definición de nuestros requisitos
CONTENIDOS DE LA PAGINA
CRA incluye un sistema integrado de construcción y recarga en vivo, al que se accede a través de npm run start
. Esto le permite iterar rápidamente en su sitio durante el desarrollo.
Cuando pasa a producción, necesita crear recursos estáticos utilizando npm run build
. Esto produce paquetes HTML, CSS y JavaScript minimizados en su archivo build
directorio. Estos archivos son los que carga en su servidor web.
Un enfoque básico para Dockerising podría ser npm run build
en la zona. Luego debe copiar el contenido del archivo build
directorio en su imagen de Docker, usando una imagen base de servidor web, y llámelo un día.
Este enfoque no funciona bien, especialmente al crear su imagen de Docker en un entorno de CI. El proceso de compilación de su aplicación no está completamente encapsulado dentro de la compilación del contenedor, ya que depende del exterior npm run build
mando. Ahora procederemos con un ejemplo más completo donde toda la rutina se ejecuta dentro de Docker.
Un Dockerfile para CRA
FROM node:latest AS build WORKDIR /build COPY package.json package.json COPY package-lock.json package-lock.json RUN npm ci COPY public/ public COPY src/ src RUN npm run build FROM httpd:alpine WORKDIR /var/www/html COPY --from=build /build/build/ .
Esta Dockerfile
incorpora todo lo necesario para contener completamente el proyecto. Use las compilaciones de múltiples etapas de Docker para ejecutar primero la compilación de React y luego copie la salida a un archivo alpine
Contenedor del servidor Apache. Esto asegura que la imagen final sea lo más pequeña posible.
La primera sección del archivo define la fase de compilación. Usa la imagen base oficial de Node.js. los package.json
es package-lock.json
los archivos se copian en formato. npm ci
luego se usa para instalar los paquetes npm del proyecto. ci
se usa en lugar de install
porque fuerza una coincidencia exacta con el contenido de package-lock.json
.
Una vez instaladas las dependencias, public
es src
los directorios se copian en el contenedor. Las carpetas se copian después del archivo. npm ci
porque es probable que cambien con mucha más frecuencia que las adicciones. Esto asegura que la compilación pueda aprovechar al máximo el almacenamiento en caché de la capa de Docker, el potencialmente costoso npm ci
el comando no se ejecutará a menos que el package.json
o package-lock.json
los archivos cambian.
El último paso en esta fase de creación es npm run build
. CRA compilará nuestra aplicación React e insertará su salida en el archivo build
directorio.
La segunda fase del Dockerfile
es mucho más sencillo. los httpd:alpine
se selecciona la imagen base. Incluye el servidor web Apache en una imagen que pesa aproximadamente 5MB. El HTML, CSS y JavaScript compilados se copian desde el contenedor en tiempo de compilación y en la imagen final.
Usando la imagen de Docker
Utilizar el docker build
comando para construir tu imagen:
docker build -t my-react-app:latest .
Esto crea la imagen y la etiqueta como my-react-app:latest
. Usa la extensión Dockerfile
encontrado en el directorio de trabajo (especificado como .
).
La compilación puede tardar unos minutos en completarse. Las compilaciones posteriores serán más rápidas, ya que niveles como el npm ci
el comando se almacenará en caché entre ejecuciones.
Una vez que se haya creado su imagen, estará listo para usarla:
docker run -d -p 8080:80 my-react-app:latest
Docker creará un nuevo contenedor usando la extensión my-react-app:latest
Imagen. El puerto 8080 en el host (la máquina) está asociado con el puerto 80 dentro del gabinete. Esto significa que puede visitar http://localhost:8080
en su navegador para ver su React! los -d
La bandera está presente, por lo que el contenedor se ejecuta en segundo plano.
Cambiar a NGINX
El ejemplo anterior usa Apache, pero puede cambiar fácilmente a NGINX.
FROM nginx:alpine COPY --from=build /build/build/ /usr/share/nginx/html
Puede adoptar servidores web alternativos de manera similar; Dado que CRA produce una salida completamente estática, tiene una gran flexibilidad para seleccionar cómo alojar su sitio. Copia el contenido del archivo /build/build
directorio del archivo build
stage en el directorio HTML predeterminado del software de servidor elegido.
Ventajas de este enfoque
El uso de Docker no solo para encapsular la compilación final, sino también para crear la compilación en sí, le da a su proyecto una portabilidad completa entre entornos. Los desarrolladores solo necesitan instalar Docker para construir y ejecutar su sitio React.
De manera más realista, esta imagen está lista para usarse con un servidor CI para crear imágenes automáticamente. Siempre que haya un entorno Docker disponible, puede convertir el código fuente en una imagen distribuible sin ninguna intervención manual.
Al usar compilaciones por fases, la imagen final permanece optimizada y debe tener un tamaño de unos pocos megabytes. El mucho mas grande node
image se usa solo durante la fase de construcción, donde se necesitan Node y npm.