如何在静态Netlify页面中使用环境变量

时间:2020-04-20 21:28:41

标签: javascript node.js frontend netlify netlify-cms

所以我有一个使用某些API的静态网页。有一个 app.js 文件,该文件的API密钥存储在对象属性中。我需要使用 Netlify 开发人员将其隐藏。我怎么做?如何在本机js中使用 Netlify 开发工具?我很可能也需要安装node js,但是这个主题对我来说还不是很清楚...有人可以帮我逐步讲解吗?

1 个答案:

答案 0 :(得分:0)

如果它是静态站点,它将无法直接访问隐藏的netlify env变量。 如果您将app.js文件与静态站点一起托管,那么有人可以轻松浏览该文件并查看要隐藏的API密钥。

不过,一种解决方案是定义一个进行API调用的Netlify Function,然后您的静态站点中的JS可以调用该函数。 您的Netlify函数实际上将是应用程序的后端,并且可以通过process.env访问您在Netlify UI中设置的ENV变量。

有关逐步指南,请参见此tutorial


更新注释中的新gatsby-build信息。

您可以将变量放在忽略git的.env文件中,这意味着它们不会最终出现在git上,但仍会被引入并包含在gatsby生产代码中,这对客户端是可见的,因此不建议使用API​​访问密钥。理想情况下,您应该通过后端进行连接以保护这些密钥,就像上面的原始答案一样。

但是,如果您使用的是Netlify Dev CLI,而不是使用.env文件,则它将自动下拉您在Netlify在线设置中设置的所有环境变量,并允许您在本地环境中使用它们。

来自cli docs

Netlify Dev将Netlify生产环境的功能直接带到本地计算机。这包括自定义标头/重定向和环境变量