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: Dockerize the Angular app. Create a template for nginx configurations. 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 in the second stage. nginx.conf.template 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 file by replacing the environment variables related parameters. Therefore please note that this is your standard file with some references to some environment variables. Let’s see how we can define those references. nginx.conf nginx.conf 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 related details, or to facilitate the routing of traffic dynamically as per the environment, we can bind an environment variable related reference like this. proxy_pass 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 the . The assumption here is that you know how to write a Deployment yaml file, to deploy your Front-End app on a k8s cluster. value 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 is getting processed and the file is getting created. During that process, the variable is getting mapped to the relevant environment variable. nginx.conf.template nginx.conf API_GW_PASS Yes, that’s all. Now the skeleton is there. Now you can adjust (or improve) that as per your requirement.

Flow

Nominated for 2022 - HackerNoon Contributor of the Year - Docker

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Too Long; Didn't Read

Make resilience your competitive advantage

How to Setup Different Environments for Dockerized Angular App with Nginx

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps