[英]How to use AWS Amplify env vars in gatsby-config.js?
I am building an app with GatsbyJS.我正在用 GatsbyJS 构建一个应用程序。 I am using environment variables in my gatsby-config.js.我在 gatsby-config.js 中使用环境变量。 GatsbyJS app builds fine locally, by using .env.* files.通过使用 .env.* 文件,GatsbyJS 应用程序在本地构建得很好。 However, when building from AWS Amplify it complains about an invalid value retrieved from environment variables.但是,当从 AWS Amplify 构建时,它会抱怨从环境变量中检索到的值无效。 Indeed, it seems that when using process.env.MY_VAR
inside gatsby-config.js the value retrieved is encrypted (as per AWSAmplify docs).事实上,似乎在 gatsby-config.js 中使用process.env.MY_VAR
时,检索到的值是加密的(根据 AWSAmplify 文档)。
I tried with hardcoding the value of the env.我尝试硬编码 env 的值。 var to confirm that encryption was the problem. var 以确认加密是问题所在。 The error that I am getting is: TypeError [ERR_INVALID_URL]: Invalid URL: 6fbaeed85a68.
我得到的错误是: TypeError [ERR_INVALID_URL]: Invalid URL: 6fbaeed85a68.
Which clearly indicates that the value retrieved from process.env.HOSTNAME
is 6fbaeed85a68
and not the actual value that I provided in AWS Amplify web's interface.这清楚地表明从process.env.HOSTNAME
检索到的值是6fbaeed85a68
而不是我在 AWS Amplify web 界面中提供的实际值。
Below is my gatsby-js.config:下面是我的 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,
},
},
],
};
I don't understand how I am supposed to retrieve env vars.我不明白我应该如何检索环境变量。 Any help would be greatly appreciated.任何帮助将不胜感激。
When adding environment variables to AWS Amplify App under App Setting -> Environment Variables, just prefix GATSBY_
to all your environment variable names.在应用设置 -> 环境变量下向 AWS Amplify 应用添加环境变量时,只需在所有环境变量名称前添加GATSBY_
前缀。 Remember to change your code to use the new names.请记住更改您的代码以使用新名称。
Adding GATSBY_
makes env variables accessible to browser javascript.添加GATSBY_
使浏览器 javascript 可以访问环境变量。
Read more about it in the official documentation .在官方文档中阅读更多相关信息。
I'm stuck here as well, what exactly did you change to make it work? 我也被困在这里,您究竟做了什么更改才能使其正常工作? Just rename the environment variables in the amplify console and the gatsby-config.js? 只需在放大控制台和gatsby-config.js中重命名环境变量?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.