DevOps 前端開發和 Spug
朋友新工作是進行 DevOps 前端開發,涉及 Spug。
DevOps 是什么
DevOps 是一種思想。用於促進開發和運維之間的溝通、協作或整合。
Tip:DevOps 是 Development 和 Operations 的組合詞,即開發和運維。運維工程師 最基本職責是保證服務(產品)的穩定性。
DevOps 也是溝通協作的秩序化
假如軟件開發由兩個部門組成:開發部門(dev)和運維部門(ops)
- dev 負責設計產品以及將產品做出來。
- ops 負責將 dev 做出的產品進行發布部署、並反饋問題給 dev
Tip:測試工程師(it行業也叫 QA)在哪里?那就放在開發部門。因為產品得沒有問題才能交付給運維。
上面提到 DevOps 是為了:”促進開發和運維的溝通“,既然是”促進溝通“,那么兩個部門之前需要做的事情還是得做,只是何時做?由誰做?
請看 DevOps 生命周期圖:

DevOps 是一個無窮大符號,表明是一個不斷提升效率和持續的過程。
從 plan 開始,依次轉到 code、build 階段,測試(test)沒有問題則說明可以發布(release),於是運維可以部署(deploy),接着對產品進行操作(operate),一旦監控(monitor)發現問題,則將反饋到計划階段(plan),如此不斷循環。
plan,計划階段。開發團隊根據需求制定計划,一旦計划制定,編碼就開始了code,編碼。工具有 gitbuild,使代碼可執行(例如前端需打包成 dist)。例如 java 中的 maventest,測試代碼是否有缺陷。自動化測試工具有 Seleniumrelease,發布。經過幾次手動或自動化測試,我們認為它已准備好發布並被送往運維團隊deploy,部署。運維現在將代碼部署到環境中。自動化部署有 kubernetesoperate,操作。部署好了,就使用產品。自己人或用戶使用monitor,監控。工具有 nagiosmonitor -> plan。監控中收到的問題,直接反饋給 plan(計划階段)。即集成階段- 編碼修復問題,測試通過,則繼續發布,稱之為持續集成。持續集成的工具有 Jenkins
使用 jenkens 落實 DevOps
DevOps 是一種思想,使得軟件開發能持續的提升效率。
落實 DevOps 思想需要使用一些工具。盡可能的讓其自動化。
先來做一個題,請匹配下列工具與 devops 階段:
Tip:例如 git 匹配 code。
筆者將使用 jenkins 將 code、build、test、release、deploy 這幾個階段自動化。最終達到的目的就是,一旦代碼修改並提交,jenkins 就會給我打包、部署。
安裝 jenkins
進入 jenkins 官網,提到“簡易安裝——Jenkins 是一個基於 Java 的獨立程序,可以立即運行,包含 Windows、Mac OS X 和其他類 Unix 操作系統”。
點擊“下載”進入 download 頁面,下載穩定版(LTS)的 war 包(Generic Java package(.war))。點擊確提示“您的連接不是私密連接”,從中文版切換成英文版在試,即可下載。
Tip:.war 可以通過 java 命令運行;另一種是 .msi,放入 tomcat 中運行,而 tomcat 的運行也依賴於 jdk/jre。
下載后通過 java -jar 運行 jenkins,報錯(java),所以我們得安裝 java 的 jdk。
jenkins> java -jar '.\jenkins .war'
來到官網(Java Downloads)下載 windows 版本。
Tip:下載速度太慢,於是筆者百度,從某人的網盤隨便下載了一個jdk,一直 next 安裝即可。
java 命令正常執行,說明安裝成功:
PS C:\Users\75394> java -version
java version "1.8.0_271"
Java(TM) SE Runtime Environment (build 1.8.0_271-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.271-b09, mixed mode)
Tip:筆者未做環境變量(例如 JAVA_HOME、Path)的設置,但發現環境變量中的 Path 自動給設置上了。
再次運行 jenkins:
jenkins> java -jar '.\jenkins .war'
Running from: devops-test\jenkins\jenkins .war
webroot: $user.home/.jenkins
...
2022-02-09 12:18:48.127+0000 [id=33] INFO jenkins.install.SetupWizard#init:
*************************************************************
Jenkins initial setup is required. An admin user has been created and a password generated.
Please use the following password to proceed to installation:
// 用於“解鎖 Jenkins”
d6f001fb9d324847965fcc3e881b43e8
This may also be found at: C:\Users\75394\.jenkins\secrets\initialAdminPassword
*************************************************************
2022-02-09 12:21:33.350+0000 [id=57] INFO h.m.DownloadService$Downloadable#load: Obtained the updated data file for hudson.tasks.Maven.MavenInstaller
2022-02-09 12:21:40.330+0000 [id=57] INFO hudson.util.Retrier#start: Performed the action check updates server successfully at the attempt #1
2022-02-09 12:21:40.337+0000 [id=57] INFO hudson.model.AsyncPeriodicWork#lambda$doRun$1: Finished Download metadata. 172,577 ms
2022-02-09 12:21:44.829+0000 [id=29] INFO jenkins.InitReactorRunner$1#onAttained: Completed initialization
2022-02-09 12:21:44.844+0000 [id=23] INFO hudson.WebAppMain$3#run: Jenkins is fully up and running
終端輸出的“d6f001fb9d324847965fcc3e881b43e8”(即密碼),用於下面的解鎖 Jenkins。
Tip:默認情況下,您的 Jenkins 在 https://localhost:8080/ 上運行。 這可以通過編輯 jenkins.xml 來更改,它位於您的安裝目錄中。 該文件也是更改其他引導配置參數的地方,例如 JVM 選項、HTTPS 設置等 —— 官網
瀏覽器訪問 jenkins:https://localhost:8080/,頁面顯示“Jenkins 正在准備工作,請稍候...”:
// Jenkins 正在准備工作,請稍候...
Please wait while Jenkins is getting ready to work ...
// 當 Jenkins 准備就緒時,您的瀏覽器將自動重新加載。
Your browser will reload automatically when Jenkins is ready.
約5分鍾,提示“解鎖 Jenkins”,內容如下:
解鎖 Jenkins
為了確保管理員安全地安裝 Jenkins,密碼已寫入到日志中(不知道在哪里?)該文件在服務器上:
C:\Users\75394\.jenkins\secrets\initialAdminPassword
請從本地復制密碼並粘貼到下面。
管理員密碼
// 待輸入:d6f001fb9d324847965fcc3e881b43e8
輸入密碼后,進入“自定義Jenkins”:
自定義Jenkins
插件通過附加特性來擴展Jenkins以滿足不同的需求。
[安裝推薦的插件] [自定義安裝插件]
筆者點擊“自定義安裝插件”,但沒有安裝任何插件,於是進入“jenkins 就緒”:
Tip:初次使用,沒有經驗,建議還是選擇“安裝推薦的插件”
Jenkins已就緒!
你已跳過創建admin用戶的步驟。要登錄請使用用戶名:'admin' 及用於訪問安裝向導的管理員密碼。
您已經跳過了 Jenkins URL的配置。
要配置 Jenkins URL的話,到“Jenkins管理”頁面。
Jenkins安裝已完成。
點擊“開始使用 jenkins”,進入主頁。

