让Netlify访问Github上.gitignore隐藏的文件

Question

当我尝试在Netlify上托管项目时，我在Github中的存储库遇到了一些难题。该项目包括一个名为config.js的文件，并且在两个HTML页面上都引用了该文件。它包含一些变量和一个用于存储我的Google Maps API密钥的函数，因此我创建了一个.gitignore文件以将其隐藏在我的Github存储库中。问题是，既然我已经将其部署在Netlify中，我不确定如何将config.js引用为环境变量或类似名称，以便Netlify能够在渲染网站时找到我的Google Maps API密钥。现在，该站点已呈现，但是它无法正常工作，因为Netlify无法看到我的config.js文件，因此我遇到了错误。

[您将在下面看到我的文件结构，包括.gitignore命令和config.js，该文件存储带有以下变量和函数调用的Google Maps API密钥：

let head = document.getElementsByTagName("head").item(0);
let script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute(
  "src",
  "<MY GOOGLE MAPS API KEY>"
);
head.appendChild(script);

我的问题是，我该如何参考以上将我的API密钥存储在Netlify上的环境变量中的变量？或者，是否有一种方法可以仅授予Netlify访问config.js文件的权限，而不会在Github中公开它？

Netlify上有一些有关部署密钥和子模块的文档，但是我不了解文档的那一部分，所以我不确定它们是否与我的问题有关。

Answer 1

您已经提到，您可以将要包含在静态站点中的变量添加到Netlify's environment variables。这使它们脱离了Git存储库。

棘手的部分是将这些变量从Netlify构建环境中移出并进入您的源代码。根据变量的敏感程度，您至少有两个不同的选择：

1. 如果您不希望将变量检入Git，但可以将其嵌入到公共Javascript / HTML文件中（Google Maps API密钥可能属于此类），则可以使用类似Webpack将环境变量插入源代码。如果您使用的是React或其他框架，则它们usually have ways会包含构建环境中的环境变量。如果不是这样，则可能只需要编写自定义构建脚本或利用预构建的NPM软件包即可在构建时将小<script>var myVar = "<myEnvironmentVariableValue>";</script>注入HTML页面。实际上，看起来Netlify可以inject some custom script进入您的页面。也许您可以尝试一下。

2. 如果您的变量更敏感，并且您不想让它们公开，则需要添加一个实际的服务器端组件。这可能与无服务器API或标准humdrum Web服务器一样。然后，当您的前端需要此秘密变量时，它可能会到达服务器并要求它，大概是在您网站的经过身份验证的部分中提出的。这样可以将变量排除在公共HTML / JS之外，但仍允许您的站点按需访问它们。