Jenkins + Git + Nginx 一鍵部署前端靜態站點

場景：使用 Jenkins 和 Github 在 CentOS 服務器上實現一鍵部署前端靜態站點。

主要流程： Jenkins 從 Github 上拉取代碼，執行一些操做，好比打包、跑單元測試等。而後再部署到 CentOS 服務器上。

預備知識

使用 CentOS 服務器（安裝和配置 git nodejs nginx等）：juejin.im/post/5d1c17…

CentOS 經常使用命令：juejin.im/post/5d1c10…

使用Vi/Vim：juejin.im/post/5d1c12…

Nginx 配置：juejin.im/post/5d2450…

Jenkins 安裝 配置

安裝

1. 先要安裝 Java 依賴包

yum install java

2. 安裝下載工具 wget

yum install wget -y

3. 下載 jenkins 依賴

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

4. 導入祕鑰

sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

5. 安裝 Jenkins 

yum install jenkins

6. jenkins相關目錄釋義：

• /usr/lib/jenkins/：jenkins安裝目錄，war包會放在這裏
  
• /etc/sysconfig/jenkins：jenkins配置文件，「端口」，「JENKINS_HOME」等均可以在這裏配置。
  
• /var/lib/jenkins/：默認的JENKINS_HOME。
  
• /var/log/jenkins/jenkins.log：jenkins日誌文件。

配置

1. 修改權限

爲了避免因權限出現各類問題，這裏直接修改用戶爲root。

vim /etc/sysconfig/jenkins

找到 JENKINS_USER 改成 "root"

2. 更改 jenkins 主要目錄全部權

chown -R root:root /var/lib/jenkins

chown -R root:root /var/cache/jenkins

chown -R root:root /var/log/jenkins

3. 啓動 jenkins

jenkins 啓動、重啓、中止命令：
service jenkins start 開始
service jenkins restart 重啓
service jenkins stop 中止
service jenkins status 查看狀態

service jenkins restart

啓動成功，瀏覽器輸入你的服務器 ip 地址加 jenkins 默認端口號 8080 ，就能夠看到 jenkins 解鎖頁面了。

4. 初始化 jenkins

看上面的截圖，要輸入管理員密碼，紅色代碼塊路徑就是密碼文件。

命令行輸入：

vim /var/lib/jenkins/secrets/initialAdminPassword

複製密碼到輸入框，執行下一步。

選擇安裝推薦的插件，等待安裝

建立管理員用戶

很少說，輸入好信息，點繼續。

下一步默認就行了。

初始化成功，若是遇到安裝插件失敗等問題，重試一下。

使用

1. 配置 nodejs 插件

安裝 nodejs 插件

選擇 Manage Jenkins -> Manage Plugins

以下：

等待安裝完成。

配置NodeJS：

選擇 Manage Jenkins -> Global Tool Configuration，拉到下面找到NodeJS配置，而後 Save。

2. 配置 SSH 插件

安裝SSH插件：選擇 Manage Jenkins -> Manage Plugins 

配置 SSH：選擇 Manage Jenkins -> Configure System 找到 Publish over SSH，以下

4. 建立任務

a. 點擊 New Item，選擇自由風格任務

b. 輸入項目描述

c. 配置項目github相關

建立 github 證書

d. 選擇要使用的 nodejs

e. 最後一步是構建配置

到此，任務建立完成了。在點構建以前，還有個大坑要填。

jenkins 默認在 build 結束後會 kill 掉全部的衍生進程！須要禁止 jenkins 殺死衍生進程。

命令行輸入：

vim /etc/sysconfig/jenkins

找到 JENKINS_JAVA_OPTIONS 加上 -Dhudson.util.ProcessTree.disable=true

若是你部署的不是前端靜態站點，而是要啓一個 nodejs 接口服務，流程和上面同樣，構建配置須要修改爲經過 pm2 啓動 nodejs 服務。關於 nodejs 服務這塊的 nginx 配置，參考： juejin.im/post/5d2450… 的後臺接口配置部分

  nodejs 服務的構建配置，以下：

5. 執行任務

回到首頁，選擇任務

點擊 Build Now，開始一鍵構建發佈。

每次構建都有日誌，能夠知道具體的構建流程。

下面的能夠不用看了，是另一種建立任務方式。

分割線~~~~~~~~~~~~~~~~~~~

建立流水線任務

流程代碼以下：

pipeline {
    agent any

    stages {

        stage('Checkout repository') {
            steps {
                git branch: 'master', credentialsId: '5b1799f5-79d9-44cd-a635-212cf61e2860', url: 'git@github.com:liuwei9413/vuecli3-test.git'
            }
        }

        stage('Install Deps and build project') {
            steps {
                sh 'rm -rf node_modules/'
                sh 'npm install'
                sh 'npm run build'
            }
        }

        stage('Run Unit Tests') {
            steps {
                sh 'npm test'
            }
        }

        stage('Deploy project') {
            steps {
                echo "Deploy project"
                sh "cp -rp dist/* /data/www/test/web1"
            }
        }

        stage('Check Service') {
            steps {
                sh 'service nginx restart'
                echo "success"
            }
        }

    }
}複製代碼

寫好流程執行代碼，點Save。