gatsby_什么是环境变量？如何在Gatsby和Netlify中使用它们？

程序员文章站 2022-04-29 23:40:23

...

gatsby

When starting to integrate 3rd party services into your application or website, you'll start to find it useful to have different environments, such as a development and production environment.

当开始将第三方服务集成到您的应用程序或网站中时，您会发现拥有不同的环境(例如开发和生产环境)很有用。

How can we configure this so we don't have to directly edit our code to change our environment?

我们如何配置它，这样我们就不必直接编辑代码来更改环境？

什么是环境变量？ (What are environment variables?)

Environment variables are predetermined values that are typically used to provide the ability to configure a value in your code from outside of your application.

环境变量是预定值，通常用于提供从应用程序外部在代码中配置值的功能。

gatsby_什么是环境变量？如何在Gatsby和Netlify中使用它们？ — MY_SECRET_KEY environment variable used for authorization

When developing locally, or sometimes even in a deployment pipeline, you'll oftentimes find these variables stored in a file named with some kind of variation of .env.

在本地进行开发时，有时甚至在部署管道中进行开发时，通常会发现这些变量存储在以某种.env变体命名的文件中。

环境变量如何有用？ (How can environment variables be useful?)

Probably the most common use case for environment variables is being able to set up different configuration options for different environments. Often when developing against third party services, you want to have a development version or sandbox available to make test requests against, that way it doesn't impact real production data.

环境变量最常见的用例可能是能够为不同的环境设置不同的配置选项。通常，在针对第三方服务进行开发时，您希望有一个可用的开发版本或沙箱来提出测试请求，这样就不会影响实际的生产数据。

Environment variables are helpful because they allow you to change which of your environments use which third party service environment by changing an API key, endpoint, or whatever the service uses to distinguish between environments.

环境变量很有用，因为它们允许您通过更改API**，端点或服务用来区分环境的任何方式来更改哪个环境使用哪个第三方服务环境。

The code you deploy should be predictable, so by not having to change any code, just the configuration outside of the code, you can maintain that predictability.

您部署的代码应该是可预测的，因此不必更改任何代码，只需更改代码外部的配置，就可以保持可预测性。

如何保护这些文件的安全性？ (How can I keep these files secure?)

This is probably one of the more important points here – you need to ensure you're handling these files with care and not checking them into a git repository. By exposing these keys by inadvertently uploading them to a public location, the internet could easily find these keys and abuse them for their own gains.

这可能是这里更重要的一点–您需要确保谨慎处理这些文件，而不要将其检入git存储库。通过不经意地将这些**上传到公共场所来暴露这些**，Internet可以轻松找到这些**并滥用它们以获取自己的利益。

For instance, AWS keys are a valuable source. People run bots with the sole purpose of trying to scan Github for keys. If someone finds an AWS key, they could use this key to access resources such as running a bitcoin operation at your expense. This isn't to scare you, its to make you aware so you avoid your keys getting compromised.

例如， AWS**是有价值的资源。人们运行机器人的唯一目的是尝试扫描Github中的**。如果有人找到了AWS**，则可以使用此**来访问资源，例如运行比特币操作，而费用由您承担。这并不是要吓you您，而是要让您知道，从而避免**被盗用。

So how can we keep these secure? The easiest way is to add the environment file where you keep these keys to your .gitignore file.

那么我们如何保证这些安全呢？最简单的方法是将保留这些键的环境文件添加到.gitignore文件中。

To do this, simply open your existing .gitignore file or create a new one at the root of your repository and add the filename as a new line:

为此，只需打开现有的.gitignore文件或在存储库的根目录下创建一个新文件，然后将文件名添加为新行：

# Inside .gitignore
.env

If you want to get more advanced and make sure this never happens to a repository, you can check out some tools like git-secrets from AWS Labs or GitLeaks that even has a Github Action to make it easy to integrate with Github.

如果您想获得更高级的功能并确保它不会在存储库中发生，您可以从AWS Labs或GitLeaks中检出某些工具，例如git-secrets甚至还具有Github Action ，以使其易于与Github集成。

盖茨比和环境变量 (Gatsby and environment variables)

