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

Question

这是我的 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 应用程序，所以我尝试先将环境变量更改为 REACT_APP_，甚至尝试在 dockerfile 中添加环境变量，但仍然没有。

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 是问题所在？

Docker 文件：

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

Answer 1

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

React 示例代码：

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

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

React can't access my environment variables in kubernetes

reactjs

kubernetes

ghost-blog