Compartir comentarios
Las respuestas se generan en base a la documentación.

Usar contenedores para el desarrollo de Vue.js

Tabla de contenidos

Prerrequisitos

Completa Contenedorizar la aplicación Vue.js.

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:

# =========================================
# 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:

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.

Después de completar los pasos anteriores, el directorio de tu proyecto debería contener los siguientes archivos:

├── 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:

$ 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:

    <HelloWorld msg="You did it!" />

  3. Cámbiala por:

    <HelloWorld msg="Hello from Docker Compose Watch" />

  4. Guarda el archivo.

  5. Abre tu navegador en 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:

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.

Ejecutar pruebas de Vue.js en un contenedor »