Kubernetes机密已传递到React App容器，但未被使用

Question

对于我用create-react-app制作的React应用程序，我想使用Kubernetes机密作为环境变量。

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

我已经确保环境变量键以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

Dockerfile

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

Kubernetesprod秘密

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应用控制台的env登录生产(对不起，我绝望了(

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中的build命令，然后在同一命令中组合build和run命令：package.json

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