使用jenkins進行前端項目自動部署

来源:https://www.cnblogs.com/xiaohuochai/archive/2018/05/28/9096873.html
-Advertisement-
Play Games

[1]安裝 [2]初始化 [3]安裝插件 [4]git鉤子 [5]配置任務 [6]郵件提醒 [7]測試 ...


前面的話

　　後端的nodeJS項目可以使用pm2進行自動部署，由於前端項目打包後是靜態資源，不需要進程守護。一般地，前端項目使用jenkins來進行自動部署，包括打包、測試等一系列流程。本文將詳細介紹jenkins的使用

 

安裝

　　Jenkins 是一款業界流行的開源持續集成工具，廣泛用於項目開發，具有自動化構建、測試和部署等功能。由於 jenkins是基於java環境運行的，所以首先需要安裝java環境

　　1、安裝依賴包，使得add-apt-repository命令可以進行

apt-get install software-properties-common

　　2、通過add-apt-repository載入第三方的開源軟體源

sudo add-apt-repository ppa:webupd8team/java

　　3、更新軟體包列表，並安裝jdk

sudo apt-get update
sudo apt-get install oracle-java8-installer

　　安裝器會提示同意 oracle 的服務條款，選擇 ok，然後選擇yes 即可

　　4、通過查看java版本，來測試java環境是否安裝成功

xiaohuochai@iZbp13p7zpoi6363d01pugZ:~$ java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

　　5、接下來，按照官網的操作要求，安裝jenkins

wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

　　6、安裝完成後，jenkins的文件目錄如下所示

安裝目錄：/var/lib/jenkins  
日誌目錄：/var/log/jenkins/jenkins.log

　　7、接下來，就可以啟動jenkins了

service jenkins start

　　在jenkins啟動過程中，可能會遇到如下問題

Job for jenkins.service failed

　　這是因為java環境，沒有安裝成功，按照上面的步驟重新安裝java即可

　　還可能會出現如下警告

java.net.UnknownHostException: yonghu: yonghu: 未知的名稱或服務

　　直接修改hosts文件(vi /etc/hosts)，將原127.0.0.1替換成127.0.0.1 localhost centos-a即可

127.0.0.1 localhost yonghu

　　因為jenkins預設使用8080埠，如果使用阿裡雲，還需要在安全組中開放8080埠

 

初始化

　　啟動jenkins服務後，可以在8080埠訪問到jenkins

jenkins

　　然後在伺服器的指定目錄找到密碼登錄

/var/lib/jenkins/secrets/initialAdminPassword

　　按照預設配置安裝插件
jenkins

　　等待插件安裝完成
jenkins

　　創建一個管理員賬戶，完成配置後，就可以登錄 Jenkins 了

jenkins

 

安裝插件

　　下麵來安裝nodejs插件

jenkins

　　可以看到，Jenkins提供了豐富的插件供開發者使用，找到需要的[NodeJS Plugin]，勾選後點擊安裝即可

jenkins

　　3、安裝完畢後，選擇系統管理->全局工具配置，配置node下載及安裝

jenkins

 

git鉤子

　　為了能夠與 GitHub 配合，需要進入對 GitHub 進行一些設置

　　在github中進入博客所在的repo，並點擊settings。在設置界面單擊左側的Integrations & services，並選擇add service。從下拉菜單中，選中Jenkins(Github plugin)

jenkins

 

　　從下拉菜單中，選中Jenkins (GitHub plugin)。在新打開的界面，填寫Jenkins的信息

jenkins

　　完整的地址為http://xx.xx.xx.xx:8080/GitHub-webhook/。把這裡的xx換成實際的IP地址或者功能變數名稱即可。需要註意的是，網址末尾的斜杠一定不能省略

　　填寫好信息以後保存，GitHub就配置好了

 

配置任務

　　1、安裝好github鉤子以及nodejs插件後，接下來開始配置任務

　　點擊創建一個新任務，填寫任務名稱，構建的項目類型可根據實際情況進行選擇，本次選擇第一種即可

jenkins

　　2、配置基礎信息

jenkins

　　3、往下拉，看到源碼管理，點選Git，依然填寫博客對應的Repo地址

jenkins

　　4、繼續往下拉，在構建觸發器單擊增加構建步驟，在彈出的下拉菜單中選擇Execute shell。勾選GitHub hook trigger for GITScm polling。構建環境選擇nodejs

jenkins

　　5、一般地，構建過程，輸入如下

npm install &&
npm run build

　　但是，經過實際測試，在伺服器上使用npm install會使伺服器卡死。於是，變通的方法是，在本地直接構建，並將構建後的文件上傳到github，然後通過jenkins取得。於是，構建過程如下所示

