如何编写可运行的GitLab CI/CD gitlab-ci.yml文件构建Angular项目

原配置核心问题 #

1. .pre/.post是GitLab CI的特殊全局钩子，无需手动指定stage，且原配置中stage: setup,多了逗号，属于YAML语法错误
2. npm start会启动开发服务器且不会自动退出，直接导致流水线卡住
3. 缓存策略设为pull，首次运行无缓存可拉取，无法正确安装依赖
4. 自定义阶段与特殊钩子混用，逻辑混乱

修正后的基础流水线配置（满足当前目标） #

image: node:14.17.0

# 定义流水线阶段顺序
stages:
  - install-deps
  - build

# 安装依赖任务
install-deps:
  stage: install-deps
  script:
    # 全局安装指定版本Angular CLI（项目依赖全局CLI时保留，否则可省略，改用npx执行）
    - npm install -g @angular/cli@12.2.16
    # 安装项目依赖
    - npm install
    # 验证依赖安装状态
    - npm --version
    - ng --version
  # 按分支缓存node_modules，避免不同分支依赖冲突
  cache:
    key: ${CI_COMMIT_REF_SLUG}-node-modules
    paths:
      - node_modules/

# 构建应用任务
build-job:
  stage: build
  needs: ["install-deps"] # 明确依赖安装任务，确保构建前依赖就绪
  script:
    # 替换为你package.json中实际的构建脚本，比如ng build --prod
    - npm run build_def_mysetup
    # 验证构建产物
    - ls -la dist/
  # 复用依赖缓存，仅拉取不更新
  cache:
    key: ${CI_COMMIT_REF_SLUG}-node-modules
    paths:
      - node_modules/
    policy: pull
  # 保存构建产物作为制品
  artifacts:
    paths:
      - dist/
    expire_in: 7 days # 按需设置制品保留时间

# 全局后置清理（GitLab会自动清理Runner环境，此为可选）
.post:
  script:
    - echo "流水线执行完成，环境将自动清理"

关键说明 #

• 拆分独立的install-deps阶段，避免特殊钩子的语法混淆
• 用needs明确任务依赖，确保构建前依赖已安装完成
• 缓存按分支设置key，避免不同分支的依赖互相干扰
• 移除npm start，防止流水线卡住
• 若项目无需全局Angular CLI，可删除npm install -g命令，改用npx ng build执行构建

后续计划实现思路 #

1. 构建失败通知开发者：添加when: on_failure的通知任务，利用GitLab内置邮件通知，或调用GitLab API发送消息到项目群组/个人
2. 构建成功后运行单元测试：新增test阶段，在build之后执行npm test，并配置测试报告作为制品
3. release分支自动打标签：新增tag阶段，仅在分支匹配release/*时执行，示例脚本：

- if [[ $CI_COMMIT_BRANCH =~ ^release/ ]]; then
    git tag -a "v${CI_COMMIT_BRANCH#release/}" -m "Release tag from branch ${CI_COMMIT_BRANCH}"
    git push origin "v${CI_COMMIT_BRANCH#release/}"
  fi

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