下次啟動 jenkins 還是運行 java -jar '.\jenkins .war',用戶名是 admin,密碼是 d6f001fb9d324847965fcc3e881b43e8。
Tip:默認是英文,可以安裝漢化插件(插件搜索 chinese)。
效果展示
注:整個實驗在只涉及一台個人筆記本(Windows 10 家庭中文版),相關軟件有 jenkins、jdk、nginx、github
- 本地 nginx 服務器里面有一個 vue 項目,初次訪問顯示
...App1234

- 直接在 github 中修改源碼,保存時間是
23:28

- github 保存后1分鍾,jenkins 自動構建該項目。構建時間為
23:29

- jenkins 構建成功,再次訪問項目,變為
...App12345

jenkins 相關配置
注:由於整個實驗過程有些曲折,遇到許多問題,不太好描述,所以這里僅僅羅列一些核心點。
jenkins 創建項目 jenkins-vue-demo,並進行相關配置
-
配置 Github 項目的 URL

-
源碼管理配置 Git,指定到 github 倉庫的 Url

-
選擇構建觸發器。筆者使用每分鍾去輪詢的方式觸發

-
構建腳本。首先進入 nginx 的 html 目錄(即
web服務器的根目錄),然后清空該目錄的文件和文件夾;接着將 jenkins 工作空間的 jenkins-vue-demo 項目目拷貝到 nginx 的 html 目錄;最后就通過 npm 初始化項目,以及構建生成 dist。

