代码之家 › 专栏 › 技术社区 › Nikhil

访问react应用程序中的YAML-env变量

devops environment-variables yaml react-hooks reactjs

Nikhil · 技术社区 · 2 年前

我正在开发一个react应用程序,该应用程序将部署在3个环境中。开发/质量保证和生产。

Devops团队为我提供了一个包含环境变量的YAML文件,并要求我们在应用程序中使用这些变量。

样品YAML-

---
    apiVersion: apps/v1
      labels:
        app: kubesphere
        component: ui-dev
        tier: frontend
      name: ui-dev
      namespace: Test Project
    spec:
        matchLabels:
          app: kubesphere
          component: ui-dev
          tier: frontend
      template:
        metadata:
          labels:
            app: kubesphere
            component: ui-dev
            tier: frontend
        spec:
          containers:
            - env:
                - name: BACKEND_URL
                  value: http://192.40.84.98:5656
              image: $REGISTRY/$HARBOR_NAMESPACE/$APP_NAME:$IMAGE_VERSION-$BUILD_NUMBER
              imagePullPolicy: Always

我们必须访问的变量是BACKEND_URL。

我在我们的应用程序中使用这些作为-process.env。BACKEND_URL,但它不起作用。

我有什么东西不见了吗?请引导。

0 回复 | 直到 2 年前

Med El Mobarik 2 年前

您无法访问 process.env 在这种情况下,它是从客户端javascript(浏览器)进行反应的。因此,即使容器有env变量,javascript也无法访问它。

react处理env变量的方式是react从 .env 文件,然后在构建中react获取这些变量并将其作为javascript代码保存。

在你的情况下,图像(react应用程序)已经构建好了,所以它不能访问容器中的那些env变量。。

SuleymanSah 2 年前

您必须挂载一个像config.js这样的文件,其中包含环境变量,并在public.html中引用它。

1-)Yaml一定是这样的。(您可能需要相应地更改mountPath,在本例中我使用了nginx)

apiVersion: v1
kind: ConfigMap
metadata:
  name: kubesphere-config
  labels:
    app: kubesphere
data:
  config.js: |
    window.env = {}
    window.env.BACKEND_URL="http://192.40.84.98:5656"

--- 

apiVersion: apps/v1
  labels:
    app: kubesphere
    component: ui-dev
    tier: frontend
  name: ui-dev
  namespace: Test Project
spec:
    matchLabels:
      app: kubesphere
      component: ui-dev
      tier: frontend
  template:
    metadata:
      labels:
        app: kubesphere
        component: ui-dev
        tier: frontend
    spec:
      containers:
        - image: $REGISTRY/$HARBOR_NAMESPACE/$APP_NAME:$IMAGE_VERSION-$BUILD_NUMBER
          imagePullPolicy: Always
          volumeMounts:
            - name: config-volume
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-volume
          configMap:
            name: kubesphere-config

2-)在index.html文件(位于react应用程序的公共文件夹中)中,您必须在头块中引用这个config.js文件。

 <script src="%PUBLIC_URL%/config.js"></script>

3-)您现在可以访问组件内部的环境变量,如下所示:

window.env.BACKEND_URL