Azure 静态 Web 应用环境变量

Question

我正在尝试通过 Azure 静态 Web 应用发布 Gatsbyjs。 我有一个插件（gatsby-source-contentful）。

我需要传递如下变量：

{
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
},

错误：

Running 'npm run build'...


> gatsby-starter-default@0.1.0 build /github/workspace
> gatsby build

success open and validate gatsby-configs - 0.021s
error Invalid plugin options for "gatsby-source-contentful":

- "accessToken" is required
- "spaceId" is required
not finished load plugins - 0.905s

我在哪里可以通过这个？

谢谢。

Answer 1

对于 Azure 静态 Web 应用，有两种方法可以设置环境变量，一种用于前端场景，另一种用于后端场景。

由于您使用的是 Gatsby，我想假设您正在构建您的前端是安全的。为此，您需要在构建配置中添加环境变量 (azure-static-web-apps-.yml)。

像这样：

env: # Add environment variables here
  CONTENTFUL_SPACE_ID: <your-id>

这是documenation中的链接。

不要与这个用于定义后端环境变量的one 混淆。

Answer 2

他们被称为environment variables。它们旨在存储敏感数据，例如令牌、标识符等，不应将它们推送到您的存储库中，因此您应该忽略它们（在您的 .gitignore 文件中）。

默认情况下，Gatsby 会在不通知您的情况下创建 2 个环境，每个编译方法一个：

• gatsby develop：使用.env.development
• gatsby build：使用.env.production

注意：如果需要，您可以使用NODE_ENV 自定义命令添加您自己的环境来更改此行为。

因此，要将您的数据传递给您的 gatsby-config.js，您只需在项目的根目录下创建两个文件（.env.development 和 .env.production）。然后，在gatsby-config.js 的顶部添加以下 sn-p：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

注意：dotenv 已经是 Gatsby 的依赖，所以你不需要重新安装它

这将告诉 Gatsby 在哪里获取环境变量。

您只需填充两个环境文件。在 Contentful 中查找凭据，并使用您在 gatsby-config.js 中设置的合理命名将它们添加到文件中：

CONTENTFUL_SPACE_ID=123456789 
CONTENTFUL_ACCESS_TOKEN=123456789 

还请记住，在处理 Azure、Netlify、AWS 或类似的 CI/CD 工具时，您需要向服务器提供相同的环境文件，以避免在推送更改时出现代码破坏。