出現了！前端自動化部署！（3）- Jenkins Giao起來！

時間 2019-11-08

原文原文鏈接

Jenkins Giao起來！

Jenkins 是什麼鬼

咱們的正主Jenkins終於要來了，哈哈哈，老規矩，看一下Jenkins是幹嗎的，百度百科走起：vue

你們看到Java也無需懼怕，我不想知道管是怎麼開發滴，我就想知道它是怎麼使用滴（請腦補德彪口音），給一個簡單的解釋吧，jenkins可讓咱們把一些經常使用的配置的操做集成成一個工做流任務，在須要的時候去執行這個任務就能夠了。

好比，咱們即將要作的動做是將github上的代碼（沒錯，趁大家不注意我已經把項目的代碼上傳到github倉庫了！）拉取到服務器上，而後進行npm run build來打包，再將打包後的資源文件放到～/nginx/www裏面, 這樣當咱們訪問nginx服務器的時候，nginx就能夠給瀏覽器返回這些文件，頁面也就渲染出來了喲，那麼這麼一套繁瑣的步驟在沒有jenkins以前是怎麼作的呢？

代碼部署方式

實現代碼部署的方式不少，咱們能夠在遠端去pull代碼，而後運行 npm install && npm run build等等的動做，也能夠在本地打包好代碼後用上一篇的方法將其傳輸到服務器上（也能夠用ftp軟件來進行傳輸），總之很麻煩了。

而如今只須要配置一個jenkins任務，在代碼push到github以後直接執行這個jenkins任務就能夠了，是否是很簡單，並且，jenkins來能夠去配置一個連接github倉庫的webhook鉤子，到時候只要咱們push代碼到github倉庫的某個分支，jenkins對應的任務就會自動執行，真的是居家旅行，殺人越貨，不對，是代碼部署的必備神器呀。
node

Jenkins的使用

好啦，那麼接下來咱們就去giao起來吧。
react

安裝運行Jenkins

首先，jenkins能夠脫離docker安裝在服務器上，可是既然咱們有了docker，那就直接由docker來拉取運行一個jenkins容器吧。
webpack

docker run \
  --rm \
  -u root \
  -p 8080:8080 \
  -v jenkins-data:/var/jenkins_home \ 
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v "$HOME":/home \ 
  jenkinsci/blueocean
複製代碼

\是換行符啦，一行放不下分開放。-u 服務器用戶名，-p仍是映射端口，咱們訪問服務器的8080端口就會訪問到這個容器的8080端口了（jenkins服務默認開啓的就是8080端口），還有一句比較重要nginx

-v "$HOME":/home
複製代碼

這個意思就是jenkins訪問的/home目錄，其實就是你服務器的$HOME目錄（其實默認的就是~目錄啦，~就是/root啦），上面兩句都是自動的，能夠不用理會，jenkinsci/blueocean就是咱們的鏡像名字，藍海（blueocean）是一個UI比較精美的jenkins的工做流任務臺，我猜測它的做者確定是海賊王的影迷，233333git

配置Jenkins

這個時候咱們能夠訪問 http://ip地址:8080 來配置jenkins了。github

解鎖Jenkins

首先須要解鎖一下jenkins：web

獲取一下密碼, 就在終端裏面喲

把密碼填寫到頁面上解鎖

點擊continue繼續

選擇插件，創建管理員帳號

解鎖以後須要去選擇一些jenkins的插件配置，若是不知道選擇什麼的話，就選擇默認的插件吧，後面再自行更改。
接下來建立一個管理員帳號，而後登錄進去就能夠了。vue-cli

編寫Jenkinsfile文件

好的，下一個步驟咱們該去建立任務而後執行了，在這裏咱們先停下來去作另外一個事情吧，那就是在本地的web項目中建立一個Jenkinsfile文件（注意，沒有後綴名喲），這個文件就像gulp中的gulpfile.js、webpack中的webpack.config.js同樣來編寫任務的，格式也很簡單：docker

