一. DevOps開發模式
1. 傳統模式
在傳統的開發模式中，開發的整個過程是按部就班就行：
但是這種模式存在很大的弊端：
* 工作的不協調：開發人員在開發階段，測試和運維人員其實是處於等待的狀態。等到測試階段，開發人員等待測試反饋bug，也會處於等待狀態。
* 線上bug的隱患：項目准備交付時，突然出現了bug，所有人員需要加班、等待問題的處理；
2. DevOps模式
DevOps是Development和Operations兩個詞的結合，將開發和運維結合起來的模式：
3. CI/CD
伴隨着DevOps一起出現的兩個詞就是持續集成和持續交付(部署)：
-
CI是Continuous Integration（持續集成）；
-
CD是兩種翻譯：Continuous Delivery（持續交付）或Continuous Deployment（持續部署）
(1). 持續集成CI
(2). 持續部署CD
二. 自動化部署目標和流程
1. 目標
將一個 Vue3 項目提交到gitee后，可以實現自動部署到服務器上，即 隨時提交，每隔30min中自動部署。
2. 環境准備
服務器：centos8.1 (虛擬機)
項目：基於VueCli創建的Vue3項目
代碼倉庫：gitee
服務器環境：
(1). git環境
(2). git1.8
(3). jenkins環境 （需要安裝node插件）
(4). nginx服務器
3. 流程圖
三. 基於Jenkins自動化部署詳細步驟
1. 安裝Java環境
(jenkins依賴於java環境)
(1). 先通過dnf工具搜索一下java安裝包 【dnf search java-1.8】
(2). 安裝java環境 【dnf install java-1.8.0-openjdk.x86_64】
(3) 通過指令 【java -version】查看java版本
2. 安裝git環境
服務器上需要安裝git環境, 用於jenkins和gitee進行資源的同步
運行指令【dnf install git -y】，-y表示直接進行安裝，不需要在確認了
3. 安裝/配置nginx
(1). 通過指令 【dnf install nginx -y】進行nginx的安裝
(2). 啟動nginx → 查看nginx狀態 → 設置開機自動啟動nginx
【systemctl start nginx】
【systemctl status nginx】
【systemctl enable nginx】
nginx默認監聽80端口，輸入：【 http://192.168.137.201 】，出現如下頁面，表示nginx啟動成功
(3). 在root目錄下的publish文件夾下創建一個 vue3_test1文件夾，用來存放項目發布包；然后創建一個 index.html頁面，用來測試使用。
【 mkdir /root/publish/vue3_test1 】
【touch index.html】
然后編輯 index.html頁面，隨意輸入內容即可，比如
(4). 修改nginx配置文件，使其映射到上述(3)中創建的index.html上 【vi /etc/nginx/nginx.conf】
默認配置文件：
# For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 80 default_server; listen [::]:80 default_server; server_name _; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } # Settings for a TLS enabled server. # # server { # listen 443 ssl http2 default_server; # listen [::]:443 ssl http2 default_server; # server_name _; # root /usr/share/nginx/html; # # ssl_certificate "/etc/pki/nginx/server.crt"; # ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers PROFILE=SYSTEM; # ssl_prefer_server_ciphers on; # # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # location / { # } # # error_page 404 /404.html; # location = /40x.html { # } # # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # } }
修改后的配置文件
# For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user root; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 80 default_server; listen [::]:80 default_server; server_name _; #root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { root /root/publish/vue3_test1; index index.html; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } # Settings for a TLS enabled server. # # server { # listen 443 ssl http2 default_server; # listen [::]:443 ssl http2 default_server; # server_name _; # root /usr/share/nginx/html; # # ssl_certificate "/etc/pki/nginx/server.crt"; # ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers PROFILE=SYSTEM; # ssl_prefer_server_ciphers on; # # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # location / { # } # # error_page 404 /404.html; # location = /40x.html { # } # # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # } }
(5). 重啟nginx 【systemctl restart nginx】, 繼續訪問 【 http://192.168.137.201 】，發現出現403禁止訪問了
(6). 設置整個文件夾內容的權限：【chmod -R 777 /root/publish/vue3_test1】，發現還是403禁止訪問
(7) 關閉SELinux， 通過 【vi /etc/selinux/config】，把SELINUX改為disabled，然后 reboot重啟。 最后再次訪問：【 http://192.168.137.201 】大功告成。
4. 創建gitee代碼倉庫
(1). 先通過vuecli創建一個項目vue3_test1
(2). 在gitee 創建一個私有倉庫，倉庫地址為：https://gitee.com/ypf0806/vue3_test1.git
(3). 運行下面指令，將本地的vue3_test1項目推送到遠程倉庫
【git remote add origin https://gitee.com/ypf0806/vue3_test1.git】
【git push -u origin "master"】
5. 安裝Jenkins
(1). 進入目錄 【cd /etc/yum.repos.d/ 】，然后運行指令 【wget http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo】進行下載
PS:
-
wget是Linux中下載文件的一個工具，-O表示輸出到某個文件夾並且命名為什么文件；
-
(2). 導入GPG密鑰以確保您的軟件合法
【rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key】 或 【rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key】
(3). 編輯 【vi /etc/yum.repos.d/jenkins.repo】, 改為下面代碼
[jenkins] name=Jenkins-stable baseurl=http://pkg.jenkins.io/redhat gpgcheck=1
(4). 運行指令進行安裝 【dnf install jenkins --nobest -y】
(5) 啟動jenkins → 查看狀態 → 設置開機自動啟動
【systemctl start jenkins】
【systemctl status jenkins】
【systemctl enable jenkins】
(6). Jenkins默認使用8080端口提供服務， 訪問：【 http://192.168.137.201:8080 】, 雲服務器需要配置安全組， 虛擬機需要通過防火牆開辟端口運行。運行上述地址，還是無法訪問。
運行了下面指令，發現8080端口沒有監聽到， 見鬼了。
【ps -ef|grep jenkins】
【netstat -ntap|grep 8080】
(7). 重啟虛擬機，重新啟動jenkins 【systemctl start jenkins】，訪問地址 【 http://192.168.137.201:8080 】發現成功了，至此大功告成。
(8). 查看密碼 【cat /var/lib/jenkins/secrets/initialAdminPassword】，復制到上述頁面，進入下面頁面, 選擇安裝推薦插件。
(9). 創建管理員賬號和密碼，賬號 root 密碼123456，最后進入主頁面，至此安裝徹底完成。
6. Jenkins任務配置
(1). 新建Item → 輸入任務名稱 testJenkins1→ 選擇 Freestyle project
(2). 填寫描述 → 源碼管理，輸入Url地址 → 添加訪問權限
(3). 輸入用戶名 和 密碼，這里是gitee的用戶名和密碼，如果密碼不好用，需要去gitee生成token賦值到密碼的位置，保存后，退回到上一個頁面，紅色的報錯已經沒了。
(4). 配置觸發器，選擇 Build periodically(定時構建) → 輸入 【H/5 * * * *】,表示每隔5分鍾拉取一下代碼, 保存
ps：補充觸發器的規則 ，定時字符串從左往右分別是：分 時 日 月 周
#每半小時構建一次OR每半小時檢查一次遠程代碼分支，有更新則構建 H/30 * * * * #每兩小時構建一次OR每兩小時檢查一次遠程代碼分支，有更新則構建 H H/2 * * * #每天凌晨兩點定時構建 H 2 * * * #每月15號執行構建 H H 15 * * #工作日，上午9點整執行 H 9 * * 1-5 #每周1,3,5，從8:30開始，截止19:30，每4小時30分構建一次 H/30 8-20/4 * * 1,3,5
(5). 配置到此處，已經可以實現 jenkins從 gitee上 定時抓取代碼了，通過查看控制台記錄，知道下載在如下圖目錄下
運行指令【cd /var/lib/jenkins/workspace/testJenkins1】，進入該目錄進行查看，確實拉取成功了
截至此處，Jenkins定時拉取代碼已經大功告成了，下面就是制作發布包了！！！！
(5). 退回主面板，選擇 Manage Jenkins → ① 先 Manage Plugins( 安裝node插件的位置) → ② 然后 Global Tool Configuration (配置node環境的位置)
A. 安裝node插件
B. nodejs安裝，並配置環境
C. 再回到jenkins任務中，選擇構建環境，選擇剛才的nodejs， 上面的命名為：node16.10，執行任務的時候，就會安裝，這個安裝過程有點慢
(6). 構建執行任務
構建執行的任務：
* 查看Node的版本等是否有問題；
* 執行 `npm install` 安裝項目的依賴；
* 移除原來vue3_test1文件的所有內容；
* 將打包的dist文件夾內容移動到vue3_test1文件夾；（下面的腳本可以分兩步來測試）
#第一步 pwd node -v npm -v npm install npm run build pwd echo '構建成功' ls #第二步 # 刪除/root/publish/vue3_test1文件夾里所有的內容 rm -rf /root/publish/vue3_test1/* # 將生成發布包復制到vue3_test1文件夾下 cp -rf ./dist/* /root/publish/vue3_test1/
第一步：光構建
第二步，執行刪除和遷移
繼續運行指令，發現rm刪除權限不夠，參考：https://www.cnblogs.com/zhangjianchao/p/15364286.html
主要是修改一下：【vi /etc/sysconfig/jenkins】
重新執行Jenkins任務，發現執行成功
查看vue3_test1文件夾下的內容，發現已經復制進去了。
(7). 本地修改代碼，提交到gitee上，jenkins會自動拉取發布，訪問niginx服務器 【 http://192.168.137.201】，發現是修改后的內容，至此大功告成。
!
- 作 者 : Yaopengfei(姚鵬飛)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 聲 明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
- 聲 明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。