如何在Gatsby的onRenderBody方法中读取process.env环境变量

Gatsby 的 onRenderBody 是 gatsby-ssr.js 暴露的服务端渲染 API，运行在 Node.js 环境，只要环境变量配置正确，直接读取 process.env 下的对应变量即可。你当前代码失效的核心原因是没有把环境变量值正确插值到代码字符串和资源地址中，仅写了静态的变量名占位符。

第一步：配置环境变量 #

在项目根目录分别创建 .env.development（开发环境生效）和 .env.production（生产环境生效）文件，写入你的密钥配置：

# 示例配置，替换为你自己的实际ID
GATSBY_GOOGLE_ANALYTICS_TRACKING_ID=G-XXXXXXX
GATSBY_GOOGLE_OPTIMIZE_TRACKING_ID=OPT-XXXXXXX
GATSBY_GOOGLE_ADS_TRACKING_ID=AW-XXXXXXX

注意：修改环境变量后需要重启Gatsby本地开发服务才会生效，环境变量仅在项目启动时加载，不支持热更新。

第二步：修改代码插入变量 #

用模板字符串的 ${} 语法把 process.env 的变量值插值到对应位置，同时补充缺失的 gtag 函数定义避免报错，修改后的完整代码如下：

const React = require('react');

exports.onRenderBody = ({ setPreBodyComponents }) => {
  // 提前读取变量，避免多次重复读取process.env
  const GA_TRACKING_ID = process.env.GATSBY_GOOGLE_ANALYTICS_TRACKING_ID
  const OPT_TRACKING_ID = process.env.GATSBY_GOOGLE_OPTIMIZE_TRACKING_ID
  const ADS_TRACKING_ID = process.env.GATSBY_GOOGLE_ADS_TRACKING_ID

  setPreBodyComponents(
    <script async src={`https://www.googletagmanager.com/gtag/js?id=${ADS_TRACKING_ID}`}></script>,
    <script
      dangerouslySetInnerHTML={{
        __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '${GA_TRACKING_ID}', {
        'optimize_id': '${OPT_TRACKING_ID}'
      });

      gtag('config', '${ADS_TRACKING_ID}')
    `,
      }}
    />
  );
};

内容的提问来源于stack exchange，提问作者CodeG