React can't access my environment variables in kubernetes

Question

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

Answer 1

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