前端 Web 深入解析：运行时配置
内容提要
Heroku 推出前端 Web 云原生 Buildpack，通过将环境变量以 data-* 属性写入 HTML 文档，实现静态前端应用的运行时配置。该方法安全、标准、无需重新构建，兼容任何框架，避免构建时注入配置的安全风险，并解决前端环境变量在部署间变化的问题。
延伸解读
从构建时注入到运行时读取的转变
文章指出，静态前端应用通常将环境变量在构建时编译进产物，导致从预发到生产环境切换时需重新构建。Heroku 的新方案将配置以 data-* 属性写入 HTML 文档，使配置在运行时从环境变量加载，无需重新构建。这改变了配置的读取时机，从构建阶段转移到应用启动阶段，为多环境部署提供了更灵活的机制。
安全性与标准兼容性的考量
早期方案通过修改 JavaScript 包注入变量，存在安全风险且难以通用。新方法将配置放在 HTML 入口的 data-* 属性中，不修改最终 JS 包，因此与内容安全策略（CSP）、子资源完整性（SRI）等浏览器安全机制不冲突。文章强调这是一种标准、安全且无框架偏见的做法，适用于任何前端框架。
迁移现有应用时的注意点
文章提醒，将已有应用适配到新的运行时配置策略时，可能需要重构环境变量的读取方式，避免在构建时捕获这些值。这意味着开发者需要检查代码中是否在构建阶段就引用了 process.env 等变量，并改为在运行时通过 document.head.dataset 读取。否则，配置仍会被固化在构建产物中，无法享受运行时更新的便利。
Q&A
Heroku 的前端 Web 云原生 Buildpack 如何实现运行时配置？
它通过将环境变量以 data-* 属性直接写入 HTML 文档的 <head> 标签中来实现。例如，设置 PUBLIC_WEB_API_URL 环境变量后，HTML 中会生成 data-public_web_api_url 属性，JavaScript 可通过 document.head.dataset 访问这些值。
为什么前端静态应用需要运行时配置？
因为大多数静态 Web 应用的配置（如环境变量）在构建时就被编译进构建产物中，导致在部署环境间切换（如从 staging 到 production）时，必须重新构建才能更改 API URL 等配置。运行时配置允许在不重新构建的情况下动态更新配置。
这种运行时配置方法有哪些优势？
它安全、标准、无需重新构建，兼容任何框架。配置作为 HTML 文档的一部分，不会与内容安全策略（CSP）、子资源完整性（SRI）等浏览器安全机制冲突，也避免了修改 JavaScript 包带来的安全风险。
如何为静态 Web 应用设置运行时配置？
使用 PUBLIC_WEB_ 前缀设置环境变量，例如 PUBLIC_WEB_API_URL=https://api-staging.example.com。这些变量会在静态 Web 服务器启动时被加载，并作为 data-* 属性注入到 HTML 的 <head> 中。
在 JavaScript 中如何读取运行时配置的值？
可以通过 document.head.dataset 访问。例如，如果 HTML 中有 data-public_web_api_url 属性，则可以使用 document.head.dataset.public_web_api_url 获取其值。
这种运行时配置方法是否兼容所有前端框架？
是的，这种 Env-as-HTML-Data 技术具有通用兼容性，它不依赖任何特定框架或平台，将运行时配置作为安全的、标准的 HTML data-* 属性注入到浏览器应用中。
