Actualmente estoy implementando una aplicación de reacción (solo front-end) usando Cloud Run, he creado un activador para que se ejecute una compilación en la nube que implementa la aplicación usando Cloud Run.
Sin embargo, cuando intento crear algunas variables de entorno para acceder a mis componentes mediante la interfaz de usuario de ejecución en la nube, no puedo acceder a ellas debido al hecho (según tengo entendido) de que los entornos están definidos dentro de la instancia de la aplicación y no del navegador del usuario. .
Entonces mi pregunta es: ¿cómo debo abordar este problema de manera adecuada? Intenté quizás construir una especie de "config.json", pero no pude encontrar una forma adecuada de montar los archivos en diferentes entornos.
Querrás hacer lo siguiente. Primero, instale https://www.npmjs.com/package/env-cmd
A continuación, puede especificar el .env que se usará según su entorno. El siguiente código le permite especificar la configuración de forma declarativa en lugar de imperativamente. Ahora, cuando diga process.env.REACT_APP_ENV1 process.env.REACT_APP_ENV2 process.env.REACT_APP_ENV3 , entonces, dependiendo de env, los valores correctos se recogerán de forma transparente.
"scripts": { "start": "env-cmd -f env_anotherenv.env react-scripts start", "start_vscode": "env-cmd -f env_vscode.env react-scripts start", "build_staging": "env-cmd -f env_staging.env react-scripts build --profile", "build_production": "env-cmd -f env_production.env react-scripts build --profile" }Ejemplo de env_production.env será
REACT_APP_ENV1 = someenv1 REACT_APP_ENV2 = someenv2 REACT_APP_ENV3 = someenv3Ejemplo de env_staging.env será
REACT_APP_ENV1 = someotherenv1 REACT_APP_ENV2 = someotherenv2 REACT_APP_ENV3 = someotherenv3Le sugiero que hornee sus variables de entorno en sus artefactos de compilación a los que luego accede usando process.env.VARIABLE_1 como se describe aquí .
Use una compilación docker de varias etapas. En su etapa de compilación, complete un archivo .env de build-args (por ejemplo, usando envsubst) antes de ejecutar npm run build . Aquí hay una muestra que usa una plantilla que puede enviar a su repositorio de git.
ARG VARIABLE_1 ARG VARIABLE_2 COPY .env.template . RUN /bin/sh -c "envsubst '\$VARIABLE_1 \$VARIABLE_2' < .env.template > .env".env.template
VARIABLE_1=${VARIABLE_1} VARIABLE_2=${VARIABLE_2}Dependiendo de cómo estén configurados los disparadores de compilación en la nube, los valores para los argumentos de compilación pueden obtenerse de las variables de sustitución. La etapa final se puede basar en la imagen de nginx, aquí copia el paquete de archivos estáticos creado y sirve usando nginx. Vea un ejemplo completo de docker aquí
De esta manera, no expone un archivo .env y no hay que realizar una configuración de variables de entorno desde el final de la ejecución en la nube.