ReactJs/Gatsby集成Clarifai部署Netlify报错：本地正常但未配置GATSBY_ENV_NAME_HERE

我之前也碰到过一模一样的情况——本地跑React/Gatsby + Clarifai完全顺畅，结果一部署到Netlify就报错，查了半天才发现是Netlify环境里没配置你本地已经设好的GATSBY_ENV_NAME_HERE环境变量。

原因很简单：Gatsby会在构建阶段处理以GATSBY_开头的环境变量，你本地肯定是在.env文件里配置了这个变量，但Netlify的服务器完全不知道这个值，所以构建或者运行时就会因为找不到变量而抛出错误。

解决步骤非常直接，跟着做就行：

• 登录Netlify后台，找到你的目标项目
• 进入项目的站点设置（Site settings），在左侧菜单栏里找到环境变量（Environment variables）选项
• 点击「添加变量」（Add a variable），把你的环境变量填进去：
  • 变量名必须和你本地.env里的完全一致：GATSBY_ENV_NAME_HERE（大小写敏感，别写错）
  • 变量值就填你本地用来连接Clarifai的密钥或者对应配置值
• 保存变量后，去部署（Deploys）页面重新触发一次构建——点击「触发部署」（Trigger deploy）然后选「部署站点」（Deploy site）就行

另外再提醒两个关键点：

• 一定要确保变量名是以GATSBY_开头的，因为只有带这个前缀的环境变量，Gatsby才会把它注入到客户端代码里，Clarifai的前端调用才拿得到这个值
• 本地测试的时候，记得用gatsby build && gatsby serve跑一遍生产环境的构建，确保本地配置没问题，避免因为拼写错误白忙活

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