Jenkins Pipeline Script 部署 VuePress 到本地目錄範例

發表於 更新於 分類於 閱讀次數： Disqus：

我原先是不打算寫這篇的，因為感覺好像沒有很難，但是我最後花了一個下午的時間，決定還是記錄一下

intro

事情是這樣的：我自己會建立一些文件，用來作自己的知識管理。當然就是記錄一些比較繁瑣的事情，也順便想學習一下VuePress來做，當然因為覺得方便又漂亮，寫起來還不麻煩。最終也會想要把他部署在自己的IIS上面，這樣工作的時候需要查什麼東西就可以直接看了。

於是今天順手升級了Jenkins之後，覺得很漂亮，我一定要做些什麼，然後就打算自己順便練習一下把設定檔放在Repo裡面，這樣就只要設定Jenkins要抓的Repo網址，就可以自動化整個流程了，挺好

Jenkins

直接從2.2x版本升級到目前最新版本，套件也都更新，整個畫面都很漂亮

新建專案

照例新增一個pipeline專案，沒什麼好講的

加入參數化建置

這部分的考量是我不想要每一次都重新安裝套件，只要第一次做了之後，後續沒有新增套件，自然就不需要做了，我想作為一個VuePress專案，也沒什麼機會要去裝套件用，畢竟我只是拿來記錄而已

選擇Pipeline script from SCM，並設定好Repo網址

建立 Jenkinsfile

回到Repo根目錄，新增文件Jenkinsfile，裡面的內容就是 pipeline script

我嘗試了很多辦法，失敗過程就不提了，直接給成功案例，我應該是有什麼地方沒弄好，才會需要在裡面再抓一次 Repo，等之後有機會再重新回頭來研究吧，現在就先這樣就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
node() {
    ws('D:\\Github_Newbie-Doc-VuePress'){
        stage('git') {
            git credentialsId: '44ac570d-74df-471f-ac39-62f07b16b3be', url: 'your github repository'
        }
        stage('npm') {
            bat label: '', returnStatus: true, script: '''
            D:
            cd D:\\Github_Newbie-Doc-VuePress
            if %npmInstall% == true npm install
            '''
        }
        stage('build') {
            bat label: '', returnStatus: true, script: '''
            D:
            cd D:\\Github_Newbie-Doc-VuePress
            npm run docs:build
            '''
        }
        stage('deploy') {
            bat label: '', returnStatus: true, script: '''
            D:
            cd D:\\Github_Newbie-Doc-VuePress
            npm run docs:deploy
            '''
        }
    }
}

我在D槽新增了一個目錄給Jenkins使用，這樣配合前面的參數化設定，我可以選擇是否需要npm install，但最終的結果，我發現這個設計是多餘的。

環境變數

因為要使用 vuePress，我無法直接找到node路徑去下指令，最終是透過設定全域變數，指定了cmd.exe還有node的路徑

將設定檔推上Repo

這個步驟就是將剛剛的Jenkinsfile commit後push到Github去而已。

成果

這是成功案例，在這之前我是先寫pipeline script去測試，測試成功才把取得SOURCE的那部分移除，然後加到Repo，可以看到失敗了37次…

補充

實際上 build 完畢之後還有 deploy 的部分，在這邊因為是我 local Jenkins Deploy to local Folder , 所以我直接用 node.js 寫個拷貝資料的 script就完事，如果是要發布到其他空間，可以參考VuePress 官方文件：部署

附上拷貝檔案的sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// include fs-extra package
const fs = require("fs-extra");
const path = require("path");
const sourceDir = path.join(__dirname, "./docs/.vuepress/dist"); 
const iisFolder = 'D:\\PublishSite\\newbieDoc'


async function emptyDirAndCopyFiles () {
    try {
        await fs.emptyDir(iisFolder)
        console.log('clean iisFolder folder success!')
        await fs.copy(sourceDir, iisFolder)
        console.log('copy to iisFolder success!')
        
    } catch (err) {
        console.error(err)
    }
}

emptyDirAndCopyFiles()

補充：github 取得 repo 失敗

以前用SSH的方式在前幾天失敗了，原因是Github不支援了，必須要在Github的個人設定內，做一個 access token

然後在網址的部分改用 https://<accessToken>@github.com/<userAccount>/<repositoryName>.git 的方式請求，然後auth就不用了，像下面這樣

1
2
3
stage('git') {
    git 'https://XXXXXXXXXXXXXXX@github.com/myAccount/myProject.git'
}