在 Gatsby 中设置环境变量
Setting environment variables in Gatsby
我使用了这个教程:https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/environment-variables.md
我遵循的步骤:
1) 安装dotenv@4.0.0
2) 在根文件夹中创建两个文件:“.env.development”和“.env.production”
3) "follow their setup instructions"(dotenv npm 文档上的示例)
在gatsby-config.js
中:
const fs = require('fs');
const dotenv = require('dotenv');
const envConfig =
dotenv.parse(fs.readFileSync(`.env.${process.env.NODE_ENV}`));
for (var k in envConfig) {
process.env[k] = envConfig[k];
}
不幸的是,当我 运行 gatsby develop
时,NODE_ENV
尚未设置:
error Could not load gatsby-config
Error: ENOENT: no such file or directory, open 'E:\Front-End Projects\Gatsby\sebhewelt.com\.env.undefined'
当我手动设置时有效:
dotenv.parse(fs.readFileSync(`.env.development`));
我需要 gatsby-config 中的环境变量,因为我将敏感数据放在这个文件中:
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: envConfig.CONTENTFUL_SPACE_ID,
accessToken: envConfig.CONTENTFUL_ACCESS_TOKEN
}
}
如何让它发挥作用?
PS:附加问题 - 正如这让我想到的,我知道我不应该在 github 上放置密码和令牌,但是当 netlify 从 github 构建时,是否存在其他安全方式?
您应该只在您愿意将这些文件签入 git 时才使用 env 文件。对于 passwords/tokens/etc。将它们添加到 Netlify 或您通过其仪表板使用的任何构建工具。
您可以通过 process.env.ENV_VARIABLE
.
在 gatsby-config.js 和 gatsby-node.js 中访问这些内容
但是,您无法在浏览器中访问以这种方式添加的环境变量。为此,您需要使用 .env.development
& .env.production
.
我遇到了类似的问题,我在根目录“.env.development”和“.env.production”中创建了 2 个文件,但仍然无法访问 env 文件变量 - 它正在返回在我的 gatsby-config.js 文件中未定义。
通过 npm 安装 dotenv 并执行以下操作使其工作:
1) 当 运行 gatsby develop
process.env.NODE_ENV 返回未定义时,但是当 运行 gatsby build
返回 'production' 所以我定义它在这里:
let env = process.env.NODE_ENV || 'development';
2) 然后我使用 dotenv 但根据 process.env.NODE_ENV
指定文件路径
require('dotenv').config({path: `./.env.${env}`});
3) 然后您可以访问您的配置变量:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: `${process.env.CONTENTFUL_ID}`,
accessToken: `${process.env.CONTENTFUL_TOKEN}`,
},
},
],
}
几经搜索,发现可以通过netlify官网设置环境变量,步骤如下:
- 在自己的netlify console平台下,请到settings
- 选择构建和部署选项卡(可以在边栏上找到)
- 选择环境sub-tab选项
- 单击编辑变量和 add/put 您在
中的凭据
- 完成!
我真的不喜欢 .env.production
文件模式,我们的构建系统设置并使用 env 变量,并且有额外的构建步骤将它们写入文件是很奇怪的。但是 Gatsby 仅将环境变量列入白名单 GATSBY_
,没有明显的添加您自己的方法。
但这并不难,您可以通过在 gatsby-node.js
文件中添加如下内容来实现:
exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
const config = getConfig();
// Allow process.env.MY_WHITELIST_PREFIX_* environment variables
const definePlugin = config.plugins.find(p => p.definitions);
for (const [k, v] of Object.entries(process.env)) {
if (k.startsWith("MY_WHITELIST_PREFIX_")) {
definePlugin.definitions[`process.env.${k}`] = JSON.stringify(v);
}
}
actions.replaceWebpackConfig(config);
};
我使用了这个教程:https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/environment-variables.md
我遵循的步骤:
1) 安装dotenv@4.0.0
2) 在根文件夹中创建两个文件:“.env.development”和“.env.production”
3) "follow their setup instructions"(dotenv npm 文档上的示例)
在gatsby-config.js
中:
const fs = require('fs');
const dotenv = require('dotenv');
const envConfig =
dotenv.parse(fs.readFileSync(`.env.${process.env.NODE_ENV}`));
for (var k in envConfig) {
process.env[k] = envConfig[k];
}
不幸的是,当我 运行 gatsby develop
时,NODE_ENV
尚未设置:
error Could not load gatsby-config
Error: ENOENT: no such file or directory, open 'E:\Front-End Projects\Gatsby\sebhewelt.com\.env.undefined'
当我手动设置时有效:
dotenv.parse(fs.readFileSync(`.env.development`));
我需要 gatsby-config 中的环境变量,因为我将敏感数据放在这个文件中:
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: envConfig.CONTENTFUL_SPACE_ID,
accessToken: envConfig.CONTENTFUL_ACCESS_TOKEN
}
}
如何让它发挥作用?
PS:附加问题 - 正如这让我想到的,我知道我不应该在 github 上放置密码和令牌,但是当 netlify 从 github 构建时,是否存在其他安全方式?
您应该只在您愿意将这些文件签入 git 时才使用 env 文件。对于 passwords/tokens/etc。将它们添加到 Netlify 或您通过其仪表板使用的任何构建工具。
您可以通过 process.env.ENV_VARIABLE
.
但是,您无法在浏览器中访问以这种方式添加的环境变量。为此,您需要使用 .env.development
& .env.production
.
我遇到了类似的问题,我在根目录“.env.development”和“.env.production”中创建了 2 个文件,但仍然无法访问 env 文件变量 - 它正在返回在我的 gatsby-config.js 文件中未定义。
通过 npm 安装 dotenv 并执行以下操作使其工作:
1) 当 运行 gatsby develop
process.env.NODE_ENV 返回未定义时,但是当 运行 gatsby build
返回 'production' 所以我定义它在这里:
let env = process.env.NODE_ENV || 'development';
2) 然后我使用 dotenv 但根据 process.env.NODE_ENV
指定文件路径require('dotenv').config({path: `./.env.${env}`});
3) 然后您可以访问您的配置变量:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: `${process.env.CONTENTFUL_ID}`,
accessToken: `${process.env.CONTENTFUL_TOKEN}`,
},
},
],
}
几经搜索,发现可以通过netlify官网设置环境变量,步骤如下:
- 在自己的netlify console平台下,请到settings
- 选择构建和部署选项卡(可以在边栏上找到)
- 选择环境sub-tab选项
- 单击编辑变量和 add/put 您在 中的凭据
- 完成!
我真的不喜欢 .env.production
文件模式,我们的构建系统设置并使用 env 变量,并且有额外的构建步骤将它们写入文件是很奇怪的。但是 Gatsby 仅将环境变量列入白名单 GATSBY_
,没有明显的添加您自己的方法。
但这并不难,您可以通过在 gatsby-node.js
文件中添加如下内容来实现:
exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
const config = getConfig();
// Allow process.env.MY_WHITELIST_PREFIX_* environment variables
const definePlugin = config.plugins.find(p => p.definitions);
for (const [k, v] of Object.entries(process.env)) {
if (k.startsWith("MY_WHITELIST_PREFIX_")) {
definePlugin.definitions[`process.env.${k}`] = JSON.stringify(v);
}
}
actions.replaceWebpackConfig(config);
};