如何在运行时将pod环境变量值注入React应用程序？
运行中的豆荚在内部定义了一些环境变量，例如：
/ # printenv
REACT_APP_ENV_VARIABLE=Variable from Kube!
REDIS_SERVICE_PORT=6379
KUBERNETES_SERVICE_PORT=443
KUBERNETES_PORT=tcp://10.38.0.1:443
REDIS_PORT=tcp://10.38.61.225:6379
REDIS_PORT_6379_TCP_ADDR=10.38.61.225
HOSTNAME=playground-pod
PLAYGROUND_SERVICE_SERVICE_HOST=10.38.0.53
REDIS_PORT_6379_TCP=tcp://10.38.61.225:6379
PLAYGROUND_SERVICE_SERVICE_PORT=80
PLAYGROUND_SERVICE_PORT=tcp://10.38.0.53:80
PLAYGROUND_SERVICE_PORT_80_TCP_ADDR=10.38.0.53
KUBERNETES_PORT_443_TCP_PROTO=tcp
PLAYGROUND_SERVICE_PORT_80_TCP_PORT=80
PLAYGROUND_SERVICE_PORT_80_TCP_PROTO=tcp
REACT_APP_ENV_VARIABLE_TWO=192.168.1.12
PLAYGROUND_SERVICE_PORT_80_TCP=tcp://10.38.0.53:80我应该如何配置一个像这样的React应用程序：
function App() {
return (
<div className="App">
<header className="App-header">
<p>
<code>ENV. VARIABLE: </code> {x.REACT_APP_ENV_VARIABLE}
</p>
</header>
</div>
);
}
export default App;去读取和注入一些存在于吊舱中的变量？
我想知道的主要原因是后台或Redis的动态更新--当应用程序重新启动、重新安排时间等时，它们可能会发生变化。
我的第一种方法是使用导入到应用程序的config.json文件，但通过这种方式，我不能导入通过运行pods生成的动态值。
回答 2
Stack Overflow用户
发布于 2021-11-29 20:54:43
正如@Harsh所建议的(非常感谢！)，可以使用react-dotenv库，但是仅仅将它添加到项目中是不够的。
首先，您必须遵循反应-dotenv文档中描述的所有步骤(将.env文件添加到项目中，编辑package.json文件)。
在我的例子中，.env文件如下所示：
REACT_APP_DEPLOY_SETUP='__dps__'
REACT_APP_PORT='__prt__'
REACT_APP_BACKEND_URL='__bur__'这些只是将在运行时添加的实际值的占位符。
准备好.env文件，使用react-dotenv命令编写npm脚本，并将变量白名单化(如库文档中所述)，您可以构建应用程序映像。
图像准备好后，将其添加到kubernetes pod配置文件中，并将变量的占位符替换为实值，如下所示：
[...]
spec:
containers:
- name: plg-frontend
image: localhost:5000/frontend:1.22
ports:
- containerPort: 80
command:
- sh
- -c
args:
- sed -i "s/__prt__/$REACT_APP_PORT/g" /usr/share/nginx/html/env.js;
sed -i "s/__bur__/http:\/\/$BACKEND_SERVICE_HOST/g" /usr/share/nginx/html/env.js;
sed -i "s/__dps__/$REACT_APP_DEPLOY_SETUP/g" /usr/share/nginx/html/env.js;
nginx -g 'daemon off;'
env:
- name: REACT_APP_DEPLOY_SETUP
value: "development"
- name: REACT_APP_PORT
value: "5089"上面发生的事情是用实际值替换占位符值：
$BACKEND_SERVICE_HOST是一个存在于吊舱中的环境变量，可以从正在运行的容器中读取，$REACT_APP_DEPLOY_SETUP是用户定义的常规字符串，$REACT_APP_PORT是一个整数值(它必须以引号表示，就像字符串一样)。
替换使用sed命令(或者更确切地说是：sh -c "sed -i ...")进行。所有的命令都是链式的，所以不要忘记每个参数末尾的分号。
所有的替换都是在/usr/share/nginx/html/env.js文件中完成的，该文件由项目根中的react-dotenv库创建。实际位置取决于安装构建映像的位置(它是在Dockerfile中定义的)。
最后，调用nginx命令，因为这是在映像的Dockerfile中调用的最后命令。如果没有这个显式调用，来自Dockerfile的命令将被与pod容器相关的命令覆盖，在本例中，nginx不会启动您的应用程序。
在容器启动后，您可以检查容器中是否存在变量：
kubectl exec <pod-name> -- printenv | grep REACT_APP但这并不意味着它们是在运行时被应用程序读取的。要查看它们是否从pod定义中更改为值，可以使用exec运行pod容器并预览env.js文件，或者在应用程序代码中添加一些控制台日志记录。
Stack Overflow用户
发布于 2021-11-23 17:51:59
您可以使用库点env
import React from "react";
import env from "react-dotenv";
export function MyComponent() {
return <div>{env.REACT_APP}</div>;
}在部署过程中，您可以从秘密和configmap传递秘密。
spec:
containers:
- name: example-site
image: example/app:v1
ports:
- containerPort: 80
env:
- name: REACT_APP
value: "123456"我想知道的主要原因是后台或Redis的动态更新--当应用程序重新启动、重新安排时间等时，它们可能会发生变化。
以上场景非常适合您的需求，而不是使用config.json。
您可以使用configmap和机密将多个值传递到部署。
https://stackoverflow.com/questions/70085518
复制相似问题
腾讯云开发者
