use server environment variable on image

Question

I have an app written in angular4, I am running on production and sandbox,

I create an image and then deploy on kubernetes

I have some environment variables differnt to sandbox and production , currently I build two differnt images one for sandbox and one for production:

environments under src/envirnments:

environment.prod.ts

export const environment = {
  production: true,
  server_url: 'https://api.example.com/app/',
};

environment.sandbox.ts

export const environment = {
  production: false,
  server_url: 'https://api-sandbox.example.com/app/',
};

building image:

production : ng build --prod

sandbox: ng build--prod --env=sandbox

now, how can I use external environment varibales instead? somthing like applicatoion.getEnvirnment('server_url'), like this I dont need to create an image for each environment?

this is my deployment.yaml:

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: angular-web-app
  namespace: production
spec:
  replicas: 1
  revisionHistoryLimit: 1
  strategy:
      type: RollingUpdate
  template:
    metadata:
      labels:
        app: angular-web-app
    spec:
      containers:
      - name: angular-web-app
        image: us.gcr.io/my-com/angular-web-app:06.01.2018
        ports:
        - containerPort: 80
        env:
        - name: SERVER_URL
          value: https://api.example.com

here is my dockerfile:

FROM nginx
COPY dist /usr/share/nginx/html
EXPOSE 80
EXPOSE 443

building the image:

ng build --prod --env=sandbox
docker build --rm -t ${REGISTRY}/${CONTAINER}:${TAG} .

I added the environment variable to the deployment and I want the app to take the value from there

score 12 · Accepted Answer · answered Apr 11 '18 at 09:16

alternativly you can read from local config json , and then use volumes, having seperate config map for each of you environments see

under src/assets/config put the config json,

in your code read the url from the config file:

private getConfigJSONFile() {
     return this.http.get("/assets/config/env-vars.json").map((res:any) => res.json())
   }

now create the config on kubernetes:

here is the config file:

configs/env-variables.json

{
  "api_server_url": "https://api.example.com"
}

create the config

kubectl create configmap angular-env-vars --from-file=env-vars.json=configs/env-variables.json

use volumes in your deployment:

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: angular-web-app
spec:
  replicas: 1
  revisionHistoryLimit: 1
  strategy:
      type: RollingUpdate
  template:
    metadata:
      labels:
        app: angular-web-app
    spec:
      containers:
      - name: angular-web-app
        image: us.gcr.io/my-com/angular-web-app:06.01.2018
        volumeMounts:
        - name: env-vars
          mountPath: /usr/share/nginx/html/assets/config
        ports:
        - containerPort: 80
      volumes:
      - name: env-vars
        configMap:
          name: angular-env-vars

use server environment variable on image

1 Answers1