Dockerfile para Proyectos Vite

¡Hola a todos! En este artículo, quiero compartir con ustedes cómo crear un Dockerfile optimizado para tus proyectos Vite.

Vite es una herramienta moderna de construcción de frontend que proporciona una configuración rápida y eficiente para proyectos React, Vue, y más.

Introducción

Vite es conocido por su rapidez y simplicidad, lo que lo hace ideal para proyectos de frontend modernos. Empaquetar tu aplicación Vite en un contenedor Docker puede facilitar mucho su despliegue y asegurarte de que se ejecute de manera consistente en cualquier entorno.

💡 Antes de continuar, asegúrate de tener Docker instalado en tu sistema. Puedes seguir mi guía sobre la Instalación de Docker en Debian.

Aquí tienes un ejemplo de Dockerfile para un proyecto Vite:

# Utilizar una imagen base de Node.js
FROM node:18-alpine as build-stage

# Establecer el directorio de trabajo
WORKDIR /app

# Copiar el package.json y el package-lock.json
COPY package*.json ./

# Instalar las dependencias
RUN npm install

# Copiar el resto de la aplicación
COPY . .

# Construir la aplicación
RUN npm run build

# Utilizar una imagen base de Nginx para el despliegue
FROM nginx:stable-alpine as production-stage

# Copiar los archivos construidos desde el build-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html

# Exponer el puerto que utiliza Nginx
EXPOSE 80

# Definir el comando por defecto para ejecutar Nginx
CMD ["nginx", "-g", "daemon off;"]

Descripción del Dockerfile

1. Imagen Base (Build): Utilizamos una imagen base ligera de Node.js para el proceso de construcción.
2. Directorio de Trabajo: Establecemos el directorio de trabajo en /app.
3. Copiar Dependencias: Copiamos package.json y package-lock.json para instalar las dependencias.
4. Instalar Dependencias: Instalamos las dependencias del proyecto.
5. Copiar Aplicación: Copiamos el resto de los archivos de la aplicación al contenedor.
6. Construir Aplicación: Ejecutamos el comando para construir la aplicación Vite.
7. Imagen Base (Producción): Utilizamos una imagen base de Nginx para el despliegue.
8. Copiar Archivos Construidos: Copiamos los archivos construidos desde la etapa de construcción al directorio de Nginx.
9. Exponer Puerto: Exponemos el puerto 80 que utiliza Nginx.
10. Comando por Defecto: Definimos el comando por defecto para ejecutar Nginx.

💡 Asegúrate de ajustar cualquier configuración adicional según las necesidades de tu proyecto.

Bonus:

También te facilito el fichero .dockerignore que garantizará que el contenedor no use recursos innecesarios:

node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules

¡Espero que este Dockerfile te sea útil para tus proyectos Vite!