允许 Netlify 访问 Github 上由 .gitignore 隐藏的文件

Question

当我尝试在Netlify上托管项目时，我在Github中的存储库中遇到了一些困境。该项目包括一个名为的文件，并在两个 HTML 页上引用。它包括一些变量和一个用于存储我的Google Maps API密钥的函数，所以我创建了一个.gitignore文件来将其隐藏在我的Github存储库中。问题是，现在我已经在Netlify中部署了它，我不确定如何引用配置.js作为环境变量或类似的东西，以便Netlify能够在呈现网站时找到我的Google Maps API密钥。现在，该网站呈现，但它不能完全工作，因为我遇到了错误，因为Netlify看不到我的配置.js文件。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 的环境变量中。这使它们远离Git存储库。

棘手的部分是将这些变量从Netlify构建环境中取出并放入您的源代码中。您至少有两个不同的选项，具体取决于变量的敏感程度：

1. 如果你不希望你的变量被签入 Git，但你可以将它们嵌入到你的公共 Javascript/HTML 文件中（Google Maps API 密钥可能属于这一类），你可以使用像 Webpack 这样的构建工具将环境变量注入到源代码中。如果你使用的是 React 或其他框架，他们通常有办法包含构建环境中的环境变量。如果不是，则可能只需要编写自定义生成脚本或利用预构建的 NPM 包在生成时将小包注入到 HTML 页面中。实际上，看起来Netlify可以在您的页面中注入一些自定义脚本。也许你可以试试。<script>var myVar = "<myEnvironmentVariableValue>";</script>

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