DevOpts 前端開發和 Spug

彭加李發表於2022-02-23
dev前端

DevOpts 前端開發和 Spug

朋友新工作是進行 DevOpts 前端開發，涉及 Spug。

DevOps 是什麼

DevOps 是一種思想。用於促進開發和運維之間的溝通、協作或整合。

Tip：DevOps 是 Development 和 Operations 的組合詞，即開發和運維。運維工程師 最基本職責是保證服務（產品）的穩定性。

DevOps 也是溝通協作的秩序化

假如軟體開發由兩個部門組成：開發部門（dev）和運維部門(ops)

  • dev 負責設計產品以及將產品做出來。
  • ops 負責將 dev 做出的產品進行釋出部署、並反饋問題給 dev

Tip：測試工程師（it行業也叫 QA）在哪裡？那就放在開發部門。因為產品得沒有問題才能交付給運維。

上面提到 DevOps 是為了：”促進開發和運維的溝通“，既然是”促進溝通“，那麼兩個部門之前需要做的事情還是得做，只是何時做？由誰做？

請看 DevOps 生命週期圖：

devops.png

DevOps 是一個無窮大符號，表明是一個不斷提升效率和持續的過程。

從 plan 開始，依次轉到 code、build 階段，測試（test）沒有問題則說明可以釋出（release），於是運維可以部署（deploy），接著對產品進行操作（operate），一旦監控（monitor）發現問題，則將反饋到計劃階段（plan），如此不斷迴圈。

  1. plan，計劃階段。開發團隊根據需求制定計劃，一旦計劃制定，編碼就開始了
  2. code，編碼。工具有 git
  3. build，使程式碼可執行（例如前端需打包成 dist）。例如 java 中的 maven
  4. test，測試程式碼是否有缺陷。自動化測試工具有 Selenium
  5. release，釋出。經過幾次手動或自動化測試，我們認為它已準備好釋出並被送往運維團隊
  6. deploy，部署。運維現在將程式碼部署到環境中。自動化部署有 kubernetes
  7. operate，操作。部署好了，就使用產品。自己人或使用者使用
  8. monitor，監控。工具有 nagios
  9. monitor -> plan。監控中收到的問題，直接反饋給 plan（計劃階段）。即整合階段
  10. 編碼修復問題，測試通過，則繼續釋出，稱之為持續整合。持續整合的工具有 Jenkins

使用 jenkens 落實 DevOps

DevOps 是一種思想，使得軟體開發能持續的提升效率。

落實 DevOps 思想需要使用一些工具。儘可能的讓其自動化。

先來做一個題，請匹配下列工具與 devops 階段：

flowchart TB subgraph b[devops 階段] code build test deploy end subgraph a[工具] gradle git selenium puppet end click git "https://baike.baidu.com/item/GIT" _blank

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-0.png

下次啟動 jenkins 還是執行 java -jar '.\jenkins .war'，使用者名稱是 admin，密碼是 d6f001fb9d324847965fcc3e881b43e8。

Tip：預設是英文，可以安裝漢化外掛（外掛搜尋 chinese）。

效果展示

注：整個實驗在只涉及一臺個人筆記本（Windows 10 家庭中文版），相關軟體有 jenkins、jdk、nginx、github

  • 本地 nginx 伺服器裡面有一個 vue 專案，初次訪問顯示...App1234

jenkins-1.png

  • 直接在 github 中修改原始碼，儲存時間是 23:28

jenkins-2.png

  • github 儲存後1分鐘，jenkins 自動構建該專案。構建時間為 23:29

jenkins-3.png

  • jenkins 構建成功，再次訪問專案，變為 ...App12345
    jenkins-4.png

jenkins 相關配置

注：由於整個實驗過程有些曲折，遇到許多問題，不太好描述，所以這裡僅僅羅列一些核心點。

jenkins 建立專案 jenkins-vue-demo，並進行相關配置

  • 配置 Github 專案的 URL
    jenkins-5.png

  • 原始碼管理配置 Git，指定到 github 倉庫的 Url
    jenkins-6.png

  • 選擇構建觸發器。筆者使用每分鐘去輪詢的方式觸發
    jenkins-7.png

  • 構建指令碼。首先進入 nginx 的 html 目錄（即 web伺服器的根目錄），然後清空該目錄的檔案和資料夾；接著將 jenkins 工作空間的 jenkins-vue-demo 專案目拷貝到 nginx 的 html 目錄；最後就通過 npm 初始化專案，以及構建生成 dist。
    jenkins-8.png

  • 構建指令碼執行完畢，目錄結構如下：
    jenkins-11.png

  • 配置 jenkins 到 Github 的憑據
    jenkins-9.png

  • 配置 Git
    jenkins-10.png

// cmd 執行 where
C:\Users\79344>where git
D:\software-dir\Git\cmd\git.exe

netflix與devops

需多科技巨頭和組織都選擇了 DevOpts 方法，例如 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/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 介面
  • 開源免費: 前後端程式碼完全開源

管理員登入介面：

about-spug.png

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），點選登入即可進入系統。

spug1.png

spug2.png

相關文章