如何在 gatsby-config.js 中使用 AWS Amplify 环境变量？

Question

我正在用 GatsbyJS 构建一个应用程序。我在 gatsby-config.js 中使用环境变量。通过使用 .env.* 文件，GatsbyJS 应用程序在本地构建得很好。但是，当从 AWS Amplify 构建时，它会抱怨从环境变量中检索到的值无效。事实上，似乎process.env.MY_VAR在 gatsby-config.js 内部使用时，检索到的值是加密的（根据 AWSAmplify 文档）。

我尝试硬编码 env 的值。var 以确认加密是问题所在。我得到的错误是： TypeError [ERR_INVALID_URL]: Invalid URL: 6fbaeed85a68.

这清楚地表明，从检索到的值process.env.HOSTNAME是6fbaeed85a68，而不是我在AWS中扩增网络的接口提供的实际价值。

下面是我的 gatsby-js.config：

const path = require(`path`);
const queries = require('./src/utils/algolia');
const feedOptions = require('./src/utils/feed');
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: {
    siteUrl: new URL(process.env.HOSTNAME).href,
    title: `APP_TITLE`,
  },
  plugins: [
    {
      resolve: `gatsby-source-kentico-cloud`,
      options: {
        deliveryClientConfig: {
          projectId: process.env.KENTICO_PROJECT_ID,
        },
        languageCodenames: process.env.KENTICO_LANGUAGES.split(';'),
      },
    },
    {
      resolve: `gatsby-plugin-algolia`,
      options: {
        appId: process.env.GATSBY_ALGOLIA_APP_ID,
        apiKey: process.env.ALGOLIA_ADMIN_KEY,
        queries,
        chunkSize: 10000,
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `APP_NAME`,
        short_name: `APP_SHORT_NAME`,
        start_url: `/`,
        background_color: `#dbdcd1`,
        theme_color: `#1ad2eb`,
        display: `standalone`,
        icon: `src/images/logo-simple-transp-square-260x260.png`,
        include_favicon: true,
      },
    },
    `gatsby-plugin-offline`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        includePaths: ['src/styles/_variables'],
      },
    },
    {
      resolve: 'gatsby-plugin-mailchimp',
      options: {
        endpoint: process.env.MAILCHIMP_ENDPOINT,
      },
    },
    {
      resolve: 'gatsby-plugin-transition-link',
      options: {
        layout: require.resolve(`./src/layout`),
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: feedOptions,
    },
    {
      resolve: `gatsby-plugin-google-tagmanager`,
      options: {
        id: process.env.GTM_CODE,
        includeInDevelopment: false,
      },
    },
  ],
};

我不明白我应该如何检索环境变量。任何帮助将不胜感激。

Answer 1

在应用程序设置 -> 环境变量下向 AWS Amplify 应用程序添加环境变量时，只需GATSBY_为所有环境变量名称添加前缀即可。请记住更改您的代码以使用新名称。

添加GATSBY_使得浏览器 JavaScript 可以访问环境变量。

请阅读官方文档了解更多相关信息。