为WebDev项目设置环境变量[如何使用]

设置环境变量是Web开发人员的最佳实践。 但是对于大多数人来说&＃xff0c;这似乎很麻烦&＃xff0c;因此很少有人应用它。 好吧&＃xff0c;实际上并不那么困难&＃xff0c;并且在大多数情况下是有必要的&＃xff0c;让我在本文中向您展示。

注意&＃xff1a;在本文中&＃xff0c;我将仅关注Javascript环境 &＃xff0c;稍后我可能会更新其他语言。

那么为什么有必要呢&＃xff1f;

首先&＃xff0c;这是出于安全原因。 显然&＃xff0c;您不希望人们在我们的代码中看到我们的“ API密钥”或“加密板条”&＃xff0c;对吗&＃xff1f;

次要的&＃xff0c;以获得更好的开发经验。 我们通常会为相关环境设置不同的数据库或服务器。 将这些地址放在代码中是一种选择&＃xff0c;但是每次我们更改环境时都需要前后切换&＃xff0c;这很痛苦。

好的&＃xff0c;什么时候设置&＃xff1f;

在创建项目文件夹之后&＃xff0c;即刻。

等等...我们可以在项目上线之前进行设置吗&＃xff1f; En…不。因为请记住&＃xff0c;如果我们在项目中使用“ git”&＃xff0c;则人们不仅可以看到我们的最终代码&＃xff0c;还可以看到我们代码的整个历史。

好&＃xff0c;那么我们该如何设置呢&＃xff1f;

首先 &＃xff0c;在项目根文件夹中创建.env文件&＃xff0c;并在其中放置至少一个变量以进行操作&＃xff08;当项目增长时&＃xff0c;您始终可以添加更多变量&＃xff09;。 例如&＃xff1a;

注意&＃xff1a;通常&＃xff0c;将所有变量都设置为大写。

其次&＃xff0c;启动项目&＃xff0c;开始编写一些代码来测试环境变量。

像下面的例子&＃xff1a;

是的&＃xff0c; process.env前缀是访问环境变量的关键&＃xff0c;我们可以在项目范围内应用此规则。

此时&＃xff0c;我们可能会或可能不会从控制台看到结果&＃xff08;“ 1234”&＃xff09;&＃xff0c;如果是&＃xff0c;请跳过以下步骤&＃xff0c;否则继续进行。

第三&＃xff0c;将dotenv软件包安装到您的项目中。

并尽早在我们的代码中添加以下行&＃xff0c;更多详细信息请参见此处 。

注意&＃xff1a;由于设置环境变量是最佳做法&＃xff0c;因此大多数Javascript框架或软件包已随附在其中。 &＃xff08;因此&＃xff0c;您可能不需要执行上述步骤&＃xff09;

第四 &＃xff0c;忽略.env文件以避免它被“ git”记录或上传到Github。

.gitignore下行添加到我们的.gitignore文件中&＃xff08;如果没有则创建一个&＃xff09;

注意&＃xff1a; 此步骤很重要&＃xff0c;应尽早进行 。 否则&＃xff0c;我们之前所做的一切都是没有用的&＃xff0c;因为每次提交时&＃xff0c;“ git”都会记录文件。

另外&＃xff0c;您可以考虑为不同的环境添加更多.env文件&＃xff0c;例如&＃xff1a;

这便于以后查看所有设置。

好的&＃xff0c;一旦这些.env文件在本地驱动器中安全了&＃xff0c;就让我们继续在生产和测试环境中设置这些变量。

第五&＃xff0c;在不同的环境中设置环境变量。

在大多数情况下&＃xff0c;我们需要运行我们的应用程序的服务器已经带有环境变量的支持&＃xff0c;例如Netlify或Heroku。

您需要做的只是在控制台面板中手动复制值。 &＃xff08;这可能是在CLI中执行此操作的一种方法&＃xff0c;一旦找到它&＃xff0c;我将在以后对其进行更新&＃xff09;。

在Netlify中设置

在Heroku中设置

如果您自己构建测试环境&＃xff0c;或者只是使用上面的相同服务&＃xff0c;请重复上面的相同过程。 &＃xff08;更多细节&＃xff0c;我可能稍后再更新&＃xff09;

第六 &＃xff0c;如果您仍然无法使变量起作用&＃xff0c;则可能存在一些其他因素的限制。

例如&＃xff0c;如果由create-react-app创建的项目&＃xff0c;则变量名称必须以REACT_APP_ prefix开头&＃xff08; 此处有更多详细信息 &＃xff09;&＃xff0c;因此我们的.env文件可能需要更改名称&＃xff0c;如下所示&＃xff1a;

类似的规则也可能适用于其他框架&＃xff0c;请查阅其文档。

或者&＃xff0c;您可能需要完全重新启动服务器。

• Pietro Rampazzo在Unsplash上的照片

最后的话……

最后&＃xff0c;您可能想知道&＃xff0c;该指南似乎并没有说明太多或太简单了……

好吧&＃xff0c;这可能正是我的目的-设置它们确实非常简单&＃xff0c;我们应该尽早这样做&＃xff08;即使在我们的第一个项目中&＃xff09;。

我看到太多&＃xff0c;经常看到人们在其存储库中泄漏了API密钥……我忍不住写出这篇文章&＃xff0c;^ z ^。

最后&＃xff0c;由于我的经验有限&＃xff0c;我不能保证上述步骤对每个项目的每个人都适用&＃xff0c;但是如果可以&＃xff0c;请帮助传播&＃xff01; 提前致谢&＃xff01;&＃xff01;&＃xff01;

&＃xff08;任何评论或建议都非常欢迎&＃xff0c;一旦找到更好的解决方案&＃xff0c;我会回来更新本文&＃xff09;

• https://www.microverse.org/

From: https://hackernoon.com/how-to-setup-environment-variables-for-web-dev-projects-h83o3yfu