React 无法访问我在 kubernetes 中的环境变量答案

【问题标题】：React can't access my environment variables in kubernetesReact 无法访问我在 kubernetes 中的环境变量
【发布时间】：2021-08-21 10:47:45
【问题描述】：

这是我的 yaml 文件，尝试同时使用将值放入和使用机密

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

在客户端：

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

我得到的错误：

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

在我手动输入之前，url 发生了同样的事情，所以由于某种原因我的环境变量没有进入...

这是一个 react 应用，所以我尝试先将 env vars 更改为 REACT_APP_，甚至尝试在 dockerfile 中添加 env，仍然没有。

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

它在 pod 内设置密钥。 Create React App 有问题吗？

Dockerfile：

FROM nginx:alpine
ENV REACT_APP_GHOST_API_KEY=blablabla123
COPY build/ /usr/share/nginx/html

【问题讨论】：

你创建了 ghostapikey 秘密吗？
@ThanhNguyenVan 是的。使用kubectl create secret generic ghostapikey --from-literal apikey=blablabla
如果你在正在运行的容器中启动一个shell，你看到环境变量了吗？如果在代码中打印process.env.REACT_APP_GHOST_API_KEY 的内容，看到预期值了吗？
它正在返回undefined 我使用了 npx create-react-app 和 npm run build.. 我不明白

标签： reactjs kubernetes ghost-blog

【解决方案1】：

你可以使用 React-dotenv : https://www.npmjs.com/package/react-dotenv

反应示例代码：

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

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

部署如下：

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

选项：2

您还可以使用config.json 文件并从那里获取变量。

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"
}

您可以将整个 config.json 保存到 configmap 并注入到卷中。

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

【讨论】：