-
構建腳本執行完畢,目錄結構如下:

-
配置 jenkins 到 Github 的憑據

-
配置 Git

// cmd 執行 where
C:\Users\79344>where git
D:\software-dir\Git\cmd\git.exe
netflix與devops
需多科技巨頭和組織都選擇了 DevOps 方法,例如 amazon、facebook、netflix。
netflix 在2007 年推出了在線流媒體服務。
2014年估計,每停機1小時,將損失 20w美元,現在 netflix 可以應付這些問題了。
他們以一種神奇的方式選擇了 devops。netflix 開發了一款 Simian Army 的工具,可以在不影響用戶的情況下不斷地在環境中制造 bug,這種混亂促進開發人員構建了一個在任何此類事件發生時都不會崩潰的系統
CI/CD
CI/CD 是一種通過在應用開發階段引入自動化來頻繁向客戶交付應用的方法。
具體而言,CI/CD 可讓持續自動化和持續監控貫穿於應用的整個生命周期(從集成和測試階段,到交付和部署)
CI/CD 既可能僅指持續集成和持續交付構成的關聯環節,也可以指持續集成、持續交付和持續部署這三項構成的關聯環節。更為復雜的是,有時"持續交付"也包含了持續部署流程。
我們沒必要糾結於這些語義,只需記得 CI/CD 其實就是一個流程(通常形象地表述為管道),用於實現應用開發中的高度持續自動化和持續監控。
許多企業最開始先添加 CI,然后逐步實現交付和部署的自動化。
CI 持續集成(Continuous Integration)
CI/CD 中的"CI"始終指持續集成,它屬於開發人員的自動化流程。
成功的 CI 意味着應用代碼的更改會定期構建、測試並合並到共享存儲庫中。
Note:構建、測試通過后,再合並?
一旦開發人員對應用所做的更改被合並,系統就會通過自動構建應用並運行不同級別的自動化測試(通常是單元測試和集成測試)來驗證這些更改,確保這些更改沒有對應用造成破壞
CD 持續交付(Continuous Delivery)
完成 CI 中構建及單元測試和集成測試的自動化流程后,持續交付可自動將已驗證的代碼發布到存儲庫
持續交付的目標是擁有一個可隨時部署到生產環境的代碼庫
在持續交付中,每個階段(從代碼更改的合並,到生產就緒型構建版本的交付)都涉及測試自動化和代碼發布自動化。在流程結束時,運維團隊可以快速、輕松地將應用部署到生產環境中。
CD 持續部署(Continuous Deployment)
對於一個成熟的 CI/CD 管道來說,最后的階段是持續部署。作為持續交付——自動將生產就緒型構建版本發布到代碼存儲庫——的延伸,持續部署可以自動將應用發布到生產環境。
持續部署意味着開發人員對應用的更改在編寫后的幾分鍾內就能生效(假設它通過了自動化測試)
總而言之,所有這些 CI/CD 的關聯步驟都有助於降低應用的部署風險,因此更便於以小件的方式(而非一次性)發布對應用的更改。
不過,由於還需要編寫自動化測試以適應 CI/CD 管道中的各種測試和發布階段,因此前期投資還是會很大。
spug
靈活、強大、功能全面的開源運維平台 —— spug官網
- 開源免費,前后端完全開源,方便二次開發
- 輕松部署,無 Agent 設計,部署方便快捷
Tip:騰訊藍鯨是騰訊對外開放的一套支持私有化部署、永久免費的運維解決方案
spug 面向中小型企業設計的輕量級無 Agent 的自動化運維平台,整合了主機管理、主機批量執行、主機在線終端、文件在線上傳下載、應用發布部署、在線任務計划、配置中心、監控、報警等一系列功能。
特性:
- 批量執行: 主機命令在線批量執行
- 在線終端: 主機支持瀏覽器在線終端登錄
- 文件管理: 主機文件在線上傳下載
- 任務計划: 靈活的在線任務計划
- 發布部署: 支持自定義發布部署流程
- 配置中心: 支持 KV、文本、json 等格式的配置
- 監控中心: 支持站點、端口、進程、自定義等監控
- 報警中心: 支持短信、郵件、釘釘、微信等報警方式
- 優雅美觀: 基於 Ant Design 的 UI 界面
- 開源免費: 前后端代碼完全開源
管理員登錄界面:

