Logo

菜单

发布于 2026-01-06 2 阅读
0

React 和 Node.js 中处理环境变量的各种方法

React 和 Node.js 中处理环境变量的各种方法

使用环境变量对于保护您的私人信息安全非常重要。

它可能包含您的 API 密钥、数据库凭据或任何其他私人信息。始终建议使用环境变量来保护信息安全，切勿将其直接写入代码中。

另外，你需要确保将环境变量文件名添加到你的.gitignore文件中，这样在将代码推送到 Git 仓库时，它就不会被添加到你的 Git 仓库中。

我们来看看使用环境变量的各种方法。

使用 Create React App

使用单个 .env 文件：

如果你使用的是 create-react-app，那么要在应用程序中使用环境变量，你需要.env在项目根目录下创建一个文件，每个变量名都以 `.env` 开头。REACT_APP_

Create React App 将确保，.env如果您以 `.react.js` 开头命名应用程序，则文件中声明的变量在您的应用程序中可用。REACT_APP_

例如，如果你的.env文件看起来像这样：

REACT_APP_CLIENT_ID=abcd2whdkd
REACT_APP_API_KEY=3edcb4f9dd472ds4b47914ddcfb1791e1e1ab
Enter fullscreen mode Exit fullscreen mode

process.env.REACT_APP_CLIENT_ID然后，您可以使用以下方式 直接在 React 应用程序中访问这些变量：process.env.REACT_APP_API_KEY

演示：https://codesandbox.io/s/env-vars-create-react-app-mr0rl

包含多个 .env 文件：

如果您有多个.env文件.env.prod，.env.uat例如.env.dev分别用于生产环境、UAT 环境和开发环境，那么仅仅使用REACT_APP_环境变量名是行不通的。

假设你的应用程序正在使用 Firebase 数据库，并且你的 Firebase 配置如下所示：

对于开发环境：

const config = {
  apiKey: 'AIdfSyCrjkjsdscbbW-pfOwebgYCyGvu_2kyFkNu_-jyg',
  authDomain: 'seventh-capsule-78932.firebaseapp.com',
  databaseURL: 'https://seventh-capsule-78932.firebaseio.com',
  projectId: 'seventh-capsule-78932',
  storageBucket: 'seventh-capsule-78932.appspot.com',
  messagingSenderId: '3471282249832',
  appId: '1:3472702963:web:38adfik223f24323fc3e876'
};
Enter fullscreen mode Exit fullscreen mode

对于生产环境：

const config = {
  apiKey: 'AIzaSyCreZjsdsbbbW-pfOwebgYCyGvu_2kyFkNu_-jyg',
  authDomain: 'seventh-capsule-12345.firebaseapp.com',
  databaseURL: 'https://seventh-capsule-12345.firebaseio.com',
  projectId: 'seventh-capsule-12345',
  storageBucket: 'seventh-capsule-12345.appspot.com',
  messagingSenderId: '3479069249832',
  appId: '1:3477812963:web:38adfik223f92323fc3e876'
};
Enter fullscreen mode Exit fullscreen mode

但是，您不应该直接在应用程序中编写此代码，因为任何人都可以将上述配置复制粘贴到他们的应用程序中，并可以操纵您的 Firebase 数据。因此，您应该为配置对象的每个属性创建一个环境变量并使用该环境变量。

如果为生产环境创建.env.prod文件，则文件内容如下所示：

REACT_APP_API_KEY=AIzaSyCreZjsdsbbbW-pfOwebgYCyGvu_2kyFkNu_-jyg
REACT_APP_AUTH_DOMAIN=seventh-capsule-12345.firebaseapp.com
REACT_APP_DATABASE_URL=https://seventh-capsule-12345.firebaseio.com
REACT_APP_PROJECT_ID=seventh-capsule-12345
REACT_APP_STORAGE_BUCKET=seventh-capsule-12345.appspot.com
REACT_APP_MESSAGING_SENDER_ID=3479069249832
REACT_APP_APP_ID=1:3477812963:web:38adfik223f92323fc3e876
Enter fullscreen mode Exit fullscreen mode

您的.env.dev文件将如下所示：

REACT_APP_API_KEY=AIdfSyCrjkjsdscbbW-pfOwebgYCyGvu_2kyFkNu_-jyg
REACT_APP_AUTH_DOMAIN=seventh-capsule-78932.firebaseapp.com
REACT_APP_DATABASE_URL=https://seventh-capsule-78932.firebaseio.com
REACT_APP_PROJECT_ID=seventh-capsule-78932
REACT_APP_STORAGE_BUCKET=seventh-capsule-78932.appspot.com
REACT_APP_MESSAGING_SENDER_ID=3471282249832
REACT_APP_APP_ID=1:3472702963:web:38adfik223f24323fc3e876
Enter fullscreen mode Exit fullscreen mode

要访问这些特定于环境的文件，env-cmd请使用以下命令安装 npm 包：

yarn add env-cmd 

OR

npm install env-cmd 
Enter fullscreen mode Exit fullscreen mode

然后更改package.json文件script部分以使用env-cmd命令

"scripts": {
 "start": "env-cmd -f .env.dev react-scripts start",
 "start-prod": "env-cmd -f .env.prod react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
},
Enter fullscreen mode Exit fullscreen mode

