En despliegues de aplicaciones frontend mediante Docker, gestionar variables de entorno de manera dinámica permite adaptar configuraciones entre entornos como desarrollo, pruebas y producción. Esto es esencial para mantener flexibilidad y seguridad en el código desplegado. A continuación, se describe un flujo de trabajo para implementar esta funcionalidad.

1. Definición de Variables en un Archivo

Comience creando un archivo de configuración, por ejemplo .env.local, que contenga las variables necesarias. Ejemplo:

SERVICE_URL=https://servicio.miaplicacion.com
CUSTOM_CONFIG=valor_ajustado

2. Creación del Dockerfile Optimizado

El Dockerfile debe estructurarse eficientemente para reducir el tamaño de la imagen y el tiempo de construcción. Un ejemplo ajustado es:

FROM node:18-slim
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --only=production
COPY . .
RUN npm run compile
EXPOSE 4000
CMD ["node", "server.js"]

3. Configuración con Docker Compose

Utilice un archivo docker-compose.yml para orquestar el servicio y pasar las variables de entorno. Ejemplo modificado:

version: '3.8'
services:
  frontend-app:
    build:
      context: .
    ports:
      - "8080:4000"
    env_file:
      - .env.local
    environment:
      - SERVICE_URL=${SERVICE_URL}
      - CUSTOM_CONFIG=${CUSTOM_CONFIG}

4. Integración en el Código de la Aplicación

Dependiendo del framework frontend, las variables se acceden de formas específicas. Por ejemplo, en una aplicación Vue, se usaría process.env.VUE_APP_SERVICE_URL, mientras que en React sería process.env.REACT_APP_SERVICE_URL. Asegúrese de consultar la documentación de su framework para métodos precisos.

Consideraciones Técnicas Clave

• Para archivos estáticos compilados como HTML o JavaScript, las inyecciones de valores durante la construcción no permiten cambios en tiempo real; considere estrategias como el renderizado del lado del servidor.
• En aplicaciones de página única (SPA), toda la configuración se epmaqueta comúnmente en el bundle de JavaScript; si se requiere modificación en ejecución, el backend debe exponer una API para estos datos.
• Al usar servidores web como Nginx, se pueden emplear plantillas para reemplazar variables al inicio, pero es crucial proteger la exposición de información sensible al cliente.
• Para Node.js como backend, puede crear rutas API que devuelvan configuraciones necesarias al frontend de manera segura.