I have an Angular 6 application that I'm required to deploy onto a Kubernetes cluster as a Docker container (Nginx Base Image). The same image is built once and used for dev test prod environments.Since the Docker image is created once and reused in other environments, we don't have the environment.ts file anymore. I have env variables that i had to put in the index.html so each environment can have its setup. But it is not good because we can see some details, keys etc. Is there any other way or other architecture to avoid to put the env variables in the index.html ? best regards
Ultimately, if you are exposing the value of any "environment variable" to your angular application it is therefore accessible by the end user.
To "transfer" the values of environment variables to your front-end I would modify your docker image and have a script run as your ENTRYPOINT that does the following:
echo "var my_env_var = '$MY_ENV_VAR';" >> /usr/share/nginx/html/variables.js (repeat for each variable)variables.js script in your angular application.nginx -g 'daemon off;'It is usually good to have an endpoint on server which gets called during app initialisation, this way you won't hard code anything on client side which can be viewed by end user.
However, just having that won't be enough as you need to somehow protect them if stored on cache or local storage.