2

This is my yaml file, tried using both with putting the value in and using secrets

apiVersion: apps/v1
kind: Deployment
metadata:
  name: dockuser-site-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      component: dockuser-site
  template:
    metadata:
      labels:
        component: dockuser-site
    spec:
      imagePullSecrets:
        - name: dockhubcred
      containers:
        - name: dockuser-site
          image:dockuser/dockuser-site:v003
          ports:
            - containerPort: 80
          env:
          - name: REACT_APP_GHOST_API_KEY
            # value: "83274689124798yas"
            valueFrom:
              secretKeyRef:
                name: ghostapikey
                key: apikey

On the client side:

const api = new GhostContentAPI({
  url: "https://dockuser.com",
  key: process.env.REACT_APP_GHOST_API_KEY,
  version: "v3",
});

Error I'm getting:

Error: @tryghost/content-api Config Missing: 'key' is required.

Same thing happened for url until I manually entered it so for some reason my env vars aren't getting in...

This is a react app so I tried changing the env vars to REACT_APP_ first and even tried adding the env in the dockerfile, still nothing.

State:          Running
      Started:      Sat, 21 Aug 2021 06:12:05 -0500
    Ready:          True
    Restart Count:  0
    Environment:
      REACT_APP_GHOST_API_KEY:  <set to the key 'apikey' in secret 'ghostapikey'>  Optional: false

It's setting the key inside the pod. The Create React App is the problem?

Dockerfile:

FROM nginx:alpine
ENV REACT_APP_GHOST_API_KEY=blablabla123
COPY build/ /usr/share/nginx/html
mitchldtn
  • 423
  • 1
  • 4
  • 18

1 Answers1

3

You can use the React-dotenv : https://www.npmjs.com/package/react-dotenv

React example code :

import React from "react";
import env from "react-dotenv";

export function MyComponent() {
  return <div>{env.REACT_APP_GHOST_API_KEY}</div>;
}

Deployment goes like :

apiVersion: apps/v1
kind: Deployment
metadata:
  name: dockuser-site-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      component: dockuser-site
  template:
    metadata:
      labels:
        component: dockuser-site
    spec:
      imagePullSecrets:
        - name: dockhubcred
      containers:
        - name: dockuser-site
          image:dockuser/dockuser-site:v003
          ports:
            - containerPort: 80
          env:
          - name: REACT_APP_GHOST_API_KEY
            # value: "83274689124798yas"
            valueFrom:
              secretKeyRef:
                name: ghostapikey
                key: apikey

Option : 2

You can also use the config.json file and get variables from there.

import { Component } from '@angular/core';
import Config from "../config.json";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  environment = Config.ENV;
  baseUrl = Config.BASE_URL;
}

config.json

{
  ENV: "$ENV",
  BASE_URL: "$BASE_URL"
}

you can save the whole config.json into the configmap and inject into the volume.

https://developers.redhat.com/blog/2021/03/04/making-environment-variables-accessible-in-front-end-containers#inject_the_environment_variables

Harsh Manvar
  • 27,020
  • 6
  • 48
  • 102
  • Have you tried the Dockerfile option as its not working reason being the Env variable set in Dockerfile is at Server while you are accessing it at UI end. – dev_khan Aug 03 '22 at 08:30
  • If you are setting the variable in Dockerfile, you can read it using the `process.env.ENV-NAME`. ref thread : https://stackoverflow.com/questions/52103155/reading-an-environment-variable-in-react-which-was-set-by-docker – Harsh Manvar Aug 03 '22 at 08:42
  • I guess my chosng of words was wrong wht I meant by Dockerfile was actually Deployment that you have added Nw in your Deployment u r readng REACT_APP_GHOST_API_KEY frm a secret & not frm Docker Env which means (& I believe) tht y hv created a Secret yml & appld on ur kubernetes This will create REACT_APP_GHOST_API_KEY as Env variable but at server. Now if yo observe this questn its abt Kubernetes not Docker but the link you posted is for Docker. So the soltn which you posted is wrong – dev_khan Aug 03 '22 at 12:00
  • Right generally no one adds the Env that way in the docker file when the same env is consumed by the application. If you notice below the answer also of `mitchldtn` he resolves an issue with react-dotenv as suggested. Here k8s suggested way to inject variables : https://kubernetes.io/docs/tasks/inject-data-application/ – Harsh Manvar Aug 03 '22 at 12:07
  • Sorry but i think my answer provide the end goal solution as he tried also with K8s env and secret, still if you feel please free to add your answer with details and approach. i would be happy to review and learn from that. – Harsh Manvar Aug 03 '22 at 12:12
  • Yeah there are many ways to perform this but the problem with setting Env in container is let say you are copying a build and not actually building then these Env wont be available to you and you have to then mount a Configmap to a JS file in your build. This Configmap should have the object having multiple key value pair. I myself is new to all this and right now facing issue in mounting a secret as in case of secret yml I cant declare object just like I declared in configmap. Now if I just mount or apply my secret then that secret is not available to my UI project – dev_khan Aug 03 '22 at 12:18
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246997/discussion-between-dev-khan-and-harsh-manvar). – dev_khan Aug 03 '22 at 12:41
  • `react-dotenv` actually injects the environment variable during build time, by creating _env.js_ in build folder. So, if one wants to inject environment variables dynamically i.e. during runtime, then it will not work. – Snehasish Karmakar May 16 '23 at 14:33