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

【问题标题】：Giving Netlify access to a file hidden by .gitignore on Github让 Netlify 访问 Github 上 .gitignore 隐藏的文件
【发布时间】：2020-05-16 20:25:20
【问题描述】：

当我尝试在 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 上有一些关于部署密钥和子模块的文档，但我不理解文档的那一部分，我不确定它们是否与我的问题有关。

【问题讨论】：

标签： javascript environment-variables gitignore api-key netlify

【解决方案1】：

正如您所提到的，您可以将希望作为静态站点一部分包含在内的变量添加到Netlify's environment variables。这使它们远离 Git 存储库。

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

如果您不希望将变量签入 Git，但可以将它们嵌入到公共 Javascript/HTML 文件中（Google Maps API 密钥可能属于此类），您可以使用构建像Webpack 这样的工具可以将环境变量注入到你的源代码中。如果您使用 React 或其他框架，他们 usually have ways 将包含来自构建环境的环境变量。如果不是，您可能只需要编写自定义构建脚本或利用预构建的 NPM 包在构建时将一个小的 <script>var myVar = "<myEnvironmentVariableValue>";</script> 注入到您的 HTML 页面中。实际上，看起来 Netlify 可以 inject some custom script 进入您的页面。也许你可以试试。
如果您的变量更敏感并且您不希望它们公开，您需要添加一个实际的服务器端组件。这可能像无服务器 API 或标准单调的 Web 服务器一样花哨。然后，当您的前端需要这个秘密变量时，它会联系服务器并请求它，大概是在您网站的经过身份验证的部分中。这将变量排除在公共 HTML/JS 之外，但仍允许您的站点按需访问它们。

【讨论】：