传递给 React App 容器但未被使用的 Kubernetes 机密

Question

对于我使用create-react-app React App，我想使用 Kubernetes 机密作为环境变量。

这些秘密用于我集群中的不同 NodeJS 容器，它们工作得很好。 我使用 shell 来回显前端容器本身内的变量，它们在那里，但我意识到环境变量没有加载到 React App 中。

我确保环境变量键以REACT_APP_ ，所以这不是问题。

以下是一些文件：

frontend.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  labels:
    app: frontend
spec:
  selector:
    matchLabels:
      app: frontend
  replicas: 1
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
      - name: frontend
        image: build_link
        ports:
        - containerPort: 3000
        envFrom:
          - secretRef:
              name: prod

文件

FROM node:17.0.1-alpine3.12

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# latest yarn
RUN npm i -g --force yarn serve

COPY package.json yarn.lock .

RUN yarn --frozen-lockfile

# Legacy docker settings cos node 17 breaks build
ENV NODE_OPTIONS=--openssl-legacy-provider

COPY . .

RUN yarn build

ENV NODE_ENV=production

EXPOSE 3000

CMD ["yarn", "prod"]

Kubernetes prod秘密

kubectl describe secret prod
Name:         prod
Namespace:    default
Labels:       <none>
Annotations:  <none>

Type:  Opaque

Data
====
REACT_APP_DOCS_SERVER_URL:      41 bytes
REACT_APP_AUTH0_CLIENT_ID:      32 bytes
REACT_APP_AUTH0_DOMAIN:         24 bytes

已登录生产环境的 react 应用程序控制台（对不起，我很绝望）

FAST_REFRESH: true
NODE_ENV: "production"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined

Answer 1

create-react-app的构建命令接受构建阶段存在的环境变量，导致稍后添加的环境变量丢失。

我所做的修复包括组合删除 Dockerfile 中的构建命令，然后在同一命令中组合构建和运行命令： package.json

{
  ...
  "scripts": {
    "prod": "yarn build && serve build -l 3000",
    "build": "react-scripts build"
  }
}