Estoy creando la aplicación React SPA desde cero usando create-react-app y configurando la dirección uri para el servidor API de mi SPA. De acuerdo con la documentación oficial, la forma sugerida es crear archivos .env de entorno para este tipo de necesidades. Estoy usando una entrega continua como parte del flujo de trabajo de desarrollo. Después de la implementación, la aplicación React SPA va a un contenedor Docker y la API va a otro. Esos contenedores se implementan en servidores separados y no sé exactamente qué uri para API será, por lo que no hay forma de crear un archivo .env separado para cada implementación. ¿Hay alguna "manera correcta" de proporcionar una configuración dinámica para mi aplicación SPA para que pueda cambiar fácilmente los parámetros del entorno?
Ejemplos de API URI en SPA
// api.config.js export const uriToApi1 = process.env.REACT_APP_API1_URI; export const uriToApi2 = process.env.REACT_APP_API2_URI; // in App.js import { uriToApi1, uriToApi2 } from '../components/config/api.config.js'; /* More code */ <DataForm apiDataUri={`${uriToApi1}/BasicService/GetData`} /> /* More code */ <DataForm apiDataUri={`${uriToApi2}/ComplexService/UpdateData`} />Imaginemos que crea su código de interfaz en alguna carpeta dist que Docker empaquetará en la imagen. Debe crear una carpeta de config en su proyecto que también se agregará en la carpeta dist (y obviamente, se empaquetará en la imagen de Docker). En esta carpeta, almacenará algunos archivos de configuración con algunos datos específicos del servidor. Y debe cargar estos archivos cuando se inicie su aplicación de reacción.
El flujo será así:
./config/api-config.json ) Debe configurar Docker Volumes en su archivo de configuración de Docker y conectar la carpeta de config en el contenedor de Docker con alguna carpeta de config en su servidor. Luego, podrá sustituir los archivos de configuración en un contenedor docker por archivos en su servidor. Esto lo ayudará a anular la configuración en cada servidor.