Gatsby by default makes two files available as part of its environment variable workflow that makes these values available in the client: .env.development and .env.production. These correlate to the gatsby develop and gatsby build scripts to either develop or build your site.

默认情况下， Gatsby使两个文件成为其环境变量工作流的一部分，该文件使这些值在客户端中可用： .env.development和.env.production 。这些与gatsby develop和gatsby build脚本相关，以开发或构建您的站点。

To make use of these files within the Gatsby development and build process, Gatsby requires you to prefix these variables with GATSBY_. This also works if you'd like to have them available from an OS process level.

要在Gatsby开发和构建过程中使用这些文件，Gatsby要求您在这些变量前加上GATSBY_前缀。如果您想在操作系统进程级别上使用它们，也可以使用。

Though you could integrate dotenv if you have more advanced needs or don't want to use the GATSBY_ prefix, your path of least resistance is probably to just follow the Gatsby way when working in Gatsby.

尽管如果您有更高级的需求或不想使用GATSBY_前缀，可以集成dotenv ，但是在Gatsby中工作时，阻力最小的方法可能只是遵循Gatsby方式。

Netlify和环境变量 (Netlify and environment variables)

Netlify provides the ability to add environment variables as part of its Build & deploy settings which gets picked up as part of the build processes.

Netlify提供了将环境变量添加为“ 构建和部署”设置的一部分的功能，该设置在构建过程中会被使用。

Luckily, Netlify makes it easy to add whatever environment variable you'd like to the build process! To add one, you can simply navigate to the Environment section of your project's Build & deploy settings page and add a variable under Environment variables.

幸运的是，Netlify使您可以轻松地将所需的任何环境变量添加到构建过程中！要添加一个，您只需导航到项目的“ 构建和部署设置”页面的“ 环境”部分，然后在“ 环境变量”下添加一个变量。

We'll walk you through this process a little later.

我们稍后将引导您完成此过程。

第1步：创建“世界您好”网站 (Step 1: Creating a "Hello, world" website)

For our walkthrough, we're going to set up a really basic example of a Gatsby website just for the purposes of testing this out.

在本演练中，我们将为测试盖茨比建立一个非常基本的盖茨比网站示例。

Though this isn't really a common use case of environment variables, where normally you would use them for things like API keys and service configurations, this will give you a great idea of how it fundamentally works.

尽管这实际上并不是环境变量的常见用例，但通常您会在环境变量中将它们用于API**和服务配置之类的东西，但这将使您对其基本工作原理有一个很好的了解。

We're going to use this Gatsby Sass Starter I created which will give us a starting point and add "Hello, [Environment]" depending on where it's running.

我们将使用我创建的这个Gatsby Sass Starter ，它将为我们提供一个起点，并根据运行位置添加“ Hello，[Environment]”。

To get started, let's create our local project by using the Gatsby CLI. Navigate to where you'd like to store this project and run:

首先，让我们使用Gatsby CLI创建本地项目。导航到您要存储该项目的位置并运行：

gatsby new my-env-project https://github.com/colbyfayock/gatsby-starter-sass

You can change my-env-project to whatever directory you'd like this project created in, but once you run this command, you'll now have a project in that new directory.

您可以将my-env-project更改为要在其中创建此项目的任何目录，但是一旦运行此命令，现在在该新目录中将有一个项目。

To get started, once inside that directory, run yarn develop to make changes locally or yarn build to compile your new site.

首先，进入该目录后，运行yarn develop在本地进行更改，或运行yarn build来编译新站点。

Once you're ready to go, you'll want to add this project to Github. If you're not familiar with how to do this, you can learn how to add an existing project to Github here.

准备就绪后，您将需要将此项目添加到Github。如果您不熟悉该操作，可以在这里获得如何将现有项目添加到Github的方法。

步骤2：使用Gatsby创建本地环境变量 (Step 2: Creating a local environment variable with Gatsby)

Our next step is to create a local environment and add a change that will let us see that it works.

我们的下一步是创建一个本地环境并添加更改，使我们看到它可行。

To get started, let's first create a new file at the root of our project called .env.development. It might ask you if you really want to use the . prefix, make sure you say yes!

