1.Jenkins部署前端項目

在使用Jenkins部署前端項目時需要搭建好 JenKins 的自動化部署環境。

1）Linux服務器上安裝好了JDK 或者 OpenJDK 軟件，並配好了環境變量

2）Linux服務器上安裝好 Jenkins 軟件，並安裝了 JenKins 推薦安裝的插件

3）Linux服務器上安裝好了Node軟件，並配好了環境變量（npm 需要設置淘寶鏡像）

# 設置淘寶鏡像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4）Linux服務器上安裝好了Git軟件，並配好了環境變量

1.新建任務

1）首先登錄自己搭建好的 JenKins 後臺系統。

2）然後在首頁的菜單欄中點擊新建任務。

3）輸入新建任務的名稱（填寫項目的名稱即可，下面項目的名稱用 testweb）

4）選擇構建一個自由風格的軟件項目然後點擊確認，即可完成一個構建任務的新建。

新建任務是什麼任務？上面新建的 testweb 任務就是一個集成了自動化構建與部署 testweb項目的任務。

2.General

上面點擊確認之後會進入到下面這個頁面，這個頁面的作用就是對 testweb任務的基本配置。

1 ) 填寫任務的基本描述（可選）

2 ）勾選丟棄舊的構建（可選）

a）保持構建的天數（可選），構建記錄將保存10天數

b）保持構建的最大個數（可選），最多8個數目的構建記錄將被保存

c）發佈包保留天數（可選），點擊右邊的高級可填寫

d）發佈包最大保留#個構建（可選），點擊右邊的高級可填寫

3）填完後點擊底部的應用

參數構建過程（當點擊立即構建時可以手動選擇構建的分支和Tag，需要安裝Git Parameter插件）

3.源碼管理

指定 testweb任務需要管理的源碼和倉庫，後面JenKins在自動化構建的時候會自動把這裏配置的源碼 clone下來進行自動化構建。

1）指定源碼的git倉庫 https://github.com/LiuJunb/testweb.git（這裏使用github中的倉庫）

testweb項目目錄結構：

|-- package.json
|-- README.md
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.css
|           `-- main.js
`-- webpack.config.js

2）點擊添加，是添加 github 倉庫操作的用戶名和密碼

3）第二步添加完github 倉庫操作的用戶名和密碼後，第三步選擇使用的對應的用戶名和密碼

4）指定以後clone的分支（下面指定的是主分支）

第一步指定源碼的git倉庫路徑時報錯？

1）Linux服務器上沒安裝好了Git軟件或者環境變量沒配好

2）沒有完成下面第2步和第3步（也就是說沒用添加用戶名和密碼，或者用戶名和密碼不對）

2）點擊添加，是添加 github 倉庫操作的用戶名和密碼示例圖

填寫完用戶名和密碼後點擊添加即可

4.構建觸發器

給 testweb 任務添加構建觸發器（即什麼時候開始觸發自動化構建）。

1 ) 勾選輪詢SCM （ Software configuration management 軟件配置管理），作用就是定時檢查git倉庫中的代碼是否有更新，如果有更新就行觸發一次構建。

2 ）填寫輪詢的規則H/15 * * * *（每隔15分鐘觸發一次構建，填寫規則可以點擊第3步的問號可以查看語法）

日程表填寫的語法：

# 每隔15分鐘觸發一次構建(即每15分鐘會自動觸發一次檢查git倉庫中代碼是否發生變化，如果變就觸發一次構建)
H/15 * * * *
# every ten minutes in the first half of every hour (three times, perhaps at :04, :14, :24)。每小時的前29分鐘，每隔10分鐘觸發一次構建
H(0-29)/10 * * * *
# once every two hours at 45 minutes past the hour starting at 9:45 AM and finishing at 3:45 PM every weekday.
45 9-16/2 * * 1-5
# once in every two hours slot between 9 AM and 5 PM every weekday (perhaps at 10:38 AM, 12:38 PM, 2:38 PM, 4:38 PM)
H H(9-16)/2 * * 1-5
# once a day on the 1st and 15th of every month except December
H H 1,15 1-11 *

5.構建環境

選擇 testweb 的構建環境（因爲前端的模塊化構建項目需要依賴Node環境）。

1）選擇 Provide Node & npm bin/ folder to PATH

沒出現這個選項？請安裝 NodeJS 插件

2）選擇已經配好的Node環境別名Node10.16（ NodeJS Installation ）

沒得選？1）請安裝 NodeJS 插件 2）在系統管理->全局工具配置-> 找到NodeJS, 並新建一個NodeJS環境

不會安裝 NodeJS 插件和配置新建一個NodeJS環境的可往下面看

