将.env文件添加到React项目

Question

我正试图在提交github时隐藏我的API密钥，我已经在论坛中寻找指导，特别是以下帖子：

如何在create-react-app中隐藏API键？

我做了一些改变，并重新开始纱。我不确定我做错了什么——我添加了一个<代码>。env文件添加到我的项目的根目录(我将其命名为< code>process.env)，在该文件中，我只需放置< code > REACT _ APP _ API _ KEY = ' my-secret-API-KEY ' 。

我想这可能是我在App.js中向我的< code>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

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

只需在根目录下创建. 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 start： .env.development.local， .env.development， .env.local， .env

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

npm测试：。环境测试。本地，.env。测试，.env（注意：缺少.env.local）

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

Answer 2

所以我自己是新的反应，我找到了一种方法去做。

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

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

1.1创建根/. 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构建环境问题

因此，在我完成步骤1.1|2后，它不起作用，然后我发现了上述问题/解决方案。React在构建时读取/创建env，因此每次修改.env文件时都需要npm运行start，以便更新变量。

Answer 3

4个步骤

>

npm install dotenv --save

接下来，在应用程序中添加以下行。

< code>require('dotenv ')。config()

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

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

如果您正在使用create-react-app，那么您只需要第3步和第4步，但请记住，变量需要以< code>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