如何在gatsby-config.js中使用AWS Amplify env vars？

Question

我正在用GatsbyJS构建一个应用程序。我在我的gatsby-config.js中使用了环境变量。通过使用.env.*文件，GatsbyJS应用可以在本地构建得很好。然而，当从AWS Amplify构建时，它会抱怨从环境变量检索到的无效值。实际上，在gatsby-config.js中使用process.env.MY_VAR时，检索到的值似乎是加密的(根据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,
      },
    },
  ],
};

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

Answer 1

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

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

在official documentation上阅读更多关于它的信息。