首頁(yè) 猿問(wèn) 允許 Netlify 訪問(wèn)...

允許 Netlify 訪問(wèn) Github 上由 .gitignore 隱藏的文件

JavaScript

慕絲7291255 2022-08-18 16:39:27

當(dāng)我嘗試在Netlify上托管項(xiàng)目時(shí)，我在Github中的存儲(chǔ)庫(kù)中遇到了一些困境。該項(xiàng)目包括一個(gè)名為的文件，并在兩個(gè) HTML 頁(yè)上引用。它包括一些變量和一個(gè)用于存儲(chǔ)我的Google Maps API密鑰的函數(shù)，所以我創(chuàng)建了一個(gè).gitignore文件來(lái)將其隱藏在我的Github存儲(chǔ)庫(kù)中。問(wèn)題是，現(xiàn)在我已經(jīng)在Netlify中部署了它，我不確定如何引用配置.js作為環(huán)境變量或類似的東西，以便Netlify能夠在呈現(xiàn)網(wǎng)站時(shí)找到我的Google Maps API密鑰?，F(xiàn)在，該網(wǎng)站呈現(xiàn)，但它不能完全工作，因?yàn)槲矣龅搅隋e(cuò)誤，因?yàn)镹etlify看不到我的配置.js文件。config.js您將在下面看到我的文件結(jié)構(gòu)，包括 .gitignore 命令和我的 config.js它存儲(chǔ) Google Maps API 密鑰，其中包含以下變量和函數(shù)調(diào)用：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);我的問(wèn)題是，我如何引用上面的變量，這些變量將我的API密鑰存儲(chǔ)在Netlify上的環(huán)境變量中？或者，有沒(méi)有辦法只允許Netlify訪問(wèn)config.js文件而不在Github中公開(kāi)它？Netlify上有一些關(guān)于部署密鑰和子模塊的文檔，但我不明白這部分文檔，我不確定它們是否與我的問(wèn)題相關(guān)。

查看完整描述

1 回答

蕪湖不蕪

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊

如前所述，您可以將要作為靜態(tài)站點(diǎn)的一部分包含的變量添加到 Netlify 的環(huán)境變量中。這使它們遠(yuǎn)離Git存儲(chǔ)庫(kù)。

棘手的部分是將這些變量從Netlify構(gòu)建環(huán)境中取出并放入您的源代碼中。您至少有兩個(gè)不同的選項(xiàng)，具體取決于變量的敏感程度：

如果你不希望你的變量被簽入 Git，但你可以將它們嵌入到你的公共 Javascript/HTML 文件中（Google Maps API 密鑰可能屬于這一類），你可以使用像 Webpack 這樣的構(gòu)建工具將環(huán)境變量注入到源代碼中。如果你使用的是 React 或其他框架，他們通常有辦法包含構(gòu)建環(huán)境中的環(huán)境變量。如果不是，則可能只需要編寫(xiě)自定義生成腳本或利用預(yù)構(gòu)建的 NPM 包在生成時(shí)將小包注入到 HTML 頁(yè)面中。實(shí)際上，看起來(lái)Netlify可以在您的頁(yè)面中注入一些自定義腳本。也許你可以試試。<script>var myVar = "<myEnvironmentVariableValue>";</script>
如果您的變量更敏感，并且您不希望它們公開(kāi)，則需要添加實(shí)際的服務(wù)器端組件。這可能與無(wú)服務(wù)器API或標(biāo)準(zhǔn)單調(diào)Web服務(wù)器一樣花哨。然后，當(dāng)您的前端需要此秘密變量時(shí)，它會(huì)連接到服務(wù)器并請(qǐng)求它，大概是從您網(wǎng)站的經(jīng)過(guò)身份驗(yàn)證的部分。這樣可以將變量排除在公共HTML / JS之外，但仍然允許您的網(wǎng)站按需訪問(wèn)它們。