使用 Git CI/CD 和 CLI 自动部署前端项目

原创

除除

发布于 2025-11-03 12:50:00

1970

文章被收录于专栏：除除的专栏除除的专栏

内容声明

本文仅用于技术分享和学习交流，内容不包含任何广告、推广、引流、付费课程或外链信息。所有示例和配置均为技术实践，欢迎参考和自定义。

介绍了 CI/CD 的概念及其在 GitLab 中的实现，通过 .gitlab-ci.yml 配置文件定义镜像、阶段和执行条件，实现自动化构建、打包和部署。详细说明了 CLI 的用途及使用方法，包括配置 OSS 参数和执行发布命令，支持多环境发布并与 CI/CD 流程集成，提升开发和部署效率。

一、什么是 CI/CD？

CI (持续交付) 是功能迭代后自动构建、打包、校验代码格式、跑单测、单测覆盖率，常见的就是 webpack、Rollup、ESLint 等。
CD (持续部署) 是经过 CI 后，代码自动部署到服务器。

在 GitLab 中部署 CI/CD

GitLab CI/CD 通 .gitlab-ci.yml 配置文件来部署。

cd project_path

touch .gitlab-ci.yml

创建一个简单的 CI/CD 配置:

# 指定使用的镜像
image: node:latest

# 执行步骤，依次执行
stages:
  - install
  - build
  - deploy

# 安装依赖 job 下面的 stage 字段和 stages 下面的步骤一一对应
install-job:
  stage: install
  only: # 限定执行脚本的条件，only 支持 branch、tag、change、正则
    - master
    - develop
    - master
  script: # 此 stage 要执行的脚本
    -  npm i

# 打包
build-job:
  stage: build
  only:
    - master
    - develop
    - master
  script:
    -  npm run build

# 上传到服务器
deploy-job:
  stage: deploy
  only:
    - master
    - develop
    - master
  script:  
    -  npm run deploy

.gitlab-ci.yml 常用配置:

配置	说明
image	镜像
jobs	如上所示: `install-job`、`build-job` 便是 jobs，是 `.gitlab-ci.yml` 最基本的元素。
stages	用来组合 jobs 按步骤工作，jobs 下面对应的 stage 和 stages 的子集对应。
only	指定 jobs 的执行场景，相对应的是 except。

二、什么是 CLI

CLI (命令行界面) 和 CI 类似，都是解决重复劳动，例如用来初始化项目的 Vue-Cli、Create-React-App 和上传静态资源到云的 aliyunoss-cli。

使用 aliyunoss-cli 自动上传 OSS

下载安装 CLI:

npm install aliyunoss-cli --save-dev

npx aliyunoss-cli --version

创建配置文件 alioss.config.json:

{
  "region": "-",
  "accessKeyId": "-",
  "accessKeySecret": "-",
  "bucket": "-"
}

在配置文件中添加各环境对应 OSS 路径:

{
  "region": "-",
  "accessKeyId": "-",
  "accessKeySecret": "-",
  "bucket": "-",
  "releaseEnvConf": {
    "dev": {
      "source": "dist/",
      "target": "home/dev/"
    },
    "pre": {
      "source": "dist/",
      "target": "home/pre/"
    },
    "prd": {
      "source": "dist/",
      "target": "home/prd/"
    }
  }
}

发布命令:

# 测试
npx aliyunoss-cli --releaseEnv dev
# 预发布
npx aliyunoss-cli --releaseEnv pre
# 生产
npx aliyunoss-cli --releaseEnv prd

直接使用命令行拼接参数指定路径:

# 测试
npx aliyunoss-cli --source dist/ --target home/dev/

配合 .gitlab-ci.yml 添加 script 命令行:

"deploy": "aliyunoss-cli --releaseEnv dev",
"publish": "npm i && npm run build && npm run deploy"

更新记录

本文首次编辑于 2020-08-20，最近更新于 2025-11-03。

本文为原创文章，作者保留版权。转载请保留本文完整内容，并以超链接形式注明作者及原文出处。

作者: 除除

原文: http://blog.mazey.net/1695.html

(完)

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度