Soy un desarrollador de back-end. He hecho cosas con marcos js del lado del cliente, pero no demasiados.

Estoy configurando la canalización de CI/CD para una aplicación VueJs que usa Vite, creando una imagen acoplable con una imagen base nginx y sirviendo los VueJs dentro de ella.

Por ejemplo, suponiendo que puedo crear una carpeta dist a partir de VueJs con

 npm run build

entonces podría ejecutar la aplicación web con un servidor web http simple como

 npm install -g http-server cd dist http-server

o copie el contenido de dist en nginx al crear una imagen de Docker:

 FROM nginx:stable-alpine COPY dist/ /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

En otras palabras, la aplicación web js no requiere un nodo, ya que es un montón de html + css + js atendidos por un servidor web que no entiende javascript.

Quiero tener el mismo enfoque que en el back-end: una compilación una vez, implementar en cualquier lugar, por lo tanto, quiero poder tener el código JS basado en variables de entorno, y luego decidir en el momento del lanzamiento qué valores de variables de entorno inyectar (es decir : cuando hago girar un contenedor como docker run -e MySetting=foo repo/front-end-app ).

Sigo luchando para encontrar una solución a eso. Si trato de acceder a las variables de entorno en el sistema operativo desde la aplicación VueJs con process.env , no estoy definido, así que supongo que ese no es el enfoque correcto cuando el javascript se ejecuta en el navegador.

Entonces, necesito una forma de proporcionar configuraciones o secretos en el lado del servidor, pero eso no parece posible en mi opinión, porque el servidor nginx no ejecuta código, simplemente sirve archivos estáticos.

¿Cómo lidia la gente con esto? ¿Estoy obligado a ejecutar algún proceso en el lado del servidor bajo NodeJs e implementar la aplicación como una aplicación de NodeJs para poder proteger los secretos?

De lo contrario, incluso si pudiera generar un archivo env sobre la marcha al activar el contenedor de la ventana acoplable, ese archivo también debería enviarse al navegador y los secretos (por ejemplo: credenciales de autenticación básicas, clave de API de terceros, etc. .) estaría expuesto.

Con suerte, alguien puede referirme a un buen enlace para leer o aclarar cosas, porque sigo chocando contra una pared cuando busco en Google. ¡Gracias!

UDPDATE 1 2022-04-01: Eché un vistazo a este https://create-react-app.dev/docs/adding-custom-environment-variables/ y todavía estoy confundido.

 WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

Entiendo por qué es peligroso incluir secretos en la propia aplicación. ¿Pero eso significa que no existe una solución segura cuando se usa el lado del cliente?