# Usar contenedores para el desarrollo de Vue.js ## Prerrequisitos Completa [Contenedorizar la aplicación Vue.js](/guides/vuejs/develop/containerize/). --- ## Descripción general En esta sección, configurarás entornos tanto de producción como de desarrollo para tu aplicación Vue.js usando Docker Compose. Este enfoque optimiza tu flujo de trabajo: ofrece un sitio estático y ligero a través de Nginx en producción, y proporciona un servidor de desarrollo rápido con recarga en vivo mediante Compose Watch para un desarrollo local eficiente. Aprenderás a: - Configurar entornos aislados: Configura contenedores independientes optimizados para casos de uso de producción y desarrollo. - Recarga en vivo en desarrollo: Usa Compose Watch para sincronizar automáticamente los cambios de archivos, lo que permite actualizaciones en tiempo real sin intervención manual. - Visualizar y depurar con facilidad: Desarrolla dentro de contenedores con una experiencia de visualización y depuración fluida, sin necesidad de reconstruir después de cada cambio. --- ## Actualizar servicios automáticamente (Modo de desarrollo) Aprovecha Compose Watch para habilitar la sincronización de archivos en tiempo real entre tu máquina local y el entorno de desarrollo de Vue.js contenedorizado. Esta potente función elimina la necesidad de reconstruir o reiniciar manualmente los contenedores, proporcionando un flujo de trabajo de desarrollo rápido, fluido y eficiente. Con Compose Watch, las actualizaciones de tu código se reflejan instantáneamente dentro del contenedor, lo cual es perfecto para realizar pruebas rápidas, depurar y previsualizar cambios en vivo. ## Paso 1: Crear un Dockerfile de desarrollo Crea un archivo llamado `Dockerfile.dev` en la raíz de tu proyecto con el siguiente contenido: ```dockerfile # ========================================= # Etapa 1: Desarrollar la aplicación Vue.js # ========================================= ARG NODE_VERSION=24.12.0-alpine # Usa una imagen ligera de Node.js para desarrollo FROM node:${NODE_VERSION} AS dev # Establece la variable de entorno para indicar el modo de desarrollo ENV NODE_ENV=development # Establece el directorio de trabajo dentro del contenedor WORKDIR /app # Copia primero los archivos relacionados con paquetes para aprovechar el mecanismo de caché de Docker COPY package.json package-lock.json* ./ # Instala las dependencias del proyecto RUN --mount=type=cache,target=/root/.npm npm install # Copia el resto del código fuente de la aplicación en el contenedor COPY . . # Cambia la propiedad del directorio de la aplicación al usuario node RUN chown -R node:node /app # Cambia al usuario node USER node # Expone el puerto utilizado por el servidor de desarrollo de Vite EXPOSE 5173 # Usa un comando por defecto, que se puede sobrescribir en el archivo compose.yml de Docker CMD [ "npm", "run", "dev", "--", "--host" ] ``` Este archivo configura un entorno de desarrollo ligero para tu aplicación Vue.js usando el servidor de desarrollo. ### Paso 2: Actualizar tu archivo `compose.yaml` Abre tu archivo `compose.yaml` y define dos servicios: uno para producción (`vuejs-prod`) y otro para desarrollo (`vuejs-dev`). Aquí tienes un ejemplo de configuración para una aplicación Vue.js: ```yaml services: vuejs-prod: build: context: . dockerfile: Dockerfile image: docker-vuejs-sample ports: - "8080:8080" vuejs-dev: build: context: . dockerfile: Dockerfile.dev ports: - "5173:5173" develop: watch: - path: ./src target: /app/src action: sync - path: ./package.json target: /app/package.json action: restart - path: ./vite.config.js target: /app/vite.config.js action: restart ``` - El servicio `vuejs-prod` construye y sirve tu aplicación estática de producción usando Nginx. - El servicio `vuejs-dev` ejecuta tu servidor de desarrollo Vue.js con recarga en vivo y reemplazo de módulos en caliente (HMR). - `watch` activa la sincronización de archivos con Compose Watch. > [!NOTE] > Para más detalles, consulta la guía oficial: [Usar Compose Watch](/compose/how-tos/file-watch/). Después de completar los pasos anteriores, el directorio de tu proyecto debería contener los siguientes archivos: ```text ├── docker-vuejs-sample/ │ ├── Dockerfile │ ├── Dockerfile.dev │ ├── .dockerignore │ ├── compose.yaml │ ├── nginx.conf │ └── README.Docker.md ``` ### Paso 4: Iniciar Compose Watch Ejecuta el siguiente comando desde la raíz del proyecto para iniciar el contenedor en modo watch: ```console $ docker compose watch vuejs-dev ``` ### Paso 5: Probar Compose Watch con Vue.js Para confirmar que Compose Watch está funcionando correctamente: 1. Abre el archivo `src/App.vue` en tu editor de texto. 2. Localiza la siguiente línea: ```html ``` 3. Cámbiala por: ```html ``` 4. Guarda el archivo. 5. Abre tu navegador en [http://localhost:5173](http://localhost:5173). Deberías ver aparecer el texto actualizado al instante, sin necesidad de reconstruir manualmente el contenedor. Esto confirma que la observación de archivos y la sincronización automática están funcionando como se esperaba. --- ## Resumen En esta sección, configuraste un flujo de trabajo completo de desarrollo y producción para tu aplicación Vue.js usando Docker y Docker Compose. Esto es lo que has logrado: - Crear un `Dockerfile.dev` para optimizar el desarrollo local con recarga en caliente (hot reloading) - Definir servicios separados `vuejs-dev` y `vuejs-prod` en tu archivo `compose.yaml` - Habilitar la sincronización de archivos en tiempo real usando Compose Watch para una experiencia de desarrollo más fluida - Verificar que las actualizaciones en vivo funcionan sin problemas al modificar y previsualizar un componente Con esta configuración, ahora estás preparado para construir, ejecutar e iterar en tu aplicación Vue.js completamente dentro de contenedores, de manera eficiente y consistente en todos los entornos. --- ## Recursos relacionados Profundiza tus conocimientos y mejora tu flujo de trabajo de desarrollo contenedorizado con estas guías: - [Usar Compose Watch](/compose/how-tos/file-watch/) – Sincroniza automáticamente los cambios de origen durante el desarrollo - [Compilaciones de múltiples etapas (Multi-stage builds)](/build/building/multi-stage/) – Crea imágenes de Docker eficientes y listas para producción - [Buenas prácticas para Dockerfile](/build/building/best-practices/) – Escribe Dockerfiles limpios, seguros y optimizados - [Referencia del archivo Compose](/compose/compose-file/) – Conoce la sintaxis completa y las opciones disponibles para configurar servicios en `compose.yaml` - [Volúmenes de Docker](/storage/volumes/) – Persiste y gestiona datos entre ejecuciones de contenedores ## Próximos pasos En la siguiente sección, aprenderás a ejecutar pruebas unitarias para tu aplicación Vue.js dentro de contenedores Docker. Esto garantiza pruebas consistentes en todos los entornos y elimina las dependencias de la configuración de la máquina local.