一分鍾開始持續集成之旅系列之： Vue + 騰訊雲 COS 上傳部署

本文轉載自查看原文 2020-05-08 19:24 756 一分鍾開始持續集成之旅

前言

隨着Web應用的發展，運行在瀏覽器端的Web應用能夠承擔更多且更復雜的業務交互需求，前后端分離模式得以流行，並催生了如 Vue 、 React 等單頁應用框架。這些框架簡化了開發流程，但對於Web應用的部署並沒有統一的解決方案。許多項目團隊中，前端開發者在提交代碼后仍然需要人工通知項目經理、運維等相關同事進行手動或者繁瑣的更新操作。而將持續集成的概念引入前端開發將是未來解決前端代碼部署的可行性非常高的方案。
本文將介紹將介紹如何使用 CODING 實現 Vue Web 應用結合騰訊雲對象存儲服務 (COS) 的持續集成與部署。

構建概覽

本文配置的持續集成項目結構如下：

在這里插入圖片描述
由於 Web 應用通常由 html 、 css 、 js 和各種圖片、視頻等靜態資源組成，我們選擇了騰訊雲對象存儲服務 (COS) 來托管我們的靜態資源文件。通過創建代碼倉庫並配置持續集成配置和觸發規則。開發者只需要提交代碼就可以完成構建、部署的自動化實現。

准備條件

開通了騰訊雲COS服務的賬號，配置方式見下文

本地開發需要：

git
node 8.9 或更高版本

構建過程

步驟一：在 Coding 中創建 DevOps 項目

新建一個 DevOps 項目，名稱隨意：

在這里插入圖片描述

創建成功后，訪問【代碼倉庫】菜單項，獲取倉庫地址，注意這里不建議立即初始化倉庫，初始化操作可以在下文步驟二中處理：

在這里插入圖片描述

項目示例地址：https://coding-public.coding.net/p/vue-cos-ci/d/vue-cos-ci/git (圖中所涉及到的變量/名稱等信息配圖僅供參考，實際以該示例項目為准)

步驟二：創建你的 Vue 項目並推送到倉庫

推薦使用 vue-cli 腳手架搭建，它集成了本地開發、單元測試（可選） 、 代碼格式檢查 lint 和 Webpack 構建功能，並且初始化了 git 基本配置。

安裝 vue-cli：

npm i -g @vue/cli

創建 Vue 項目：

vue create vue-app-ci

注：上面的命令會進入項目配置交互式命令行，可以按照實際需求選擇配置項。
安裝成功后，我們需要推送代碼到 CODING DevOps 項目的代碼倉庫中完成代碼倉庫初始化，進入 vue-app-ci 目錄，執行 git 命令：

git remote add origin https://e.coding.net/<your-repository>/vue-cos-ci.git

git push -u origin master

步驟三：配置構建計划

點擊左側【持續集成->構建】菜單項進入構建計划頁面，新建構建計划
我們選擇【簡易模板】，並且勾選【前往配置詳情】，點擊【確定】完成創建。

在這里插入圖片描述

創建成功后，頁面自動跳轉到【構建設置->配置詳情】頁面。
我們需要編寫 Jenkins 腳本執行 代碼檢出 -> 安裝構建 -> 上傳操作。使用下面的腳本覆蓋原有的 Jenkinsfile 並點擊【保存】：

Jenkinsfile

pipeline {
  agent any
  stages {
    stage('檢出') {
      steps {
        checkout([$class: 'GitSCM',
        branches: [[name: env.GIT_BUILD_REF]],
        userRemoteConfigs: [[
          url: env.GIT_REPO_URL,
          credentialsId: env.CREDENTIALS_ID
        ]]])
      }
    }
    stage('安裝 lint 與構建') {
      steps {
        sh 'yarn'
        sh 'yarn lint'
        sh 'yarn build'
      }
    }
    stage('上傳到 COS Bucket') {
      steps {
        sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY} -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
        sh 'coscmd upload -r ./dist/ /'
        echo "上傳成功，訪問 https://${env.COS_BUCKET_NAME}.cos.${env.COS_BUCKET_REGION}.myqcloud.com/index.html 預覽效果"
      }
    }
  }
}

在這里插入圖片描述

步驟四：配置騰訊雲 COS 服務

我們需要COS來托管我們的 Vue 項目構建后生成的靜態文件，上面的 Jenkinsfile 中我們引用了4個 COS 相關的變量，分別為：

COS_SECRET_ID - 騰訊雲訪問密鑰 SecretId
COS_SECRET_KEY - 騰訊雲訪問密鑰 SecretKey
COS_BUCKET_NAME - 騰訊雲 COS 存儲桶空間名稱
COS_BUCKET_REGION - 騰訊雲 COS 存儲桶所屬地域

這些變量需要訪問 COS 服務頁面進行配置。首先開通騰訊雲對象存儲服務。
開通后，進入對象存儲->存儲桶列表創建新的存儲桶，並將訪問權限設置為“公有讀私有寫”。

在這里插入圖片描述

點擊創建，進入存儲桶詳情頁，可以獲取空間名稱、所屬地域。

在這里插入圖片描述

步驟五：配置騰訊雲訪問密鑰

進入API密鑰管理點擊【新建密鑰】，生成 SecretId 、 SecretKey。

在這里插入圖片描述

步驟六：配置環境變量

回到 Coding 構建計划，在配置詳情中切換到【變量與緩存】視圖，點擊【+添加環境變量】進行配置。出於安全需要， COS_SECRET_ID 、 COS_SECRET_KEY 設置為【保密】。
此外，還可以選擇將 /node_modules 設置為緩存目錄，避免每次安裝依賴都需要從 npm 拉取，節約您寶貴的時間。
配置完成后，別忘了點擊【保存】。

在這里插入圖片描述