cp -r ./* /home/xiaohuochai/blog/admin

　　把當前目錄下的所有內容全部複製到/home/xiaohuochai/blog/admin下，並且如果文件名相同，就會直接覆蓋

　　6、修改許可權

　　由於Jenkins在安裝的時候，會自動創建一個名為jenkins的普通賬號，這個賬號沒有管理員許可權。jenkins執行命令的時候，它也會使用這個賬號。但是由於admin這個文件夾是用戶xiaohuochai創建的，所以jenkins賬號預設是沒有許可權讀寫這個文件夾的。現在需要給jenkins賬號授予許可權。使用xiaohuochai這個賬號登錄伺服器，使用以下命令給jenkins賦予許可權，讓它可以讀寫admin文件夾：

sudo chown -R jenkins:jenkins /home/xiaohuochai/blog/admin

　　執行完成這一行命令以後，jenkins才可以把其他地方的文件複製到這個文件夾裡面

 

郵件提醒

　　在系統設置中找到Jenkins Locaction項填入Jenkins URL和系統管理員郵件地址，系統管理員郵件地址一定要配置，否則發不了郵件通知。因為郵件通知都是由系統管理員的郵箱發出來的

jenkins

　　找到郵件通知項，填入SMTP伺服器信息及用戶名、密碼等認證信息

jenkins

　　找到Extended E-mail Notification項，填入類似信息

jenkins

　　進行新建的pull-blog項目中，在構建後操作新增Editable Email Notification

jenkins

　　在advances setting中選擇always，意思是無論什麼情況任務執行完就發郵件

jenkins

 

測試

　　按照上面步驟部署完成後，點擊立即構建

jenkins

　　點擊35號任務的小三角，選擇控制台輸出

jenkins

　　輸出如下記錄

Started by user xiaohuochai
Building in workspace /var/lib/jenkins/workspace/pull_blog
 > git rev-parse --is-inside-work-tree # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/littlematch0123/blog-admin.git # timeout=10
Fetching upstream changes from https://github.com/littlematch0123/blog-admin.git
 > git --version # timeout=10
 > git fetch --tags --progress https://github.com/littlematch0123/blog-admin.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 21ff1aa59ffb4ffad648f9f80193f300947a98fb (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 21ff1aa59ffb4ffad648f9f80193f300947a98fb
Commit message: "本地構建"
 > git rev-list --no-walk 21ff1aa59ffb4ffad648f9f80193f300947a98fb # timeout=10
No emails were triggered.
[pull_blog] $ /bin/sh -xe /tmp/jenkins4130757344876690584.sh
+ cp -r ./build ./config-overrides.js ./LICENSE ./package.json ./public ./README.md ./src /home/xiaohuochai/www/blog/admin/source
Email was triggered for: Always
Sending email for trigger: Always
Sending email to: 121631835@qq.com
Finished: SUCCESS

　　與此同時，郵箱也收到了通知

jenkins

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【讀書筆記】iOS-工作區的使用
    一，打開Xcode >File-->New-->Workspace >AllProject. 二，打開桌面上的AllProject >File >New >Project >iOS >Application >輸入名字:iosProject. 註意：Add to 到我們建立的工作空間中。 三，打開桌 ...
  • IDEWorkspaceChecks.plist文件是乾什麼用的？
    在提交PR的時候，無意間發現了在xcworkspace/xcshareddata中多了一個名為IDEWorkspaceChecks.plist的文件。自己並沒有手動創建這個文件，因此就在網上查了一下，最終對其有個大概的瞭解。 ...
  • AsyncTask 處理耗時操作&&顯示進度條
    在Android中實現非同步任務機制有兩種，Handler和AsyncTask。優缺點自己百度，推薦使用AsyncTask。 先執行onPreExecute（），然後doInBackground（），當裡面有publishProgress()調用的時候觸發onProgressUpdate（），最後執行 ...
  • AutoCompleteTextView 自定義提示樣式
    項目中用到AutoCompleteTextView 自動提示功能，如果用自帶的ArrayAdapter就一種樣式，非常醜，而且每一項提示文字過多的話不會自動換行。 所以自己自定義了一個適配器。 效果圖： 1、每一項的佈局文件：（可以自己定義） 這裡用android:lineSpacingExtra= ...
  • iOS-button利用block封裝按鈕事件【runtime 關聯】
    用block封裝最常用的就是網路請求的回調，其實也可以結合category封裝button的按鈕事件，同時利用runtime的對象關聯； UIButton+wkjButton.h 文件 UIButton+wkjButton.m 文件 ...
  • iOS之在本地搭建IPv6環境測試你的app
    IPv6的簡介 IPv4 和 IPv6的區別就是 IP 地址前者是 .（dot）分割，後者是以 :（冒號）分割的（更多詳細信息自行搜索）。 PS：在使用 IPv6 的熱點時候，記得手機開 飛行模式 哦，保證手機只在 Wi-Fi 下上網，以免手機在連接不到網路時候，會預設跳轉到使用 蜂窩移動網路（即2 ...
  • Box（視圖組件）如何在多個頁面不同視覺規範下的復用
    本文來自 網易雲社區 。 問題描述 Android App中的頁面元素，都是由一個個Box(可以理解成一個個自定義View組件和Widget同級）組成，這些Box可以在不同的頁面、不同的模塊達到復用的效果。但是，現在遇到了一個對於開發復用棘手的問題， A頁面的組件間距和B頁面的組件間距可能不同。 A ...
  • 教你使用HTML5原生對話框元素，輕鬆創建模態框組件
    HTML 5.2草案加入了新的dialog元素。但是是一種實驗技術。 以前，如果我們想要構建任何形式的模式對話框或對話框，我們需要有一個背景，一個關閉按鈕，將事件綁定在對話框中的方式安排我們的標記，找到一種將消息傳遞出去的方式對話......這真的很複雜。對話框元素解決了上述所有問題。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類