如何在CI/CD流水线中实现静态HTML文件的环境变量值填充

以下几种方法都是无复杂依赖、在绝大多数CI环境中可以直接运行的方案：

方法1：sed 命令替换（通用零依赖） #

适合变量数量少的场景，所有Linux/Mac CI环境默认支持：

• 先在HTML模板中自定义占位符，比如需要插入commit_sha的位置写__COMMIT_SHA__，示例：

  <footer>版本号：__COMMIT_SHA__</footer>
  

• 在CI构建步骤中添加一行替换命令即可：
  • Linux环境CI（绝大多数通用CI镜像都是Linux）：sed -i "s/__COMMIT_SHA__/$COMMIT_SHA/g" index.html
  • MacOS环境CI：sed -i '' "s/__COMMIT_SHA__/$COMMIT_SHA/g" index.html
• 注意：上述命令中的$COMMIT_SHA要替换为你CI平台对应的环境变量名，比如GitHub Actions中为$GITHUB_SHA、GitLab CI中为$CI_COMMIT_SHA。

方法2：envsubst 批量替换（适合多变量场景） #

如果需要替换的变量超过3个，用envsubst比sed更易维护：

• 模板中直接使用shell变量格式做占位符即可，示例：

  <div>
    <p>版本号：$COMMIT_SHA</p>
    <p>构建时间：$BUILD_TIME</p>
    <p>部署环境：$DEPLOY_ENV</p>
  </div>
  

• 先将模板命名为index.template.html，构建步骤执行命令：envsubst < index.template.html > index.html
• 该工具默认集成在绝大多数Linux发行版中，无预置的情况下安装gettext包即可获取。

方法3：Node.js 脚本实现（适合已有Node环境的前端项目） #

如果你的项目已经在使用Node.js做前端构建，不需要额外引入任何渲染框架，几行脚本即可实现：

• 新建render-html.js文件：

  const fs = require('fs')
  // 读取模板
  const template = fs.readFileSync('index.template.html', 'utf-8')
  // 替换所有变量
  const renderedHtml = template
    .replaceAll('__COMMIT_SHA__', process.env.COMMIT_SHA)
    .replaceAll('__BUILD_TIME__', process.env.BUILD_TIME)
  // 输出最终HTML
  fs.writeFileSync('index.html', renderedHtml)
  

• 构建步骤执行命令：node render-html.js

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