在React应用程序中访问YAML环境变量

Question

我正在开发一个 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，但它不起作用。

我有什么遗漏的吗？请指导。

Answer 1

您无法从客户端 JavaScript（浏览器）访问 process.env 在这种情况下它是反应。因此，即使容器具有该环境变量，JavaScript 也无法访问它。

React 使用 env 变量的方式是，React 从 .env 文件中读取它们，然后在构建中 React 获取这些变量并将它们保留为 JavaScript 代码。

在您的情况下，图像（反应应用程序）已经构建，所以它不能 访问容器中的那些环境变量..