我试图隐藏我的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);
})；
｝
该解决方案不需要任何额外的包。
步骤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，以便更新变量。
四个步骤
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 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"
}
