Como faço para armazenar e acessar minhas chaves de API com um aplicativo React + Webpack? - node.js, reactjs, expresso, webpack, webpack-dev-server

Atualmente estou construindo um projeto com React, Babel e Webpack no front end.

Preciso armazenar e acessar minhas chaves de API em algum lugar, mas não tenho certeza de onde.

Eu acho que deveria armazenar minhas chaves de API no meu arquivo .env, que está no meu .gitignore. Mas está acessando eles que estão me enganando.

Pelo que eu li, parece que o webpack pode acessar variáveis ​​de ambiente no seu arquivo .env.

Mas se eu fizer isso, não significa que, quando eu fizer solicitações, minhas chaves de API estarão passando pelo navegador - assim as chaves ficarão desprotegidas?

No passado, eu usei um nó expresso back endservidor, para que minhas chaves de API estejam protegidas e não tenham nada a ver com o navegador. Mas eu não tenho certeza se eu preciso disso quando eu tenho um servidor de desenvolvimento webpack também.

Comecei a criar um back end expresso de nóservidor, mas, em seguida, didn "t sabe amarrar isso em minha webpack.config ou package.json. Webpack já é um servidor expressa nó! Então eu tenho 2 servidores? Com ​​a única razão para ter um segundo servidor sendo para proteger o meu Chaves de API?

Estou realmente me confundindo e acho desnecessariamente complicar as coisas.

qualquer ajuda seria muito bem vinda.

Respostas:

Você poderia escrever um servidor expresso para fazer a APIchama com a chave e atende a mesma resposta. Usando o servidor expresso como intermediário dessa forma, você nunca terá que expor a chave da API no lado do cliente.

EDIT: não leia que você já pensou sobre isso

Nesse caso, você pode usar o webpack-dev-middleware (https://github.com/webpack/webpack-dev-middleware) e usar apenas um servidor expresso para servir a API e os arquivos estáticos.

Seu código pode ser assim:

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");
});