Bitbucket 管道未获取环境变量

Question

我正在使用 Bitbucket 管道将我的 React 应用程序部署到 s3 存储桶，部署工作正常，但不幸的是，我的 process.env 变量未定义。我已经在部署变量中添加了所有环境变量。

bitbucket-pipeline.yml：

image: node:14

pipelines:
  branches:
    master:
      - parallel:
        - step:
            name: Build and Test
            caches:
              - node
            script:
              - rm -rf package-lock.json
              - npm install
              - npm rebuild node-sass
              - CI=false npm run build:prod
            artifacts:
              - build/**
        - step:
            name: Security Scan
            script:
              # See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
              - pipe: atlassian/git-secrets-scan:0.5.1
      - step:
          name: Deploy to Production
          deployment: Production
          trigger: manual
          clone:
            enabled: false
          script:
            # sync your files to S3
            - pipe: atlassian/aws-s3-deploy:1.1.0
              variables:
                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
                S3_BUCKET: $S3_BUCKET
                LOCAL_PATH: 'build'

在 package.json 中构建脚本

"build": "env-cmd -f .env.prod react-scripts build",

.env.prod

REACT_APP_BASE_URL=http://myurl/api

App.js

import { useEffect } from "react";
import axios from 'axios'

const App = () => {

    const getData = async () => {
        console.log("base url: ", process.env.REACT_APP_BASE_URL); // it is undefined
        const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/api/users`);
        console.log("response: ", response)
    }

    useEffect(() => {
        getData();
    }, [])

    return <h1>My Component</h1>
};
}

问题是当我在本地运行 npm run build 时，构建会保存来自 .env.prod 的所有环境变量，因为该文件存在于我的本地计算机中，但在管道中我将所有 .env.prod部署变量中的 env 变量，但不幸的是所有 env 变量都是未定义

Answer 1

React 在用户的 Web 浏览器中运行，因此无法访问服务器上运行的环境变量。他们是不同的环境。

您可以在构建时将环境变量嵌入到您的应用中 :

注意：您必须创建以 REACT_APP_ 开头的自定义环境变量。除 NODE_ENV 之外的任何其他变量都将被忽略，以避免意外 在可能具有相同名称的计算机上公开私钥。更改任何环境变量都将要求您重新启动正在运行的开发服务器。

其中“构建时”部分很重要。要在应用中包含并使用 REACT_APP_BASE_URL 变量，请确保以“构建和测试”步骤可以看到的方式定义它。

假设您已为生产部署环境定义了该变量，请确保在构建步骤中使用该环境：

- step:
  name: Build and Test
  # Add this
  deployment: Production
  caches:
    - node
  script:
    - rm -rf package-lock.json
    - npm install
    - npm rebuild node-sass
    - CI=false npm run build:prod
  artifacts:
    - build/**

Answer 2

就我而言，在克里斯的帮助下，我通过在存储库变量中添加所有环境变量来解决它