首先，让我们首先在项目的根目录下创建一个名为.env.development的新文件。它可能会询问您是否真的要使用. 前缀，请确保您说是！

Inside that file, let's add:

在该文件中，我们添加：

# Inside .env.development
GATSBY_MY_ENVIRONMENT="Development"

Next, to make sure we don't forget to do this, let's also add this .env.development file to our .gitignore so we don't accidentally commit this to our git history. If you don't already have a .gitignore file, make sure you create it at the root of your project.

接下来，为确保我们不会忘记执行此操作，我们还要将该.env.development文件添加到.gitignore这样我们就不.env.development其意外提交到git历史记录中。如果您还没有.gitignore文件，请确保在项目的根目录下创建它。

Finally, to check that this works, let's open pages/index.js and let's replace our <h1> tag's content with a "Hello, world!" variation:

最后，要检查其是否有效，我们打开pages/index.js并用“ Hello，world！”替换<h1>标记的内容。变异：

<h1>Hello, {process.env.GATSBY_MY_ENVIRONMENT}</h1>

And if we save that change and open it in our browser, we should see "Hello, Development"!

而且，如果我们保存更改并在浏览器中打开它，则应该看到“ Hello，Development”！

Follow along with the commit!

跟随提交！

步骤3：将网站部署到Netlify (Step 3: Deploying the website to Netlify)

So we have our website created using a simple environment variable. Next we'll want to actually deploy that site to Netlify. If you haven't already, we'll need to add our website to Github or another Git provider. Make sure to have that set up before continuing on.

因此，我们使用简单的环境变量创建了我们的网站。接下来，我们将要实际将该站点部署到Netlify。如果您还没有，则需要将我们的网站添加到Github或其他Git提供商。在继续之前，请确保已进行了设置。

After creating an account and logging in to Netlify, let's click the New site from Git button the main dashboard, follow the instructions for connecting your Github or other Git provider to Netlify, and then find your new repository.

创建帐户并登录到Netlify后，让我们单击主仪表板中的“从Git新建站点”按钮，按照说明将Github或其他Git提供程序连接到Netlify，然后找到新的存储库。

Once you select your repository, you'll be asked to configure your build process. Luckily, Netlify can detect that we're using a Gatsby site and has it pre-filled for us. Unless you've added something special, keep the basic configuration to use gatsby build to build your project and public/ for the output.

选择存储库后，将要求您配置构建过程。幸运的是，Netlify可以检测到我们正在使用Gatsby网站，并为我们预先填充了该网站。除非您添加了一些特殊的东西，否则请保留基本配置以使用gatsby build来构建您的项目和public/输出。

Now before we hit Deploy, there's one thing we want to add, and that's our environment variable!

现在，在点击Deploy之前，我们要添加一件事，那就是我们的环境变量！

Right above the Deploy site button there's an Advanced button. Click that and you'll see a new dropdown with an additional New variable button.

在“ 部署站点”按钮上方，有一个“ 高级”按钮。单击该按钮，您将看到带有附加的“ 新变量”按钮的新下拉列表。

Click that New variable button, add our GATSBY_MY_ENVIRONMENT as a new variable and add Production as the value. And finally, hit Deploy site!

单击该新变量按钮，将我们的GATSBY_MY_ENVIRONMENT添加为新变量，然后将Production添加为值。最后，点击“ 部署站点” ！

From here, you should be able to watch your website deploy and once finished, you'll see your new site with "Hello, Production"!

从这里，您应该可以观看网站的部署，完成后，您将看到带有“您好，正式版”的新网站！

您可以在哪里在Netlify中添加或更新更多变量？ (Where can you add or update more variables in Netlify?)

With our example, we only added one variable during the setup. But Netlify lets you add or update any other variables you'd like.

在我们的示例中，我们在设置过程中仅添加了一个变量。但是Netlify允许您添加或更新您想要的任何其他变量。

If you'd ever like to change that variable or add more, you can navigate to the Environment section of the Build & deploy settings, where you can edit and add any other variables in the Environment variables section.

如果您想更改该变量或添加更多变量，则可以导航至“ 构建和部署”设置的“ 环境”部分，您可以在“ 环境变量”部分中编辑和添加任何其他变量。