前言
隨着Web應用的發展，運行在瀏覽器端的Web應用能夠承擔更多且更復雜的業務交互需求，前後端分離模式得以流行，並催生了如 Vue 、 React 等單頁應用框架。這些框架簡化了開發流程，但對於Web應用的部署並沒有統一的解決方案。許多項目團隊中，前端開發者在提交代碼後仍然需要人工通知項目經理、運維等相關同事進行手動或者繁瑣的更新操作。而將持續集成的概念引入前端開發將是未來解決前端代碼部署的可行性非常高的方案。
本文將介紹將介紹如何使用 CODING 實現 Vue Web 應用結合 騰訊雲對象存儲服務 (COS) 的持續集成與部署。
構建概覽
本文配置的持續集成項目結構如下：
由於 Web 應用通常由 html 、 css 、 js 和各種圖片、視頻等靜態資源組成，我們選擇了騰訊雲對象存儲服務 (COS) 來託管我們的靜態資源文件。通過創建代碼倉庫並配置持續集成配置和觸發規則。開發者只需要提交代碼就可以完成構建、部署的自動化實現。
準備條件
- 開通了騰訊雲COS服務的賬號，配置方式見下文
本地開發需要：
gitnode8.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- 騰訊雲訪問密鑰 SecretIdCOS_SECRET_KEY- 騰訊雲訪問密鑰 SecretKeyCOS_BUCKET_NAME- 騰訊雲 COS 存儲桶空間名稱COS_BUCKET_REGION- 騰訊雲 COS 存儲桶所屬地域
這些變量需要訪問 COS 服務頁面進行配置。首先開通騰訊雲對象存儲服務。
開通後，進入對象存儲->存儲桶列表 創建新的存儲桶，並將訪問權限設置爲“公有讀私有寫”。
點擊創建，進入存儲桶詳情頁，可以獲取空間名稱、所屬地域。
步驟五：配置騰訊雲訪問密鑰
進入API密鑰管理 點擊【新建密鑰】，生成 SecretId 、 SecretKey。
步驟六：配置環境變量
回到 Coding 構建計劃，在配置詳情中切換到【變量與緩存】視圖，點擊【+添加環境變量】進行配置。出於安全需要， COS_SECRET_ID 、 COS_SECRET_KEY 設置爲【保密】。
此外，還可以選擇將 /node_modules 設置爲緩存目錄，避免每次安裝依賴都需要從 npm 拉取，節約您寶貴的時間。
配置完成後，別忘了點擊【保存】。
步驟七：觸發構建
根據默認的構建計劃觸發規則： 當代碼推送到 master 分支後，自動觸發持續集成。我們對代碼倉庫稍作修改並更新 master 分支，進入【持續集成->構建】頁面，可以看到構建計劃被觸發：
點擊構建計劃，進入構建詳情頁，可以看到當前構建的過程、快照等信息。
構建完成後，點擊構建可視化視圖中【上傳到COS BUCKET -> Print Message】步驟，查看構建完成後打印的消息。
步驟八：配置域名
一個完整的前後端分離應用，前端配置獨立域名有利於與後端服務解耦，下面我們介紹如何配置 CDN 加速域名（如果擁有自己的域名，可以在本頁面進行配置）。
訪問騰訊雲 COS ，進入存儲桶配置，點擊默認 CDN 加速域名的【編輯】，開啓加速域名配置 ：
保持默認選項即可。由於我們配置了公有讀的存儲桶，無需回源鑑權。
點擊保存，等待騰訊雲部署完畢，即可從域名 http://one-minute-vue-1252867045.file.myqcloud.com/ 訪問我們的 Vue 項目。