在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 程式碼。

在您的情況下，圖像（反應應用程式）已經構建，所以它不能 訪問容器中的那些環境變數..