如何显示GitLab Pipeline部署的网站最后更新发布时间？

完全可以借助GitLab的内置变量实现这个需求，下面是两种简单可靠的方案：

一、先了解可用的GitLab内置变量 #

GitLab Pipeline提供了现成的时间相关变量，直接用就行：

• CI_PIPELINE_CREATED_AT：流水线启动的时间（ISO 8601格式，比如2024-05-20T12:34:56Z）
• CI_COMMIT_TIMESTAMP：代码提交的时间（同样是ISO 8601格式）
• CI_COMMIT_SHORT_SHA：可选，用来搭配展示短版本哈希

二、方案1：构建时注入环境变量 #

适合Vue、React这类框架（它们会自动读取前缀符合要求的环境变量）：

1. 修改你的.gitlab-ci.yml，在构建阶段把GitLab变量写入环境变量文件：

build:
  stage: build
  script:
    # 根据你的框架选择对应的前缀：Vue用VUE_APP_，React用REACT_APP_
    - echo "VUE_APP_LAST_UPDATED=$CI_PIPELINE_CREATED_AT" > .env
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/ # 你的构建产物目录

2. 在前端代码里读取并渲染：

// 以Vue为例，React同理
const lastUpdated = process.env.VUE_APP_LAST_UPDATED;
// 转换成用户友好的本地时间格式
const formattedTime = new Date(lastUpdated).toLocaleString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit'
});

// 然后在模板里渲染：<p>最后更新：{{ formattedTime }}</p>

三、方案2：构建时生成静态JSON文件 #

适合纯JS项目或者不想依赖框架环境变量规则的场景：

1. 修改.gitlab-ci.yml，在构建阶段生成一个包含时间信息的JSON文件：

build:
  stage: build
  script:
    # 在public目录下生成build-info.json（public会被打包到构建产物里）
    - echo '{"lastUpdated": "'$CI_PIPELINE_CREATED_AT'"}' > public/build-info.json
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

2. 在前端代码里请求这个JSON文件并展示：

// 页面加载时请求
fetch('/build-info.json')
  .then(res => res.json())
  .then(data => {
    const formattedTime = new Date(data.lastUpdated).toLocaleString('zh-CN');
    // 插入到页面指定位置
    document.getElementById('last-updated').textContent = `最后更新：${formattedTime}`;
  });

注意事项 #

• 如果你想展示代码提交时间而非流水线启动时间，把CI_PIPELINE_CREATED_AT换成CI_COMMIT_TIMESTAMP即可
• ISO格式时间可以通过Date对象轻松转换成任意你需要的格式，比如指定时区、自定义显示样式

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