我试图隐藏我的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); }); }


当前回答

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

项目名称/ src .env

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

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

其他回答

四个步骤

NPM安装dotenv 接下来,添加以下行到您的应用程序。 要求(' dotenv ') . config () 然后在应用程序的根目录下创建一个.env文件,并将变量添加到其中。

// contents of .env

REACT_APP_API_KEY = 'my-secret-api-key'

最后,将.env添加到你的.gitignore文件中,这样Git就会忽略它,它永远不会出现在GitHub上。

如果你正在使用Create React App (Create - React - App),那么你只需要第3步和第4步,但请记住,变量需要以REACT_APP_开始才能工作。

参考:添加自定义环境变量

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

参考:使用dotenv包创建环境变量

设置好环境变量后,必须再次运行npm start。这就是我所缺少的部分。在自动重新加载时,.env变量不会更新。

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

只需创建.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。本地不见了)

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

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

你必须安装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"
  }