如何访问使用 gatsby-plugin-nodejs 提供的 Gatsby 构建文件中的环境变量答案

【问题标题】：How to access environment variables inside Gatsby build files that are served using gatsby-plugin-nodejs如何访问使用 gatsby-plugin-nodejs 提供的 Gatsby 构建文件中的环境变量
【发布时间】：2021-08-17 09:50:19
【问题描述】：

我有一个 GatsbyJS 应用程序，它由 NodeJS express 服务器使用 gatsby-plugin-nodejs 提供服务。我在 Cloud Foundry 中将环境变量设置为 GATSBY_MY_ENVIRONMENT="Production"。

我的 NodeJS 正在使用 express 并且具有以下代码。

const express = require('express');
const app = express();
const gatsby = require("gatsby-plugin-nodejs")
const cfenv = require('cfenv');
const appEnv = cfenv.getAppEnv();
require('dotenv').config()
...
gatsby.prepare({ app }, () => {})
app.listen(appEnv.port, '0.0.0.0', function () {
    console.log("server starting on " + appEnv.url);
    console.log("My Gatsby env variable " + process.env.GATSBY_MY_ENVIRONMENT);
});

我可以在 NodeJs express 中使用console.log(process.env.GATSBY_MY_ENVIRONMENT) 控制台记录我的变量值 - Production，但我无法在我的 Gatsby 组件中获取此值。

我的 gatsby-config.js 添加了以下内容

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

如何在构建时访问我的 GatsbyJS 组件中的这个变量？我试图访问这个变量的组件可能看起来像

import React from 'react';
import Header from 'gatsby-theme-carbon/src/components/Header';

export default class MyComponent extends React.Component {
  render() {
    return (
      <div>
        My environment is {process.env.GATSBY_MY_ENVIRONMENT}
      </div>
    )
  }
}

【问题讨论】：

标签： node.js reactjs express gatsby gatsby-plugin

【解决方案1】：

您是否尝试过使用 webpack 的 DefinePlugin 使您的环境变量在您的应用中可用？

accessing environment variables in JavaScript的详细信息

这意味着添加一个gatsby-node.js - 如果你已经使用它，或者编辑它（details）：

exports.onCreateWebpackConfig = ({
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    plugins: [
      plugins.define({
        MY_FANCY_VARIABLE: 'the-value',
      }),
    ],
  })
}

【讨论】：

我没有使用这个 .. 但是“MY_FANCY_VARIABLE”是在 gatsby-node.js 文件中声明的，还是从 .env 文件中获取的？
它在gatsby-node.js 中定义，但在gatsby-node 您可以访问您的操作系统变量，以便您可以在您的应用程序中使用它们。这背后的想法可能是您不希望应用程序中的所有变量都可用。