It is pretty normal to encounter an application that requires multiple environment configurations. But when it comes to web, we tend to build a whole new app once again when we change just the environment configurations. And the process takes minutes.
In the world of containerization, this strategy of building everything makes it difficult to achieve one image, deploy everywhere, which I am such a fan of. And when someone tries to do so, it always makes a BIG image with building tools and so on. Plus, a long starting time for the containers too.
So my goals here are:
- We can build once and deploy everywhere.
- We can have a small final product image.
- We can have the ability to change those environment configuration just at the deployment time.
With a simple web concept, we can achieve that.
GLOBAL VARIABLES!!!!
Yep... you heard it right.
- I plan to put
<script>in the<body>. Inside this<script>, I want to declare a global variable which is a simple object contains configuration of the environment. But, I am not going to put it in theindex.htmlyet. Let's put a placeholder, say<!-- CONFIG -->, instead. - In configuration file (such as what we have in typical Angular projects), I implement it to read global variable first, or else, assign a default configuration.
- Add a new
sedcommand for docker image. Which basically do just replace the placeholder with a config from environment variables.
Just that. We are good to go! Here are gists just for an idea.
Cons?
The config is plainly exposed.
This might let some users making weird things to your web. But I guess, it gonna have just a minimal impact since if they look hard enough, they might find it in any scenarios. Anyway, please proceed with caution.
That's it! Thanks for reading 😁
If you have any questions or some kind of improvement, please let me know in the comment below.
Top comments (0)