运行构建过程时如何配置我的 prod 环境变量？

Posted 2023-02-22

【中文标题】运行构建过程时如何配置我的 prod 环境变量？

【英文标题】：How can I configure my prod env vars when I run my build process?

【发布时间】：2020-08-11 03:23:52

【问题描述】：

我正在构建一个 React 16.13.0 应用程序。我想为每个环境配置不同的端点，所以我在一个组件中设置了它，src/containers/FormContainer.jsx，...

class FormContainer extends Component 
  static DEFAULT_COUNTRY = 484
  static REACT_APP_PROXY = process.env.REACT_APP_PROXY
    ...

我想在本地构建我的生产项目。但是在本地我已经定义了这个变量

localhost:client davea$ echo $REACT_APP_PROXY
http://localhost:9090

在我运行“npm run-script build”之后，我注意到它已编译到我的构建文件中......

(function(e)return e.json())).then((function(t)console.log(t),n=t.map((function(e)return e)),e.setState(provinces:n)))]),t(n.Component);S.DEFAULT_COUNTRY=484,S.REACT_APP_PROXY="http://localhost:9090"

有什么办法不让 React 自动解析环境变量，而是从生产环境中获取它？也许我需要调整我的构建脚本？以下是我的 package.json 文件中定义的内容...

localhost:client davea$ cat package.json 

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^1.9.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-dom": "^16.12.0",
    "react-native-flash-message": "^0.1.15",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "typescript": "^3.8.3"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "proxy": "http://localhost:8000",
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

【问题讨论】：

在生产环境中，JS 在您的用户的浏览器中运行，它无法访问他们机器上设置的环境变量。您从该构建中部署的只是静态 html、CSS 和 JS 文件。

哦，对了，所以当人们为生产构建 React 应用程序时，他们总是在生产应用程序的生产机器上构建它们吗？

理想情况下，他们在干净的 CI 环境中构建它们。我不认为诸如设置 REACT_APP_ env vars 或 Angular 的 environment 功能之类的构建时配置选项特别有用；它们意味着您必须为要部署到的每个环境创建单独的构建。相反，目标是拥有一个已知良好的资产，您可以在不同环境之间实际推广。

你会推荐什么策略来为每个环境设置不同的端点（env vars，因为没有更好的词）？

有几种方法。 Here's 我的同事写的一篇。为此，我还使用了服务器端包含，或者只是换出了捆绑中排除的特定 JS 文件。您还可以完全避免使用服务发现模式或相对路由（使用反向代理或类似 Cloud Foundry 的 path routing）的需要。

【参考方案1】：

以下步骤可能会有所帮助。试试看：

您也可以参考原始文件了解更多信息：

Adding Custom Environment Variables

第一步：

在项目根目录下创建.env文件

制作.env文件后的项目结构：

...
- build
- public
- src
    |----- App.js
    |----- index.js
- package.json
- .env
...

.env 文件内部：（例如）前缀 REACT_APP_ 是必需的！

REACT_APP_URL_DEVELOPMENT=http://localhost:8000/api
REACT_APP_URL_PRODUCTION=https://productionDomain.com/api/

第二步：

package.json 文件：

Scriptspackage.json文件无需更改：

  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://myWebsite.com",
  "dependencies": 
    ...
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

第三步：

最后，您可以有条件地使用您创建的变量。

示例：

class Posts extends Component
    ...

    componentDidMount()

      // Finally, you can conditionally use the variables you created.
      const url = process.env.NODE_ENV === "development" ? process.env.REACT_APP_URL_DEVELOPMENT : process.env.REACT_APP_URL_PRODUCTION;

      axios.get(url)
        .then(res =>  ... )
        .catch(err =>  ... );

    

    render()
      return(
        ...
      )
    

常见问题解答部分：

process.env 是您的环境通过以下方式提供的全局对象 Node.js。因为我们在浏览器中没有 NodeJS。但是您可以通过使用create-react-app（默认包含webpack）初始化您的应用程序来访问NODE_ENV，并执行上述步骤。更多详情如下：

有一个名为NODE_ENV 的内置环境变量。您可以从process.env.NODE_ENV 访问它。这个变量根据你当前所处的模式而变化。当你运行npm start时，它等于development，当你运行npm test时它等于test，当你运行npm run build时它是等于production。这个变量很特别，因为它可以用来根据你的模式访问不同的环境配置。

【参考方案2】：

您正在使用 react-scripts 来构建您的应用程序。您可以在 .env 文件中定义环境变量。

对于在你的节点环境中通用的变量，你可以在 .env 文件中定义它们

对于特定于development 和production 的变量，您可以在.env.development 和.env.production 文件中定义它们

另外，请在您的变量前加上REACT_APP

完成此操作后，您可以在 package.json 中添加脚本以指定特定 NODE_ENV 的构建

"scripts": 
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,

然后你就可以像在本地构建你的生产应用了

yarn run build:prod

它将使用生产环境变量

阅读更多关于创建反应应用程序documentation