1.安裝 NodeJS 插件

1 ) 在線安裝

在系統管理->插件管理-> 可選插件 ->右邊搜索NodeJS -> 然後點擊直接安裝->安裝完成後重啓JenKins

2 ）或離線安裝

在系統管理->插件管理-> 高級 -> 在上傳插件中選擇離線插件（插件格式xxx.hpi） -> 然後點擊上傳->安裝完成後重啓JenKins

2.配NodeJS環境

在系統管理->全局工具配置-> 找到NodeJS

1 ) 找到NodeJS, 然後點擊新增NodeJS（有自動安裝 NodeJS 環境，也可以直接使用系統安裝好的NodeJS，下面使用系統安裝好的NodeJS，點擊新增NodeJS之後點擊取消自動安裝 NodeJS）

2 ) 輸入NodeJS的別名Node10.16 和選擇系統已經安裝好的Node的安裝目錄（注意不用到Node的bin目錄）

3 ）配置完成後點擊保存，然後回到上面的第二步就可以選擇剛纔起的別名Node10.16

6.構建

編寫構建 testweb 項目的命令：npm install npm run build

1 ）點擊添加構建步驟 > 選擇執行shell

2 ) 編寫構建testweb項目的命令

3 ）最後點擊保存

執行構建的命令

pwd
ls

node -v
npm -v
git --version
java -version

echo '構建的版本號:'${BUILD_NUMBER}

npm install
npm run build

pwd

echo '----- 以上的列出的文件是 jenkin 服務 workspace 中 testweb 目錄下的文件-------'

其中 ${BUILD_NUMBER} 是引用了環境變量列表中的 BUILD_NUMBER 變量

7.測試一下立即構建

上面編寫完構建命令之後，點擊保存後來到這個頁面。

1）點擊下面的立即構建-測試一個下構建是否成功

2）點擊第2步可以查看構建詳情

1.查看構建控制檯輸出

Started by user liujun
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/testweb
using credential 54155335-c222-4785-81f2-9bc4f89f72aa
 > git rev-parse --is-inside-work-tree # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/LiuJunb/testweb.git # timeout=10
Fetching upstream changes from https://github.com/LiuJunb/testweb.git
 > git --version # timeout=10
using GIT_ASKPASS to set credentials 
 > git fetch --tags --progress https://github.com/LiuJunb/testweb.git +refs/heads/*:refs/remotes/origin/*
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
 > git rev-parse refs/remotes/origin/origin/master^{commit} # timeout=10
Checking out Revision 68edba65647b77c1cf78df941d5f73875a529da2 (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 68edba65647b77c1cf78df941d5f73875a529da2
Commit message: "msg"
 > git rev-list --no-walk 7d7722b7c926d7f8688326ce40d3d1b51961e851 # timeout=10
[testweb] $ /bin/sh -xe /tmp/jenkins2081174913781868196.sh

+ pwd
/var/lib/jenkins/workspace/testweb


+ ls
package.json
package-lock.json
README.md
src
webpack.config.js


+ node -v
v10.16.3


+ npm -v
6.9.0


+ git --version
git version 1.8.3.1


+ java -version
java version "1.8.0_151"
Java(TM) SE Runtime Environment (build 1.8.0_151-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.151-b12, mixed mode)


+ echo 構建的版本號:3
構建的版本號:3


+ npm install
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 400 packages from 225 contributors in 22.49s


+ npm run build
> [email protected] build /var/lib/jenkins/workspace/testweb
> webpack --mode production

Hash: 8b18626cfb5996c8c259
Version: webpack 4.41.2
Time: 1150ms
Built at: 10/21/2019 12:34:15 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  6.93 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/main.js 249 bytes {0} [built]
[1] ./src/common.js 148 bytes {0} [built]
[2] ./src/main.css 1.05 KiB {0} [built]
[3] ./node_modules/css-loader/dist/cjs.js!./src/main.css 174 bytes {0} [built]
    + 3 hidden modules


+ pwd
/var/lib/jenkins/workspace/testweb


+ echo '----- 以上的列出的文件是 jenkin 服務 workspace 中 testweb 目錄下的文件-------'
----- 以上的列出的文件是 jenkin 服務 workspace 中 testweb 目錄下的文件-------
Finished: SUCCESS

2.查看構建的結果

查看 JenKins 安裝目錄下 workspace 目錄下的 testweb 項目

/var/lib/jenkins/workspace/testweb

1 ）構建時執行 npm install 後會生成 node_modules文件夾

2 ) 構建時執行 npm run build 後會生成 dist目標文件

生成 dist 目標文件後，如何部署項目？

8.構建後的操作

