在火力web应用指南规定我应该把给定的apiKey在我的HTML初始化火力点:

// TODO: Replace with your project's customized code snippet
<script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: '<your-api-key>',
    authDomain: '<your-auth-domain>',
    databaseURL: '<your-database-url>',
    storageBucket: '<your-storage-bucket>'
  };
  firebase.initializeApp(config);
</script>

通过这样做,apiKey暴露给每个访客.这把钥匙的目的是什么,它真的是公开的吗？

问题

我试图将环境变量传递到前端以显示 MapBox 中的地图。

我的尝试

1. 我已将 API 密钥放入目录的根目录中：

//.env.local
MAPBOX_KEY="abc123"

2. 在前端、客户端，我尝试加载该 ENV 来渲染地图：

//.env.local
MAPBOX_KEY="abc123"

上面的代码似乎没有识别API KEY。

3. 当我在此组件中使用 console.log(process.env.MAPBOX_KEY) 时，我可以在运行时在终端中看到 API 密钥yarn dev

有没有办法将这个环境加载到前端？

注意：我使用的是react-map-gl在 MapBox 之上构建的包