我试图在提交到github时隐藏我的API密钥,并且我在论坛中浏览了相关指南
我进行了更改,然后重新开始了纱线。我不确定自己在做什么错–我.env在项目的根目录(我命名了它process.env)中添加了一个文件,并在我刚刚放入的文件中添加了一个文件REACT_APP_API_KEY = 'my-secret-api-key'。
.env
process.env
REACT_APP_API_KEY = 'my-secret-api-key'
我想这可能是fetch在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); }); }
4个步骤
npm install dotenv --save
接下来,将以下行添加到您的应用中。
require('dotenv').config()
然后.env在应用程序的根目录下创建一个文件,并将变量添加到其中。
// contents of .env
REACT_APP_API_KEY = ‘my-secret-api-key’
最后,添加.env到您的.gitignore文件中,以便Git忽略它,并且它永远不会在GitHub上结束。
.gitignore
如果您使用的是create-react-app,则只需执行第3步和第4步,但请记住,变量必须以REACT_APP_它开始起作用。
REACT_APP_
注意 - 在.env文件中添加变量后,需要重新启动应用程序。
参考-https: //medium.com/@thejasonfile/using-dotenv-package-to-create- environment-variables-33da4ac4ea8f