将 .env 文件添加到 React 项目

Question

我试图隐藏我的 API 密钥，以便在我提交 github 时使用，并且我浏览了论坛以寻求指导，尤其是以下 post:

我进行了更改并重新启动了 yarn。我不确定自己做错了什么——我在项目的根目录中添加了一个 .env 文件（我将其命名为 process.env），然后在文件中我刚刚放入 REACT_APP_API_KEY = 'my-secret-api-key' .

我想这可能是我在 App.js 中将密钥添加到我的 fetch 的方式，并且我尝试了多种格式，包括不使用模板文字，但是我的项目仍然无法编译。

非常感谢任何帮助。

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

Answer 1

4 步

npm install dotenv --save
接下来将以下行添加到您的应用中。

require('dotenv').config()
然后在应用程序的根目录下创建一个 .env 文件并向其中添加变量。

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

最后，将 .env 添加到您的 .gitignore 文件中，以便 Git 忽略它并且它永远不会在 GitHub 上结束。

如果您使用 create-react-app，那么您只需要第 3 步和第 4 步，但请记住，变量需要以 REACT_APP_ 开头才能起作用。

参考：https://create-react-app.dev/docs/adding-custom-environment-variables/

注意 - 在 .env 文件中添加变量后需要重新启动应用程序。

参考 - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Answer 2

今天有一种更简单的方法可以做到这一点。

只需在您的根目录中创建 .env.local 文件并在那里设置变量。在你的情况下：

REACT_APP_API_KEY = 'my-secret-api-key'

然后在你的js文件中调用如下：

process.env.REACT_APP_API_KEY

React 从 react-scripts@0.5.0 开始支持环境变量。你不需要外部包来做到这一点。

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

*注意：我建议 .env.local 而不是 .env 因为 create-react-app 在创建项目时将此文件添加到 gitignore。

文件优先级：

npm 开始：.env.development.local、.env.development、.env.local、.env

npm 运行构建：.env.production.local、.env.production、.env.local、.env

npm 测试：.env.test.local、.env.test、.env（注意缺少 .env.local）

更多信息：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Answer 3

Webpack 用户

如果您使用的是 webpack，您可以安装和使用 dotenv-webpack 插件，按照以下步骤操作：

安装包

yarn add dotenv-webpack

创建 .env 文件

// .env
API_KEY='my secret api key'

将其添加到 webpack.config.js 文件

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

在您的代码中将其用作

process.env.API_KEY

更多信息和配置信息，请访问here

Answer 4

所以我自己是 React 的新手，我找到了一种方法。

此解决方案不需要任何额外的包。

步骤 1 ReactDocs

在上面的文档中，他们在 Shell 和其他选项中提到了导出，我将尝试解释的是使用 .env 文件

1.1 创建 Root/.env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

重要提示必须以REACT_APP_

开头

1.2 访问 ENV 变量

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 构建环境 Issue

所以我做了步骤1.1|2之后还是不行，然后我发现了上面的issue/solution。在构建时反应 read/creates env，因此每次修改 .env 文件时都需要 npm 运行启动 ，以便更新变量。

Answer 5

你必须安装 npm install env-cmd

在根目录下制作.env，这样更新&REACT_APP_是变量名的强制前缀

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

更新package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Answer 6

安装 dotenv 作为 devDependencies:

npm i --save-dev dotenv

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

更新 .env 文件如下 & REACT_APP_ 是变量名的强制前缀。

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

[可选但良好做法]现在您可以创建一个配置文件来存储变量并导出变量以便可以从其他文件中使用它。

例如，我创建了一个名为 base.js 的文件并按如下方式更新它：

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

或者你也可以简单地通过以下方式在你的JS文件中调用环境变量：

process.env.REACT_APP_BASE_URL

Answer 7

1。在您的根文件夹

上创建 .env 文件

一些消息来源更喜欢使用 .env.development 和 .env.production 但这不是强制性的。

2。您的变量名称 - 必须 - 以 REACT_APP_YOURVARIABLENAME

开头

看来如果你的环境变量不是这样启动的那么你就会有问题

3。包括你的变量

包含您的环境变量，只需放在您的代码中 process.env.REACT_APP_VARIABLE

You don't have to install any external dependency

Answer 8

如果你得到的值是undefined，那么你应该考虑重新启动节点服务器并重新编译。

Answer 9

每个人都没有定义解决方案是将您的 .env 文件放在根目录中，例如

项目名称/
源码
.env

不要在应用的根目录中创建 src 文件夹

我认为你们在 src 文件夹中创建了文件，因为我也只在那里创建了... 然后我才意识到这是错误的所以在 src 的外部创建 .env 文件它会起作用

Answer 10

我想解释一下如何解决这个问题以防止 undefined 问题：

首先，在 .env 中添加开发环境变量适用于 react-scripts@0.5.0 及更高版本。这意味着您无需安装任何东西。
然后创建你的 .env 文件或 .env_developement 文件或其他任何东西并放置你的变量但是这是大的但是添加 REACT_APP_ 到每个变量名称 for ex REACT_APP_API_KEY= "secret_key_here".如果不添加 REACT_APP_，您将遇到 undefined 个问题。
现在，您可以简单地使用这个变量 process.env.REACT_APP_VARIBALE_NAME。例如：const API_KEY = process.env.REACT_APP_API_KEY.
终于，我们解决了这个悲惨的局面。

Answer 11

在 CREATE REACT APP 中使用环境变量的步骤（没有 dotenv 包）

在项目的 root 文件夹中创建一个名为 .env 的新文件 (NOT 在 src 文件夹中，但向上一层。请记住，它应该与 package.json 处于同一级别（这非常重要）
像这样定义你的变量（注意你定义的每个变量都应该以REACT_APP_开头）

示例：.env file

REACT_APP_ACCESS_KEY=8Sh9ZLwZevicWC-f_lmHvvyMu44cg3yZBU

注意：您不必将值包含在"" or ''
中
现在您可以像这样在任何组件中使用该变量

const apiKey = process.env.REACT_APP_ACCESS_KEY

名称应与 .env 文件中给定的键相匹配
现在，在您尝试此操作之前，始终记得重新启动本地服务器。一旦你运行 npm start 它就起作用了。每当您对 .env 文件进行更改时，都会应用此步骤。我们通常会忘记这一步，所以它可能无法正常工作。
可选，检查 .env 条目是否存在于 .gitignore 文件中。如果 .env 的条目存在于 .gitignore 那么你的 .env 文件将不会被推送到 github（这就是为什么我们在第一个中使用 .env 的原因地点）。

将 .env 文件添加到 React 项目

Adding an .env file to React Project

environment-variables

api-key

reactjs