Question

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

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

明确指出从process.env.HOSTNAME检索的值是6fbaeed85a68，而不是我在AWS Amplify网站界面中提供的实际值。

下面是我的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 App添加环境变量时，只需在所有环境变量名称前加上GATSBY_。记住要更改代码以使用新名称。

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

在official documentation中详细了解它。

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

1 个答案: