我试图隐藏我的API密钥,当我提交到GitHub,我已经通过论坛的指导,特别是下面的帖子:

我如何隐藏一个API密钥在创建反应应用程序?

我做了修改并重新启动Yarn。我不确定我做错了什么-我添加了一个。env文件到我的项目的根(我命名为process.env),在文件中我只是把REACT_APP_API_KEY = 'my-secret-api-key'。

我想这可能是我在App.js中添加关键字的方式,我尝试了多种格式,包括不使用模板文字,但我的项目仍然不会编译。

performSearch = (query = 'germany') => { 查询https://api.unsplash.com/search/photos?query=获取(“$ {}client_id = $ {REACT_APP_API_KEY}’) .then(response => response.json()) .then(responseData => { this.setState ({ 结果:responseData.results, 加载:假 }); }) .catch(error => { console.log('读取和解析数据出错',Error); }); }


当前回答

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

有关更多信息和配置信息,请访问dotenv-webpack。

其他回答

如果你得到的值是未定义的,那么你应该考虑重新启动Node.js服务器并重新编译。

现在有一种更简单的方法。

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

REACT_APP_API_KEY = 'my-secret-api-key'

然后在JavaScript文件中以如下方式调用它:

process.env.REACT_APP_API_KEY

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

在.env中添加开发环境变量

*注:我建议使用。env。Local而不是.env,因为create-react-app在创建项目时将此文件添加到gitignore。

文件的优先级:

npm start: .env.development.local, .env.development, .envlocal /, .env

NPM运行build: . environment .production。地方,.env。生产、.env。地方、.env

NPM测试:.env.test。地方,.env。Test, .env(注意。env。本地不见了)

更多信息:添加自定义环境变量

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

步骤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构建环境问题

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

每个人都没有定义的解决方案是把你的。env文件放在根目录,例如:

项目名称/ src .env

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

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

1. 在根文件夹上创建.env文件

有些源代码更喜欢使用.env.development和.env。生产,但这不是强制性的。

2. 变量的名称必须以REACT_APP_YOURVARIABLENAME开头

似乎如果您的环境变量不是这样开始的,您就会遇到问题。

3.包括你的变量

要包含环境变量,只需输入process.env。代码中的REACT_APP_VARIABLE。

您不必安装任何外部依赖项