How to Setup Different Environments for Dockerized Angular App with Nginx

Considering a standard deployment practice, we have different environments for development, testing, staging, prod, etc. Here I’m going to suggest to you a very simple deployment practice that we can follow to deploy an Angular-based front-end app.

The high-level flow is:

1. Dockerize the Angular app.

2. Create a template for nginx configurations.

3. Configure the Deployment yaml file.

   
   

This is a sample Dockerfile that you can refer to when you are dockerizing your Angular app:

As you can see this is a multi-stage Dockerfile, therefore you don’t have to include an npm-based build step in your CI/CD pipeline.

Ok, now we have a Dockerfile, what’s the next step?

Now we need to create a nginx configuration file template. As you can see in the Dockerfile, we are copying a file named nginx.conf.template in the second stage.

I’m not going to explain to you how to create a nginx config file here. The reason to have a file name like this (.template) is, later we will use this file and generate the standard nginx.conf file by replacing the environment variables related parameters. Therefore please note that this is your standard nginx.conf file with some references to some environment variables. Let’s see how we can define those references.

In a typical (or a normal) approach, we just mention an IP or an upstream reference in a configuration like this. But to dynamically feed the proxy_pass related details, or to facilitate the routing of traffic dynamically as per the environment, we can bind an environment variable related reference like this.

Now we have to consider the k8s related aspects.

In your deployment yaml files, you can add a block like the above to set the environment variable; yes, please change thevalue. The assumption here is that you know how to write a Deployment yaml file, to deploy your Front-End app on a k8s cluster.

And to bind the environment variable to the nginx server config, we need to add a command to the same Deployment yaml file. The command is this,

command: ["/bin/sh", "-c", "envsubst '$${API_GW_PASS}' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && nginx -g 'daemon off;'"]

Yes, we need to go for a command like this. It’s not like we can just bind the environment variables by using the $ notation or by using the ${} notation. If you aren’t familiar with adding a command to the Deployment yaml, you can refer to the official k8s page.

What’s happening here is, our nginx.conf.template is getting processed and the nginx.conf file is getting created. During that process, the API_GW_PASS variable is getting mapped to the relevant environment variable.

Yes, that’s all. Now the skeleton is there. Now you can adjust (or improve) that as per your requirement.