上面配置完構建的命令後，點擊立即構建，其實已經成功實現了自動化構建。但是項目只是完成了構建，還沒有完成項目的部署來。那麼打包後生成的dist文件如何部署起來呢？這個時候需要配置一下構建後操作了。

1.安裝Publish over SSH插件

1）在線安裝

在系統管理->插件管理-> 可選插件 ->右邊搜索Publish over SSH-> 然後點擊直接安裝 ->安裝完成後重啓JenKins

2）或離線安裝

在系統管理->插件管理-> 高級 -> 在上傳插件中選擇離線插件（插件格式xxx.hpi） -> 然後點擊上傳 ->安裝完成後重啓JenKins

2.配置Publish over SSH

系統管理->系統設置->Publish over SSH->SSH Servers

指定遠程 web測試服務器 的登錄密碼xxxxx
指定遠程 web測試服務器 的名稱
指定遠程 web測試服務器 的 ip :xxx.xxx.xxx.xxx
指定遠程 web測試服務器 登錄的用戶名root
指定遠程 web測試服務器 部署的目錄(不是部署項目的名稱)/usr/local/webserver/nginx
測試 JenKins 鏈接遠程 web測試服務器 是否成功

這裏的 web測試服務器和 JenKins所在的服務器是不同的兩個服務器。其中 JenKins所在的服務器是用來部署JenKins的，web測試服務器是用來部署前端項目的

3.添加構建後的操作

進入到 testweb任務的配置頁面, 拉倒最底部

1）點擊增加構建後操作步驟

2）選擇 Send build artifacts over SSH

沒有這個選項？檢查是否安裝了 Publish over SSH 插件

4.用Publish over SSH插件實現項目遠程部署

1）第1步選擇遠程部署的服務器web測試服務器

（這個服務器是在：系統管理->系統設置->Publish over SSH->SSH Servers->name 指定的服務器的名稱。如果沒有指定是沒有下拉選項的）

2）第2步指定構建後/var/lib/jenkins/workspace/testweb/dist 目錄下所有的文件(包含dist目錄)上傳到遠程的web測試服務器。

3）第3步指定忽略不上傳文件夾的前綴, 下面指定 dist 這個目錄不用上傳，只上傳dist目錄下所有的文件

4）第4步指定上傳到遠程web測試服務器的testweb目錄。這個目錄沒有會自定新建。

testweb目錄是相對與：系統管理->系統設置->Publish over SSH->SSH Servers->Remote Directory指定的遠程服務器的路勁下創建的目錄。絕對路勁是：/usr/local/webserver/nginx/testweb/

5）第5步指定發佈後的操作，備份項目，並打印出回滾的命令。

6）配置完成，可以點擊立即構建測試

# 進入項目的文件夾 （ 項目路徑:  /usr/local/webserver/nginx/testweb/testweb/xxxx ）
echo '--- 1.進入項目的文件夾：---'
cd /usr/local/webserver/nginx/testweb/testweb
pwd

#  打包壓縮項目文件
echo '--- 2.打包壓縮項目的文件：---'
# 自動創建testweb-copy文件夾，存在則創建失敗。mkdir -p a/b/c 創建多級目錄
mkdir /usr/local/webserver/nginx/testweb-copy
tar -zcvf  /usr/local/webserver/nginx/testweb-copy/${JOB_NAME}-${BUILD_ID}.tar.gz  *

# 查看壓縮備份後的文件
cd  /usr/local/webserver/nginx/testweb-copy

echo '--- 3.下面是已經備份項目的版本：---'
ls

# 回覆備份
echo '--- 4.下面是備份回滾的命令：---'
echo '刪除舊項目：rm -rf /usr/local/webserver/nginx/testweb/*'
echo '回滾指定版本: tar -zxvf  /usr/local/webserver/nginx/testweb-copy/testweb-16.tar.gz  -C  /usr/local/webserver/nginx/testweb/'
echo '停止服務：/usr/local/webserver/nginx/sbin/nginx -s stop'
echo '重啓服務：/usr/local/webserver/nginx/sbin/nginx'
echo '--- 構建結束 ---'

Jenkins部署前端項目

1.Jenkins部署前端項目

1.新建任務

2.General

3.源碼管理

4.構建觸發器

5.構建環境

6.構建

7.測試一下立即構建

1.查看構建控制檯輸出

2.查看構建的結果

8.構建後的操作

1.安裝Publish over SSH插件

2.配置Publish over SSH

3.添加構建後的操作

4.用Publish over SSH插件實現項目遠程部署

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

Webpack4 配置 Entry

JavaScript中的淺拷貝

Webpack4-的安裝和使用

Webpack4 自定義 Plugins

JavaScript中的深拷貝

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結