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

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

<p>My <strong>Environment Files</strong>:</p>

<p><em>environment.ts</em></p>

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

<p><em>environment.prod.ts</em></p>

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

<p>My <strong>nginx.conf</strong></p>

<pre><code>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;
        }
    }
}
</code></pre>

<p>My <strong>Dockerfile</strong>:</p>

<pre><code># 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 .
</code></pre>

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

<pre><code>ng build --prod --build-optimizer
</code></pre>

<p>So, at this point my file structure looks like the following:</p>

<pre><code>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
</code></pre>

<p>Now, I'm ready to create the docker image:</p>

<pre><code>docker build -t my_application_image .
</code></pre>

<p>Then, I push the image to the Docker registry, and then used in Kubernetes.</p>

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

<p>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 :</p>

<pre><code>export const environment = {
  production: {{production}},
  API_URL: '{{api_url}}'
};
</code></pre>

<p>Dockerfile with</p>

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

<p>and finally entrypoint it self</p>

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