pipeline {
 # 這裏是要依賴的鏡像，由於咱們的代碼須要在服務器上打包，因此須要node環境
 # 在這裏配置一下讓那個docker去啓動一個node的容器（啓動的時候若是沒有node:8.16.1-alpine鏡像會自動pull，不用擔憂）
    # node運行後端口爲3000:3000（這種端口映射不用說了吧）
    agent {
        docker {
            image 'node:8.16.1-alpine'
            args '-p 3000:3000'
        }
    }
    # 配置環境變量
    environment { 
        CI = 'true'
    }
    # 任務的具體動做（每個stage都是一個動做），形式是流式的，說白了就是上面的執行完下面的執行
    stages {
    	# 首先先去打包構建
        stage('Build') {
        	# steps表明步驟，一個stage能夠設置多個steps，每個sh後面跟着的就是這個步驟所執行的代碼
            # 一個steps也能夠設置多個sh
            steps {
            	# 這裏須要先去下載項目全部的包（這就是咱們運行node容器的緣由，沒有node下載個毛線）
                # 使用yarn是由於npm實在是太慢了（不會用yarn就去學一下），yarn不須要單獨下載，node:8.16.1-alpine鏡像中已經下載好了
                # 若是用到node-sass的話配置一下node-sass的下載地址，否則就算是yarn下載起來也是賊慢的
                # 再而後執行打包任務
                sh '''      
                    yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
                    yarn
                    yarn build
                '''
            }
        }
 # 打包完了理論上還應該有test的stage，算了算了，一切從簡
        # 直接部署代碼
        stage('Deliver') { 
        	# 先清空/home/nginx/www/react-mixture目錄，爲何是/home而不是~路徑呢？由於咱們在啓動jenkins
            # 容器的時候就配置了，jenkins訪問/home其實就是在訪問$HOME(就是~,也就是/root)
            # 而後把打包出來的build文件夾裏的全部文件扔過去（vue-cli打包後應該是dist目錄），nginx服務器就能夠訪問到這些文件了，部署就完成了
            steps {
                sh '''             
                    rm -rf /home/nginx/www/react-mixture/*
                    mv ./build/* /home/nginx/www/react-mixture
                '''
            }
        }
    }
}
複製代碼

這個配置是否是很是很是的簡單呢，哈哈哈，而後把代碼提交到github倉庫就能夠了。

可是不要高興的太早，個人乞丐版服務器運行yarn build基本上必失敗，沒辦法，運行內存過小了，因此我只能選擇在本地打包好代碼提交到github，jenkins去幫我直接移動代碼到nginx了。大家的服務器若是ok的話能夠安裝上面的來，和我同樣乞丐版的能夠參考下面的Jenkinsfile：

pipeline {
 # 不須要node容器了
    agent any
    environment { 
        CI = 'true'
    }
    # 下面也沒啥看的，直接把代碼從githu分支里拉出來後扔到nginx www裏了
    stages {
        stage('Build') {
            steps {
                sh ''
            }
        }
        stage('Deliver') { 
            steps {
                sh '''
                    rm -rf /home/nginx/www/react-mixture/*
                    mv ./build/* /home/nginx/www/react-mixture
                '''  
            }
        }
    }
}
複製代碼

ok，Jenkinsfile寫好後就能夠去jenkins裏建立個任務啦，一步一步來喲。

建立 Jenkins 任務流

任務流是Jenkins中的基本單元，咱們分開步驟來作吧：

jenkins主頁面左側導航中選擇建立任務

填寫任務名，選擇流水線（pipeline）後肯定。

配置任務相關信息

描述的話能夠填寫一下這個任務的描述，構建觸發器中選擇「GitHub hook trigger for GITScm polling」是爲了之後創建webhook的（就是當github倉庫push代碼的時候自動觸發任務執行），高級選項中定義流水線「Pipeline Script from SCM」以及SCM中選擇GIT也是爲了webhook，倉庫的url建議你們填寫https類型連接的，這樣遠程服務器就會利用https方式去github拉取代碼，若是選擇了ssh連接的話，還須要將遠程服務器的ssh key配置在github中，有點麻煩喲，下面分支就填寫要觸發任務執行並拉取代碼的分支就行了，好比我選擇的github分支就是build分支。