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

【问题标题】：How to use AWS Amplify env vars in gatsby-config.js?如何在 gatsby-config.js 中使用 AWS Amplify 环境变量？
【发布时间】：2019-06-20 01:22:38
【问题描述】：

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

我尝试硬编码环境的值。 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,
      },
    },
  ],
};

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

【问题讨论】：

似乎在我的变量中添加 GATSBY_ 前缀可以解决问题。从文档来看，它应该只在从浏览器访问变量时使用，所以不太清楚它为什么起作用。

标签： encryption environment-variables config gatsby aws-amplify

【解决方案1】：

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

添加 GATSBY_ 使浏览器 javascript 可以访问 env 变量。

在official documentation 中了解更多信息。

【讨论】：