文章內容

傳統釋出和現在釋出的對比和區別
專案案例-手動上傳伺服器，使用jenkins上傳伺服器
配置不同的釋出環境
配置域名
配置https
配置釘釘機器人通知

伺服器購買：搶佔式例項

Jenkins 安裝

示例伺服器為阿里雲 CentOS 伺服器。安全組中增加 8080 埠 Jenkins 預設佔用 Jenkins 安裝大體分兩種方式，一種使用 Docker 另一種則是直接安裝，示例選擇後者。不管使用哪種方式安裝，最終使用層面都是一樣的。

Linux安裝過程 ```

下載 Jenkins 資源

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

這一步如果出現報錯，使用下面的命令解決

sudo yum install -y ca-certificates

獲取並匯入信任的包製作者的祕鑰

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

升級 yum 源中的所有包

sudo yum upgrade

Jenkins 依賴於 java 所以需要安裝 JDK

sudo yum install java-11-openjdk

安裝 Jenkins

sudo yum install jenkins ```

```

啟動 Jenkins 服務

systemctl start jenkins

重啟 Jenkins 服務

systemctl restart jenkins

停止 Jenkins 服務

systemctl stop jenkins

檢視 Jenkins 服務狀態

systemctl status jenkins ``` 啟動過程稍微得等30s，啟動服務後訪問伺服器地址 + 8080 埠（提前開啟安全組8080），Jenkins 預設為 8080 埠。

登入頁面查詢密碼:首次進入使用 cat /var/lib/jenkins/secrets/initialAdminPassword 檢視密碼。選擇推薦的外掛，進行安裝，安裝過程稍長（5分鐘以上）安裝完成以後建立使用者賬戶：xiumubai 密碼：* 訪問地址：http://8.218.133.146:8080/ 後面的步驟一下點下一步就行了，最後進入首頁

構建目標：拉取 github 程式碼

伺服器要具備 git 環境。 yum install git 點選 新建 Item 建立一個 Freestyle Project 在 原始碼管理 處選擇 git ，輸入倉庫地址，點選新增。
專案示例：https://github.com/xiumubai/guigu-oa-web.git 安裝完成以後重啟jenkins 然後到 系統管理 -> 全域性工具配置 中配置 Node 因為我們的專案需要使用npm，所以需要node 隨後去修改剛才建立的任務。在 構建環境 中會多出一個選項 Provide Node & npm bin/ folder to PATH 勾選即可。為了我們能夠在github上拉取程式碼，需要我們新增git token，在github中新增一個token 找到系統設定，找到github伺服器，點選新增 型別選擇Secret text 把剛生成的github token複製到這裡，點選新增。回到專案的設定中，找到構建環境 把我們剛才生成好的Secret text 選中即可。

然後在 Build Steps 中選擇 增加構建步驟 -> 執行 shell 輸入打包釋出相關的命令。Jenkins 會逐行執行。 node -v npm -v rm -rf node_modules npm install npm run build 構建後操作 構建完成以後，我們需要把構建的產物推送到我們的伺服器，所以需要用到ssh publisher這個外掛。安裝外掛，ssh publisher，然後配置好要釋出的伺服器環境。開啟系統設定，找到** **Publish over SSH 配置好我們需要釋出的伺服器，這樣才能連線上我們的伺服器，推送程式碼。回到任務的設定中，選擇我們剛才配置好的伺服器上面需要填寫好上傳的檔案和目標地址。最後配置好nginx的地址即可。 ``` server { listen 80; listen [::]:80; server_name _; #root /usr/share/nginx/html; # 這裡是我們配置的伺服器訪問的靜態頁面路徑 root /www/oa-web; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf;

  error_page 404 /404.html;
  location = /404.html {
  }

  error_page 500 502 503 504 /50x.html;

  location = /50x.html {
  }

} `` 配置完成以後，點選立即構建`，等構建完畢以後，在瀏覽器中訪問：http://8.218.133.146即可看到我們剛才部署好的頁面了。

拉取github不同程式碼分支，釋出不同的環境

我們在選擇部署的時候需要根據不同的分支去部署，然後部署到不同的環境安裝好git paremeters外掛然後配置引數 配置分支引數 配置選項引數 配置完成以後，我們的構建頁面就是這樣的繼續回到配置修改原始碼管理 這裡指定分支的時候就需要使用生命寫好的引數release 構建後操作 這裡的檔案目錄就需要根據env來配置，釋出不同的環境，當打不以後，我們的目錄就變成這樣的了在oa-web下面會有dev和pre兩個目錄表示不同的環境，我們只要給這兩個檔案在nginx中配置不同的域名即可訪問了。

配置域名

提前解析兩個域名 pre.xiumubai.com dev.xiumubai.com 配置nginx解析 ```

線上環境的配置

server { listen 80; listen [::]:80; server_name pre.xiumubai.com; #root /usr/share/nginx/html; root /www/oa-web/pre; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf;

error_page 404 /404.html;
location = /404.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}

}

測試環境的配置

server { listen 80; listen [::]:80; server_name dev.xiumubai.com; #root /usr/share/nginx/html; root /www/oa-web/dev; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf;

error_page 404 /404.html;
location = /404.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}

} ``` 當部署成功以後，我們就可以使用 http://pre.xiumubai.com/#/和http://dev.xiumubai.com/#/來訪問我們的專案了。

配置https

需要去自己買個免費證書，繫結域名，然後下載好證書上傳到伺服器即可。 ``` server { listen 443 ssl; server_name pre.xiumubai.com; #這裡是證書路徑 ssl_certificate cert/pre.xiumubai.com.pem; #這裡是私鑰路徑 ssl_certificate_key cert/pre.xiumubai.com.key; root /www/oa-web/pre; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf;

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

當我們使用[https://pre.xiumubai.com/#/](https://pre.xiumubai.com/#/)訪問的時候，瀏覽器會出現一個🔒 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56876c5385c945db825606e3fbff2be5~tplv-k3u1fbpfcp-zoom-1.image)代表我們的https已經配置成功了。再配置一下當我們訪問[http://pre.xiumubai.com/#/](https://pre.xiumubai.com/#/)強制跳轉到了[https://pre.xiumubai.com/#/](https://pre.xiumubai.com/#/) server { listen 80; listen [::]:80; server_name pre.xiumubai.com; # 訪問http的時候自動跳轉到https rewrite ^(.*)$ https://$host$1 permanent;

} ```

配置釘釘機器人

在jenkins中安裝外掛dingtalk，在系統管理中，最下面找到釘釘，配置機器人訊息我們提前在釘釘群中新增一個機器人，然後複製webhooks 填寫好名稱和webhooks，點選測試，關鍵字要和新增釘釘機器人的關鍵字一樣的。

然後提交即可。回到我們的任務中的配置，新增釘釘機器人當我們的任務構建以後，就會收到訊息了。

執行條件判斷

當我們在shell需要根據條件來判斷執行不同的命令的時候，就可以這麼寫了，比如我現在需要在測試環境打包npm run build:test,線上環境打包npm run buld，可以這麼寫 node -v rm -rf node_modules npm install if test $env = "test"; then echo 'test' npm run build:test else echo 'prod' npm run build fi

這樣，我們就可以選擇不同的環境，來部署程式碼了。

本期分享到這裡就結束了，當然我們還有很多事情還需要做的，怎麼把靜態資源部署到CDN，怎麼做回滾，怎麼做灰度釋出，負載均衡等等一系列，後面等研究明白了，再給大家分享。

如何使用jenkins搭建一箇中小企業前端專案部署環境