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

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

注意：在本文中，我将仅关注Javascript环境 ，稍后我可能会更新其他语言。

那么为什么有必要呢？

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

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

好的，什么时候设置？

在创建项目文件夹之后，即刻。

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

好，那么我们该如何设置呢？

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

BASE_URL = http://localhost: 3000
NWE_VAR = 1234

注意：通常，将所有变量都设置为大写。

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

像下面的例子：

console .log ( process .env .NEW_VAR );

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

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

第三，将dotenv软件包安装到您的项目中。

# with npm
npm install dotenv
# or with Yarn
yarn add dotenv

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

require ( 'dotenv' ) .config()

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

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

.gitignore下行添加到我们的.gitignore文件中（如果没有则创建一个）

.env

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

另外，您可以考虑为不同的环境添加更多.env文件，例如：

.env.development.local
.env.test.local
.env.production.local

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

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

第五，在不同的环境中设置环境变量。

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

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

在Netlify中设置

在Heroku中设置

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

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

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

REACT_APP_BASE_URL = http://localhost: 3000
REACT_APP_NWE_VAR = 1234

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

或者，您可能需要完全重新启动服务器。

yarn start

• Pietro Rampazzo在Unsplash上的照片

最后的话……

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

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

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

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

（任何评论或建议都非常欢迎，一旦找到更好的解决方案，我会回来更新本文）

• https://www.microverse.org/

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