如何在YAML配置文件中调用环境变量读取process.env的参数值？

YAML本身不支持Node.js的process.env环境变量插值语法，你当前编写的${process.env.CLOUDINARY_API}写法无法被自动解析，需要通过预处理或者动态配置的方式实现变量注入。

方案1：改为动态JS配置（最推荐） #

Netlify CMS支持直接传入JS格式的配置，不需要依赖静态YAML文件，配合Next.js的环境变量规则即可实现读取：

• 首先将你的环境变量命名为NEXT_PUBLIC_CLOUDINARY_API（Next.js中只有带NEXT_PUBLIC_前缀的环境变量才会暴露到浏览器端，供Netlify CMS读取）
• 删掉原有的静态config.yaml，新建cms.config.js文件，写入以下内容：

export default {
  media_library: {
    name: "cloudinary",
    config: {
      cloud_name: "ponders-east",
      api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API
    }
  },
  // 其余原本写在config.yaml中的配置项全部平移到此处即可
}

• 在你初始化Netlify CMS的入口文件（通常是pages/admin.js）中引入该配置，替换原本的静态YAML加载逻辑：

import CMS from 'netlify-cms-app'
import cmsConfig from '../cms.config.js'

CMS.init({
  config: cmsConfig
})

方案2：保留YAML文件，构建阶段替换占位符 #

如果必须使用YAML格式的配置，可以通过构建脚本对占位符进行全局替换：

• 将YAML文件中的变量位改为自定义占位符：

media_library:
  name: cloudinary
  config:
    cloud_name: ponders-east
    api_key:  __CLOUDINARY_API__

• 在package.json中修改构建命令，增加占位符替换逻辑，例如使用Node脚本完成替换：

{
  "scripts": {
    "build": "node replace-env.js && next build"
  }
}

• 新建replace-env.js文件实现替换逻辑：

const fs = require('fs')
const yamlContent = fs.readFileSync('./public/config.yaml', 'utf8')
const replaced = yamlContent.replace('__CLOUDINARY_API__', process.env.NEXT_PUBLIC_CLOUDINARY_API)
fs.writeFileSync('./public/config.yaml', replaced)

注意事项 #

• Cloudinary的api_key属于公开可暴露的参数，放在前端配置中没有问题，绝对不要将Cloudinary的api_secret写入该配置，避免密钥泄露
• 如果你是静态导出Next.js项目，所有环境变量必须在构建阶段完成注入，无法在运行时动态读取服务端环境变量

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