我目前正在使用前端的React,Babel和Webpack构建一个项目。
我需要在某个地方存储和访问我的API密钥,但是我不确定在哪里。
我想我应该将API密钥存储在.env文件中,该文件位于.gitignore中。但是访问它们使我很困惑。
从我阅读的内容来看,似乎webpack可以访问yuor .env文件中的环境变量。
但是,如果这样做,这是否意味着我发出请求时,我的API密钥将通过浏览器-从而使这些密钥不受保护?
过去,我使用过节点快速后端服务器,因此我的API密钥受到保护,与浏览器无关。但是我不确定在有webpack开发服务器时是否需要此服务。
我开始设置节点快速后端服务器,但后来不知道如何将其绑定到我的webpack.config或package.json中。 Webpack已经是一个节点快递服务器!那我有2台服务器吗?拥有第二台服务器的唯一原因是要保护我的API密钥?
我真的使自己感到困惑,并且我认为不必要地使事情复杂化。
任何帮助将不胜感激。
最佳答案
您可以编写一个快速服务器来使用密钥进行API调用并提供相同的响应。通过使用快速服务器作为中介,您将不必在客户端公开API密钥。
编辑:没读过您已经考虑过
在这种情况下,您可以使用webpack-dev-middleware(https://github.com/webpack/webpack-dev-middleware)并仅使用一台快速服务器来提供API和静态文件。
您的代码可能如下所示:
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
// require keys
var app = express();
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('/api', function(req, res) {
// api logic
)}
app.get(/^(?!\/api).*$/, function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(3000, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3000');
});