encryption - 如何在 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 Amplify Web 界面中提供的实际值。

下面是我的 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

在 App Setting -> Environment Variables 下向 AWS Amplify App 添加环境变量时，只需前缀 GATSBY_到您所有的环境变量名称。请记住更改您的代码以使用新名称。
添加 GATSBY_使浏览器 javascript 可以访问 env 变量。
在 official documentation 中阅读更多相关信息.