使用 GitLab CI/CD 和阿里雲 CLI 自動部署前端項目

一、什麼是 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
1.1.1

創建配置文件 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"

版權聲明

本博客所有的原創文章，作者皆保留版權。轉載必須包含本聲明，保持本文完整，並以超鏈接形式註明作者後除和本文原始地址：https://blog.mazey.net/1695.html