Vue SSR基於Coding的持續集成部署實踐(CI/CD)

用過netlify、vercel都知道推送完就會自動觸發構建、接着線上就更新了，這種體驗能極大程度提升開發效率、減輕心智負擔node

經過Coding也能夠很方便的得到相似的體驗，本文記錄了相關的實踐配置過程web

準備

由於Vue作了SSR，且須要部署到內網的多個服務器上，Coding能夠經過堡壘機來下發部署任務到內網的多個機器。shell

若是是SPA應用能夠直接在構建完成後把build後的資源上傳到OSS或其它什麼靜態服務。npm

打開團隊配置頁: https://${團隊}.coding.net/cd-deck/admin/host-server/agents服務器

安裝堡壘機

複製命令安裝，安裝成功後便可看到加入到的堡壘機。markdown

主機組

選定堡壘機，加上要部署到的主機內網IP app

免密登陸

堡壘機生成公鑰ssh

ssh-keygen
複製代碼

複製公鑰到須要控制的機器便可免密登陸ui

ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.1.23
ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.1.24
複製代碼

構建任務

打開一個項目，項目設置開啓持續集成和製品庫，而後增長一個構建任務。url

安裝依賴buid成功後會把dist打包上傳到製品庫dist.zip

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('自定義構建過程') {
        steps {
          echo '自定義構建過程開始'
          sh 'npm install -g cnpm --registry=https://registry.npm.taobao.org'
          sh 'cnpm install'
          sh 'npm run build'
          sh 'zip -r dist.zip dist/*'
          echo '構建完成.'
        }
      }
      stage(' 上傳到 generic 倉庫') {
        steps {
          codingArtifactsGeneric(files: 'dist.zip', repoName: "${GENERIC_REPO_NAME}")
        }
      }
    }
  }
複製代碼

設置構建任務的觸發規則爲推送新標籤時觸發

建立應用

打開團隊持續部署頁 https://${你的團隊}.coding.net/cd-deck/app

新建應用 > 選擇主機組部署

打開詳情 > 新建部署流程

配置製品下載 > dist.zip下載到指定目錄

新增一個後執行腳本 > 該腳本會重啓nodejs服務

update.sh

BASE_FOLDER=$(dirname "$0")
cd $BASE_FOLDER
rm -rf ./dist
unzip dist.zip
forever stop server.js
forever start server.js
複製代碼

配置健康探針 > 用於檢測服務是否運行正常

添加觸發器 > 當製品庫更新自動觸發部署流程

最後整個流程

這樣當推送了一個新tag後（固然也能夠手動觸發），就會觸發構建任務，製品庫dist.zip被更新後觸發了部署流程。

部署流程會把dist.zip下載到主機組中機器列表上的指定存儲位置，執行update.sh重啓web服務，健康檢查部署流程執行成功。

缺點

目前用下來的問題有:

構建速度仍是有點慢
構建任務有時候會失敗

但總體來說仍是很好用的，比起以前的更新部署來說，節省了不少心智負擔，推送完只需等待便可，期間還能繼續摸魚hh