0 基礎實現項目自動化部署

0 基礎實現項目自動化部署

http://zoo.zhengcaiyun.cn/blog/article/automated-deployment

前言

作爲一個前端你還在手動 npm run build 嗎?還在手動將 dist 文件夾放到服務器上嗎?Oh!這樣的方法太 Low 了,你在手動打包部署的時候,我們已經通過自動化部署完成了繁瑣的手動操作。心動嗎?趕緊上車吧!

GitlabCI 和 Jenkins

目前主流的自動化部署方案有 Jenkins 和 GitlabCI。相比於 Jenkins,GitlabCI 的優勢在於更加輕量級、配置更簡單、方便測試和集成。

而 Jenkins 的優勢在於耦合度低、插件豐富,更有 GitlabCI 不存在的功能,比如看編譯狀況統計等。

今天我們就來說說 Jenkins 自動化部署。在此之前,我們先了解下運行它的容器化應用 K8S。

K8S 簡介

KubeSphere(https://v3-2.docs.kubesphere.io/zh/docs/introduction/what-is-kubesphere/) 是在目前主流容器調度平臺 Kubernetes (k8s)(https://baike.baidu.com/item/kubernetes/22864162?fr=aladdin) 之上構建的企業級分佈式多租戶容器平臺,提供簡單易用的操作界面以及嚮導式操作方式。在降低用戶使用容器調度平臺學習成本的同時,極大減輕開發、測試、運維日常工作的複雜度,旨在解決 Kubernetes 本身存在的存儲、網絡、安全和易用性等痛點。除此之外,平臺已經整合並優化了多個適用於容器場景的功能模塊,以完整的解決方案幫助企業輕鬆應對敏捷開發與自動化運維、微服務治理、多租戶管理、工作負載和集羣管理、服務與網絡管理、應用編排與管理、鏡像倉庫管和存儲管理等業務場景。

今天我們運用其自動化運維能力來搭建一個自動化構建部署平臺。

實現步驟

第一步:創建一個項目併發布到 GitHub 上。第二步:Docker 中啓動一個 Tomcat,將部署空間映射到桌面。第三步:在 Docker 中創建一個 Jenkins 並對其做配置。**注意:此處 Jenkins 的打包構建地址與 Tomcat 部署空間的地址一致。**第四步:設置 Jenkins 觸發器並在 Github 中配置 WebHooks。第五步:配置 Jenkins 需要執行的 shell 腳本。第六步:將代碼提交到 GitHub 。第七步:查看網頁更新。

1、創建一個項目併發布到 GitHub 上

創建一個空的倉庫(這裏我們使用碼雲 (https://gitee.com/),因爲 GitHub 爲外網,在文件傳輸與訪問上相對較慢)。

將倉庫 clone 到本地。

在本地新建一個項目(這裏我們新建一個 Vue 項目)。

將本地的項目 push 到遠端倉庫。

2、Docker 中啓動一個 Tomcat,將部署空間映射到桌面

在使用 Docker 之前,我們首先需要明白一些基本知識。

什麼是 Docker ?

1、要知道兩個東西 鏡像容器
類比 let weihao = new Person() 。 就好比 鏡像實例 就好比 容器

2、記住幾個常用命令即可:

當然你也可以通過 docker --help 查詢相應命令。

啓動一個 Tomcat

使用命令

docker search tomcat

查詢到鏡像

下載鏡像

docker pull images

使用 Docker 啓動 Tomcat,並將 8080 端口映射到本地 8888 端口。

運行起來後我們就可以通過 localhost:8888 訪問到本地的 Tomcat 了。

嘗試使用文件夾 /Users/temp 映射到 Tomcat 下的 webapps 映射到本地

執行命令

docker run -it -p 8888:8080 -v /Users/temp:/usr/local/tomcat/webapps/my-project --name tomcat tomcat

在本地新建測試 HTML 文件,並放入之前指定映射的本地地址。

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta >
    <title>有趣的老凌</title>
</head>
<body>
    <div>相信美好每一天</div>
</body>
</html>

訪問以下路徑就能生效

http://localhost:8888/my-project/test.html

3、在 Docker 中創建一個 Jenkins 並對其做配置

簡單介紹一下 Jenkins

Jenkins 是一款開源 CI&CD 軟件,用於自動化各種任務,包括構建、測試和部署軟件的流程化管理軟件是一款插件式的管理軟件,方便功能擴展,目前有幾百個插件可以使用,覆蓋了版本管控、構建工具、代碼質量、構建通知、集成外部系統、UI 定製等。

使用 Docker 啓動一個 Jenkins

執行命令將本地文件夾 /Users/temp 映射到 Jenkins,並將其運行

docker run -it -p 9999:8080 -p 50000:50000 -v /Users/temp:/var/tomcatspace --name jenkins1 jenkins/jenkins

訪問本地 9999 端口我們就可以看到剛剛啓動的 Jenkins。

注:關於管理員密碼你可以在控制檯獲取,也可以在  initialAdminPassword 文件夾中找到它

選擇推薦安裝的插件就可以進入安裝頁面了

配置 Jenkins

新建 Item

基本配置信息,這邊我們選擇 Freestyle project(https://zinyan.com/?p=465)(自由風格項目)

配置基本信息,這邊我們選擇 丟棄舊的構建。爲什麼要丟棄舊的構建?(https://blog.csdn.net/xl_name/article/details/79626238)

添加憑據

注:此處的憑據是 Git 的登錄賬號和密碼。

設置倉庫地址

Q:爲什麼無法鏈接倉庫?A:如果你是內網的 Git,需要保證 Jenkins 能訪問到 Git。如果你是外網的 Git,需要保證 Git 倉庫是 public (開源) 的。

4、設置 Jenkins 觸發器並在 Github 中配置 WebHooks

設置觸發器

你可以通過以下方式觸發

http://localhost:9999/job/weihao-project/build?token=goujian

在 Github 中配置 WebHooks

當然現 localhost 不能被外網訪問到,本地環境無法添加。這裏我們使用 PostMan 或本地瀏覽器訪問來手動觸發 觸發器

選擇構建環境

5、配置 Jenkins 需要執行的 shell 腳本

在 Jenkins 配置中新增構建步驟

這邊我們選擇 執行 shell

cd /var/jenkins_home/workspace/weihao-project/
node -v
npm -v
echo '開始安裝依賴'
npm config set registry http://registry.npm.taobao.org/
npm config get registry
npm i
echo '依賴安裝完畢'
echo '開始打包'
npm run build
echo '打包完畢'
echo '準備部署'
cp -r /var/jenkins_home/workspace/weihao-project/dist/* /var/tomcatspace

配置完成後當我們訪問觸發器時,就會觸發打包了。

因爲上文的觸發器只能在內網訪問,所以我們只能在內網調試。

但在真實環境使用中實現成功後將是如下流程:

如此我們便搭建了一個完整的自動化部署項目。

項目地址

項目地址:自動化部署項目 (https://gitee.com/mslimyjj/weihao_project)

參考文檔

《快來看看如何手動搭建自動化部署系統》(https://www.bilibili.com/video/BV1Qy4y1L7Nj/?spm_id_from=333.851.header_right.fav_list.click)

《Jenkins 環境配置和項目創建》(https://blog.csdn.net/m0_59439550/article/details/122848023)

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/2qOP-lAkdh50DU9LgtmI-A