Estoy creando una aplicación React dockerizada y necesito definir algunas variables de entorno para las URL de la API. Sin embargo, React inyecta esas variables en la fase de compilación, por lo que necesito reconstruir la imagen completa cada vez que cambia el entorno. Esto ralentiza mi canalización, ya que no puedo reutilizar la misma imagen de la aplicación para la homologación y la producción.
He buscado algunos patrones y ahora estoy usando un archivo de configuración JS para inyectar el entorno sobre la marcha, pero no parece muy sencillo. ¿Alguien sabe una mejor manera de manejar este problema?
Tuve el mismo problema recientemente, luego publiqué algunos paquetes: @import-meta-env/* to npm para resolver el problema.
Este complemento expone las variables de entorno en un objeto import.meta.env especial (muy inspirado en Vite).
Durante la producción, se reemplazará estáticamente con un marcador de posición en lugar de las variables de entorno actuales.
Por lo tanto, podemos ejecutar un script en cualquier lugar para llenar archivos con variables de entorno del sistema.
Puedes ver más información en https://iendeavor.github.io/import-meta-env/ .
También creé un ejemplo de Docker: https://github.com/iendeavor/import-meta-env/tree/main/packages/examples/docker-starter-example .
Espero que esto ayude a alguien que lo necesite.
Sí, de hecho, este es un problema con las variables de entorno. Lo que quiere lograr se puede hacer con un servicio que comúnmente se llama "Configuración remota" o "Configuración como servicio - CaaS". Este servicio notifica a su aplicación que algunos datos externos han cambiado. Recomiendo encarecidamente LaunchDarkly o Firebase , pero siempre puedes elegir construirlo por tu cuenta (aunque no es una solución rápida). La única forma de evitar compilaciones de múltiples entornos es aplicando reglas en el CaaS y modificando las respuestas en función de quién solicita (por ejemplo, en función del encabezado "Origen" de la solicitud)