Todo sobre Apple, Android, Juegos Apks y Sitios de Peliculas

Cómo acoplar una aplicación React

La creación de contenedores para sus proyectos con Docker simplifica la experiencia de desarrollo y facilita una implementación sencilla en entornos de nube. Veamos cómo podemos empaquetar un sitio React como un contenedor Docker.

Este artículo se centra en proyectos que se han iniciado utilizando

 create-react-app 

(CRA). Si expulsó su configuración de CRA o está utilizando un proceso de compilación personalizado, deberá ajustar el comando npm run build en consecuencia.

Las imágenes de Docker se crean mediante un Dockerfile. Esto define una imagen base a 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 su aplicación.

Definiendo nuestros requisitos

CRA incluye un sistema integrado de compilació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.

Al pasar a producción, debe compilar sus recursos estáticos utilizando npm run build. Esto produce paquetes HTML, CSS y JavaScript minimizados en su directorio de compilación. Estos archivos son los que carga en su servidor web.

Un enfoque básico para Dockerising podría ser ejecutar npm build localmente. Luego copiaría el contenido del directorio de compilación en su imagen de Docker (usando una imagen base del servidor web) y terminaría.

Este enfoque no se adapta bien, especialmente cuando se crea la imagen de Docker dentro de 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 comando externo npm run build. Ahora procederemos con un ejemplo más completo donde toda la rutina se ejecuta dentro de Docker.

Un archivo Docker 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/ .

Este Dockerfile incorpora todo lo necesario para contener completamente el proyecto. Utiliza las compilaciones de varias etapas de Docker para ejecutar primero la compilaci√≥n de React y luego copiar el resultado en un contenedor de servidor Apache alpino. Esto asegura que la imagen final sea lo m√°s peque√Īa posible.

La primera sección del archivo define la etapa de construcción. Utiliza la imagen base oficial de Node.js. Los archivos package.json y package-lock.json se copian. Luego, npm ci se usa para instalar los paquetes npm del proyecto. Se usa ci en lugar de install porque fuerza una coincidencia exacta con el contenido de package-lock.json.

Una vez instaladas las dependencias, los directorios public y src se copian en el contenedor. Las carpetas se copian después del comando npm ci porque es probable que cambien con mucha más frecuencia que las dependencias. Esto garantiza que la compilación pueda aprovechar al máximo el almacenamiento en caché de capas de Docker: el comando npm ci, potencialmente costoso, no se ejecutará a menos que cambien los archivos package.json o package-lock.json.

El √ļltimo paso en esta etapa de compilaci√≥n es npm ejecutar la compilaci√≥n. CRA compilar√° nuestra aplicaci√≥n React y colocar√° su salida en el directorio de compilaci√≥n.

La segunda etapa del Dockerfile es mucho más sencilla. La imagen base httpd:alpine está seleccionada. Incluye el servidor web Apache en una imagen que pesa alrededor de 5 MB. El HTML, CSS y JavaScript compilados se copian del contenedor de la etapa de compilación a la imagen final.

Usando la imagen de Docker

Utilice el comando Docker Build para crear su imagen:

docker build -t my-react-app:latest .

Esto crea la imagen y la etiqueta como my-react-app:latest. Utiliza el Dockerfile que se encuentra en su 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 capas como el comando npm ci se almacenarán 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 imagen my-react-app:latest. El puerto 8080 en el host (su m√°quina) est√° vinculado al puerto 80 dentro del contenedor. ¬°Esto significa que puedes visitar http://localhost:8080 en tu navegador para ver tu proyecto React! El indicador -d est√° presente para que el contenedor se ejecute en segundo plano.

Cambiar a NGINX

El ejemplo anterior usa Apache, pero puedes 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; Como CRA produce resultados completamente estáticos, usted tiene una gran flexibilidad para seleccionar cómo se aloja su sitio. Copie el contenido del directorio /build/build desde la etapa de compilación al directorio HTML predeterminado del software de servidor elegido.

Beneficios de este enfoque

El uso de Docker no solo para encapsular su compilación final, sino también para crear la compilación en sí, le brinda a su proyecto una portabilidad completa entre entornos. Los desarrolladores solo necesitan tener instalado Docker para crear y ejecutar su sitio React.

De manera más realista, esta imagen está lista para usar con un servidor CI para crear imágenes de forma automatizada. Siempre que haya un entorno Docker disponible, puede convertir su código fuente en una imagen implementable sin ninguna intervención manual.

Al utilizar compilaciones de varias etapas, la imagen final permanece optimizada y solo debe tener un tama√Īo de unos pocos megabytes. La imagen del nodo, mucho m√°s grande, solo se usa durante la etapa de compilaci√≥n, donde Node y npm son necesarios.

Resumen del Contenido