将.env文件添加到React Project

Question

我正在尝试隐藏我的API密钥，当我提交github时，我已经浏览了论坛以获得指导，尤其是以下帖子：

How do I hide API key in create-react-app?

我做了改动并重新开始了纱线。我不确定我做错了什么 - 我在项目的根目录中添加了一个.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个步骤

1）npm install dotenv --save

2）接下来将以下行添加到您的应用程序。

require('dotenv').config()

3）然后在应用程序的根目录下创建一个.env文件，并将变量添加到其中。

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

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

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

Answer 2

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

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

Step 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构建Env Issue

因此，在我执行步骤1.1 | 2后，它无法正常工作，然后我找到了上述问题/解决方案。在构建时重新读取/创建env，因此每次修改.env文件时都需要npm run start，以便更新变量。

Answer 3

Webpack Users

如果您使用的是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

今天有一种更简单的方法。

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

REACT_APP_API_KEY = 'my-secret-api-key'

然后你以这种方式将它称为你的js文件：

process.env.REACT_APP_API_KEY

React支持环境变量，因为[email protected]。你不需要外部包来做这件事。

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 start：.env.development.local，.env.development，.env.local，.env

npm run build：.env.production.local，.env.production，.env.local，.env

npm test：.env.test.local，.env.test，.env（注意缺少.env.local）

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