gatsby-browser.js 中的环境变量答案

【问题标题】：Environment variables in gatsby-browser.jsgatsby-browser.js 中的环境变量
【发布时间】：2020-12-22 14:52:20
【问题描述】：

我正在尝试将 Keycloak 与 Gatsby 集成。

我很想为 Keycloak 配置使用环境变量，以便我可以正确地容器化应用程序。我遇到了一个关于 gatsby-browser.js 的问题，它没有获取环境变量。

这是我的 gatsby-browser.js：

import React from 'react'
import { node } from 'prop-types'
import Keycloak from 'keycloak-js'
import { KeycloakProvider } from '@react-keycloak/web'
import { Spinner } from 'design-react-kit'

require('dotenv').config({
  path: `.env.development`
})

const keycloak = new Keycloak({
  realm: process.env.KEYCLOAK_REALM,
  url: process.env.KEYCLOAK_AUTH_URL,
  clientId: process.env.KEYCLOAK_AUTH_CLIENT_ID
})

const Loading = () => {
  return (
    <div className="container">
      <Spinner
        active
        double
        small={false}
        tag="span"
      />
    </div>
  )
}

const wrapRootElement = ({ element }) => {
  return (
    <KeycloakProvider
      keycloak={keycloak}
      initConfig={{
        promiseType: 'native',
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/silent-check-sso.xhtml'
      }}
      LoadingComponent={<Loading />}
    >
      {element}
    </KeycloakProvider>
  )
}

wrapRootElement.propTypes = {
  element: node
}

const _wrapRootElement = wrapRootElement
export { _wrapRootElement as wrapRootElement }

当我启动 gatsby develop 时，我得到：

Generating development JavaScript bundle failed

Can't resolve 'fs' in '/home/gbiagini/Documents/work/appaltinnovativi/swg-service/node_modules/dotenv/lib'

If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that the path is correct.

File: node_modules/dotenv/lib/main.js

failed Building development bundle - 13.100s

考虑到我在 gatsby-config.js 上执行完全相同的过程并且可以完美运行，我不明白为什么 fs 包应该是一个问题。

【问题讨论】：

标签： javascript node.js reactjs gatsby

【解决方案1】：

正如您在Gatsby's documentation about Environment variables 中看到的那样，您的客户端变量必须以GATSBY_ 为前缀，以便客户端可以使用它们。

客户端 JavaScript

对于您要访问的项目环境变量客户端浏览器 JavaScript，您可以定义环境配置文件，.env.development 和/或.env.production，在您的根文件夹中。根据您的活动环境，将找到正确的环境并将其值作为环境变量嵌入浏览器中 JavaScript。

除了.env.* 中定义的这些项目环境变量文件，您还可以定义 OS Env Vars。操作系统环境变量是以GATSBY_ 为前缀的将在浏览器 JavaScript 中可用。

因此，您需要为 .env 变量添加前缀并更新您的代码：

const keycloak = new Keycloak({
  realm: process.env.GATSBY_KEYCLOAK_REALM,
  url: process.env.GATSBY_KEYCLOAK_AUTH_URL,
  clientId: process.env.GATSBY_KEYCLOAK_AUTH_CLIENT_ID
})

【讨论】：