Docker安裝 spug
Tip:默認已安裝 docker。初次接觸 docker 請看 這里。
- 拉取鏡像
C:\Users\75394> docker pull registry.aliyuncs.com/openspug/spug
Using default tag: latest
latest: Pulling from openspug/spug
9b4ebb48de8d: Pull complete
29382e5eb331: Pull complete
4d5237b679ae: Pull complete
6e6a89bf863e: Pull complete
ac331224f129: Pull complete
7be9fe47e7d8: Pull complete
e728e4a0c191: Pull complete
5917c661446c: Pull complete
d3c7d151176c: Pull complete
819a366f7741: Pull complete
6c2f968c028e: Pull complete
dacd1907e067: Pull complete
7918f2774cc6: Pull complete
a871dc4790c0: Pull complete
Digest: sha256:f81eabfd5bbd56c3b7d7fff043262914b21db5ebbe0102f4aa40345bba9c1704
Status: Downloaded newer image for registry.aliyuncs.com/openspug/spug:latest
registry.aliyuncs.com/openspug/spug:latest
鏡像已下載:
C:\Users\75394> docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
registry.aliyuncs.com/openspug/spug latest b79726b9911b 8 weeks ago 691MB
- 持久化存儲啟動
// D:\pjl\blogv2\exercise\spug 指的是映射本地的磁盤路徑,也可以是其他目錄,/data是容器內代碼和數據初始化存儲的路徑
C:\Users\75394> docker run -d --restart=always --name=spug -p 80:80 -v D:\pjl\blogv2\exercise\spug:/data registry.aliyuncs.com/openspug/spug
a2b18844c8d138573540dba184c9cf236f21dc88397ddfb4d48466e502191523
容器已成功啟動:
C:\Users\75394> docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
a2b18844c8d1 registry.aliyuncs.com/openspug/spug "/entrypoint.sh" 7 seconds ago Up 5 seconds 0.0.0.0:80->80/tcp spug
- 初始化。創建一個用戶名為 admin 密碼為 spug.dev 的管理員賬戶
// docker exec 在正在運行的容器中運行命令
C:\Users\75394> docker exec spug init_spug admin spug.dev
Migrations for 'account':
data/spug/spug_api/apps/account/migrations/0001_initial.py
- Create model Role
- Create model User
- Add field created_by to role
- Create model History
...
初始化/更新成功
創建用戶成功
初始化完畢后需要重啟容器
C:\Users\75394> docker restart spug
spug
- 訪問測試
在瀏覽器中輸入 http://localhost:80,輸入用戶名(admin)和密碼(spug.dev),點擊登錄即可進入系統。


