如何在部署在 Docker 上的 React JS 应用程序中隐藏 API 密钥和机密

Question

我希望在 React 应用程序最终版本中避免向最终用户显示密钥和秘密。我找到了建议在 docker 中的环境变量文件中保密的方法。下面是到目前为止不起作用的代码。在 React 中无法REACT_APP_SOME_API访问，我也不确定是否使用此方法，秘密将在我不想要的最终构建中可见。

React 中的 Package.json：-

"scripts": {
     "start": "rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090",
     "docker": "rm -rf dist && webpack --mode production && make docker-run",
     "docker-push": "rm -rf dist && webpack --mode production && make docker-push --"
 },

生成文件：-

docker:
    docker build -t app .

docker-run: docker
    docker run -it --env-file ./config.env -p "80:80" app

docker-push: TAG ?= latest
docker-push: docker
    docker tag $(NAME) $(DOCKER_REPO):$(TAG)
    docker push $(DOCKER_REPO):$(TAG)

配置.env:-

REACT_APP_SOME_API=This-should-be-accessible-in-react-app

React 应用程序中的 App.js：-

return(
    <>{process.env.REACT_APP_SOME_API}< />//This outputs undefined if console.log
);

Answer 1

首先，您不应该将 API 密钥放入客户端应用程序中。API 密钥用于服务器到服务器的通信。如果有一些秘密，您可以在用户作为令牌登录时将其存储在会话存储中。