所以现在，当你在终端运行yarn startornpm start命令时，它会从文件中加载环境变量.env.dev，当你在终端运行yarn start-prodornpm start-prod命令时，它会从文件中加载环境变量.env.prod。

您甚至可以创建一个单独的文件.env-cmdrc，如果您使用的是env-cmdnpm 包，则可以将所有环境变量声明为单个文件中的 JSON 对象，如下所示：

{
    "dev": {
        "REACT_APP_API_KEY": "AIdfSyCrjkjsdscbbW-pfOwebgYCyGvu_2kyFkNu_-jyg",
        "REACT_APP_AUTH_DOMAIN": "seventh-capsule-78932.firebaseapp.com",
        "REACT_APP_DATABASE_URL": "https://seventh-capsule-78932.firebaseio.com",
        "REACT_APP_PROJECT_ID": "seventh-capsule-78932",
        "REACT_APP_STORAGE_BUCKET": "seventh-capsule-78932.appspot.com",
        "REACT_APP_MESSAGING_SENDER_ID": "3471282249832",
        "REACT_APP_APP_ID": "1:3472702963:web:38adfik223f24323fc3e876"
    },
    "prod": {
       "REACT_APP_API_KEY": "AIzaSyCreZjsdsbbbW-pfOwebgYCyGvu_2kyFkNu_-jyg",
        "REACT_APP_AUTH_DOMAIN": "seventh-capsule-12345.firebaseapp.com",
        "REACT_APP_DATABASE_URL": "https://seventh-capsule-12345.firebaseio.com",
        "REACT_APP_PROJECT_ID": "seventh-capsule-12345",
        "REACT_APP_STORAGE_BUCKET": "seventh-capsule-12345.appspot.com",
        "REACT_APP_MESSAGING_SENDER_ID": "3479069249832",
        "REACT_APP_APP_ID": "1:3477812963:web:38adfik223f92323fc3e876"
    }
}
Enter fullscreen mode Exit fullscreen mode

然后使用 -e 标志来指定要在package.json文件中引用的环境，如下所示：

"scripts": {
 "start": "env-cmd -e dev react-scripts start",
 "start-prod": "env-cmd -e prod react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
},
Enter fullscreen mode Exit fullscreen mode

所以现在，当你在终端运行yarn start或npm start命令时，它会从文件中加载开发环境变量.env-cmdrc；当你在终端运行yarn start-prod或npm start-prod命令时，它会从文件中加载生产环境变量.env-cmdrc。

使用 Node.js

包含多个 .env 文件：

如果您使用的是 Node.js，则可以使用相同的env-cmdnpm 包来访问环境变量并更改文件中的脚本，package.json如下所示。

"scripts": {
 "start": "env-cmd -f .env.dev node index.js",
 "start-prod": "env-cmd -f .env.prod node index.js"
},
Enter fullscreen mode Exit fullscreen mode

如果您想env-cmd直接从终端运行该命令，而不是通过yarn start命令行，则需要使用env-cmd软件包的完整路径，如下所示：

./node_modules/.bin/env-cmd -f .env.dev node index.js 

AND

./node_modules/.bin/env-cmd -f .env.prod node index.js
Enter fullscreen mode Exit fullscreen mode

使用单个 .env 文件：

如果你只有一个.env文件，那么你仍然可以使用env-cmdnpm 包；但如果你不想添加env-cmd到 .htaccess 文件中package.json，那么你可以dotenv使用以下命令安装 npm 包：

yarn add dotenv

OR

npm install dotenv
Enter fullscreen mode Exit fullscreen mode

然后在主 Node.js 文件中使用config该包的方法dotenv，如下所示：

// index.js file

require('dotenv').config();

const API_URL = process.env.API_URL;
console.log(API_URL); // http://localhost:5000
Enter fullscreen mode Exit fullscreen mode

如果你的.env文件看起来像这样：

API_URL=http://localhost:5000
Enter fullscreen mode Exit fullscreen mode

然后，要执行该文件，只需在终端运行以下命令：

node index.js
Enter fullscreen mode Exit fullscreen mode

或者将此命令添加到scriptspackage.json 文件的相应部分。

如果不需要单独的.env文件，这是我的首选方法，只需对config方法进行调用，环境变量就可以在文件内部使用，并且在方法调用之后，index.js所有导入到该文件中的文件也可以使用环境变量。index.jsconfig

由于我们没有将.env文件推送到 GitHub，因此要在部署到生产环境的应用程序中使用环境变量，您需要从托管提供商提供的部署部分的 UI 添加环境变量。

所有主机提供商都提供了通过用户界面添加环境变量的选项。

例如，如果您使用 Netlify 部署应用程序，则需要转到“站点设置”=>“构建和部署”，然后向下滚动，您会看到一个添加环境变量的选项，如下所示。

环境变量

添加环境变量后，请务必重新部署您的网站，以便您的应用程序能够使用这些新添加的环境变量。

别忘了订阅我的每周新闻简报，直接在您的收件箱中接收精彩的技巧、窍门和文章。点击此处订阅。

文章来源：https://dev.to/myogeshchavan97/various-ways-of-handling-environment-variables-in-react-and-node-js-hjl
使用正则表达式解析用户输入的 UR...
React 表格​​指南和最佳 R...