K
Q

Question

Angular 6 + Nginx + Docker + Kubernetes: How to configure environment variables for different environments

9/14/2018

I have an Angular 6 application that I'm required to deploy onto a Kubernetes cluster as a Docker container (Nginx Base Image).

Question: How do I accommodate using the same Docker image that's built once, but to be able to run in dev & prod and point to different API_URL?

My Environment Files:

environment.ts

export const environment = {
  production: false,
  API_URL: 'https://dev-server.domain.com'
};

environment.prod.ts

export const environment = {
  production: true,
  API_URL: 'https://prod-server.domain.com'
};

My nginx.conf

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

My Dockerfile:

# base image
FROM nginx:alpine

# private and public mapping
EXPOSE 80

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY dist/my_project .

At this point, I build my project on my local machine and optimize it for production:

ng build --prod --build-optimizer

So, at this point my file structure looks like the following:

root
    |--Dockerfile
    |--nginx.conf
    |--angular.json
    |--dist
       |--my_project
          |--styles.3ed0e5393a1386f6fc48.css
          |--runtime.a66f828dca56eeb90e02.js
          |--polyfills.2f5aa8fb3d2aea854d83.js
          |--main.2b3e9b16d82428586ae5.js
          |--index.html
          |--favicon.ico
          |--3rdpartylicenses.txt
          |--assets

Now, I'm ready to create the docker image:

docker build -t my_application_image .

Then, I push the image to the Docker registry, and then used in Kubernetes.

Now that you know my setup, can you suggest how I can modify this such that different environment files can be used for dev & prod?

-- Tora Tora Tora

angular6

docker

kubernetes

nginx

1 Answer

9/14/2018

One of the ways to solve it would be to add an entrypoint script to your docker image and a default prod env. The use only one environment.ts with something like :

export const environment = {
  production: {{production}},
  API_URL: '{{api_url}}'
};

Dockerfile with

ENV PRODUCTION=true API_URL=https://prod-server.domain.com
ADD entrypoint.sh /entrypoint.sh
ENTRYPOINT /entrypoint.sh

and finally entrypoint it self

#!/bin/bash
sed -i "s/{{production}}/${PRODUCTION}/g" environment.ts
sed -i "s/{{api_url}}/${API_URL}/g" environment.ts
exec $@

-- Radek 'Goblin' Pieczonka

Source: StackOverflow

KQ

Angular 6 + Nginx + Docker + Kubernetes: How to configure environment variables for different environments

Similar Questions

1 Answer

K
Q