1. 程式人生 > >前端自動化部署linux centOs + Jenkins + nignx + 單頁面應用

前端自動化部署linux centOs + Jenkins + nignx + 單頁面應用

Jenkins是什麼?

Jenkins 是一款業界流行的開源持續整合工具,廣泛用於專案開發,具有自動化構建、測試和部署等功能。

 

準備工作

Linux centOS系統阿里雲伺服器一個

碼雲一個存放vue專案的倉庫

 

開始安裝與初始化

1、安裝JDK

yum install -y java
				

2、安裝jenkins

新增Jenkins庫到yum庫,Jenkins將從這裡下載安裝。

1 wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
2 rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
3 yum install -y jenkins
				

如果不能安裝就到官網下載jenkis的rmp包,官網地址(http://pkg.jenkins-ci.org/redhat-stable/)

1 wget http://pkg.jenkins-ci.org/redhat-stable/jenkins-2.7.3-1.1.noarch.rpm
2 rpm -ivh jenkins-2.7.3-1.1.noarch.rpm
				

配置jenkis的埠(可用xshell視覺化編輯儲存)


vi /etc/sysconfig/jenkins
				

找到修改埠號:

JENKINS_PORT="8080"  此埠不衝突可以不修改 

3、啟動jenkins

service jenkins start/stop/restart
				
  • 安裝成功後Jenkins將作為一個守護程序隨系統啟動
  • 系統會建立一個"jenkins"使用者來允許這個服務,如果改變服務所有者,同時需要修改/var/log/jenkins, /var/lib/jenkins, 和/var/cache/jenkins的所有者
  • 啟動的時候將從/etc/sysconfig/jenkins獲取配置引數
  • 預設情況下,Jenkins執行在8080埠,在瀏覽器中直接訪問該端進行服務配置
  • Jenkins的RPM倉庫配置被加到/etc/yum.repos.d/jenkins.repo

4、開啟jenkins 

在瀏覽器中訪問 
首次進入會要求輸入初始密碼如下圖, 
初始密碼在:/var/lib/jenkins/secrets/initialAdminPassword 

選擇"Install suggested plugins"安裝預設的外掛,下面Jenkins就會自己去下載相關的外掛進行安裝。 

建立超級管理員賬號 

參考: centos下搭建Jenkins持續整合環境(安裝jenkins)

建立任務

  1. 點選建立一個新任務

  1. 選擇自由風格的軟體專案,並起一個名字

至此,基礎準備工作已經完成,我們在伺服器上安裝了Jenkins並啟動,然後進行了初始化配置,建立了一個新任務。接下來我們開始配置我們需要的功能。

 

實現git鉤子功能

首先我們要實現一個git鉤子功能,就是我們向github/碼雲等遠端倉庫push我們的程式碼時,jenkins能知道我們提交了程式碼,這是自動構建自動部署的前提,鉤子的實現原理是在遠端倉庫上配置一個Jenkins伺服器的介面地址,當本地向遠端倉庫發起push時,遠端倉庫會向配置的Jenkins伺服器的介面地址發起一個帶引數的請求,jenkins收到後開始工作。

  1. 開啟剛建立的任務,選擇配置,新增遠端倉庫地址,配置登入名及密碼及分支。
  2. 安裝Generic Webhook Trigger Plugin外掛(系統管理-外掛管理-搜尋Generic Webhook Trigger Plugin)如果可選外掛列表為空,點選高階標籤頁,替換升級站點的URL為:http://mirror.xmission.com/jenkins/updates/update-center.json並且點選提交和立即獲取。

或者你直接去官網搜尋下載.hpi檔案,然後在高階那上傳外掛也行(參考連結)

  1. 新增觸發器
    第2步安裝的觸發器外掛功能很強大,可以根據不同的觸發引數觸發不同的構建操作,比如我向遠端倉庫提交的是master分支的程式碼,就執行程式碼部署工作,我向遠端倉庫提交的是某個feature分支,就執行單元測試,單元測試通過後合併至dev分支。靈活性很高,可以自定義配置適合自己公司的方案,這裡方便演示我們不做任何條件判斷,只要有提交就觸發。在任務配置裡勾選Generic Webhook Trigger即可
  2. 倉庫配置鉤子 此處以準備工作的碼雲倉庫為例,因為公司用的是碼雲,github的配置基本一致,進入碼雲專案主頁後,點選管理-webhooks-新增,會跳出一個這樣的框來。


URL格式為 http://<User ID>:<API Token>@<Jenkins IP地址>:埠/generic-webhook-trigger/invoke (注意下用英文符號編寫 ) userid和api token在jenkins的系統管理-管理使用者-admin-設定裡,沒有的話生成個。這是我的

Jenkins IP地址和埠是你部署jenkins伺服器的ip地址,埠號沒改過的話就是8080。
密碼填你和上面userid對應的密碼,我這裡是root。
下面的幾個選項是你在倉庫執行什麼操作的時候觸發鉤子,這裡預設用push。
點選提交完成配置。

如:

http://admin:[email protected]:8080/generic-webhook-trigger/invoke

 

  1. 測試鉤子


點選測試,如果配置是成功的,你的Jenkins左側欄構建執行狀態裡將會出現一個任務。

另外,你也可以試下本地提交程式碼,提交程式碼後,jenkins也會開始一個任務,目前我們沒有配置任務開始後讓它做什麼,所以預設它只會在你提交新程式碼後,將新程式碼拉取到jenkins伺服器上。到此為止,git鉤子我們配置完成。

 

實現自動化構建(演示而已,npm包安裝可能有問題)

git push觸發鉤子後,jenkins就要開始工作了,自動化的構建任務可以有很多種,比如說安裝升級依賴包,單元測試,e2e測試,壓縮靜態資源,批量重新命名等等,無論是npm script還是webpack,gulp之類的工作流,你之前在本地能做的,在這裡同樣可以做。
作為演示,這裡只演示三個基本常用的工作流程,安裝依賴包->單元測試->打包,也就是下面這三個命令。

npm install
npm run test
npm run build複製程式碼
  1. 首先,和本地執行npm script一樣,我們要想在jenkins裡面執行npm命令,先要在jenkins裡面配置node的環境,可以通過配置環境變數的方式引入node,也可以通過安裝外掛的方式,這裡使用了外掛的方式,安裝一下nvm wrapper這個外掛。
  2. 開啟剛剛的jenkins任務,點選配置裡面的構建環境,勾選這個,並指定一個node版本。

 

  1. 點選構建,把要執行的命令輸進去,多個命令使用&&分開。

  1. 儲存
  2. 此時本地修改一下程式碼push測試一下(也可以點選立即構建測試),點選本次觸發的那個任務,選擇控制檯輸出,將會看到Jenkins在雲端執行的過程。

 

命令列最後一行是Finished狀態的如果是SUCCESS(藍色)則證明執行的任務都順利進行,是FAILURE(紅色)則證明中間有重大錯誤導致任務失敗,UNSTABLE(黃色)代表有雖然有些小問題,但不阻礙任務進行,黃色或者紅色可以去命令列看下錯誤輸出,看下哪裡出了問題。


 

  1. 如果上一步是SUCCESS,點選專案的工作空間,將會發現多了dist和node_modules兩個資料夾。

 

至此,我們已經搭建了一個簡易的構建工作流程,構建完成了,我們需要自動化部署。

 

如果失敗了一般是npm安裝失敗,建議單頁面部署不需要上面說的命令,直接本地打包把dist資料夾提交倉庫

 

實現自動化部署

自動化部署可能是我們最需要的功能了,公司就一臺伺服器,我們可以使用人工部署的方式,但是如果公司有100臺伺服器呢,人工部署就有些吃力了,而且一旦線上出了問題,回滾也很麻煩。所以這一節實現一下自動部署的功能。

  1. 首先,先在Jenkins上裝一個外掛Publish Over SSH,我們將通過這個工具實現伺服器部署功能。
  2. 在要部署程式碼的伺服器上建立一個資料夾用於接收Jenkins傳過來的程式碼,我在伺服器上建了一個testjenkins的資料夾。
  3. Jenkins想要往伺服器上部署程式碼必須登入伺服器才可以,這裡有兩種登入驗證方式,一種是ssh驗證,一種是密碼驗證,就像你自己登入你的伺服器,你可以使用ssh免密登入,也可以每次輸密碼登入,系統管理-系統設定裡找到Publish over SSH這一項。 重點引數說明: (詳細看下文的錯誤解決)
Passphrase:密碼(key的密碼,沒設定就是空)
Path to key:key檔案(私鑰)的路徑
Key:將私鑰複製到這個框中(path to key和key寫一個即可)

 

SSH Servers的配置:
SSH Server Name:標識的名字(隨便你取什麼)
Hostname:需要連線ssh的主機名或ip地址(建議ip)
Username:使用者名稱
Remote Directory:遠端目錄(上面第二步建的testjenkins資料夾的路徑)

 

高階配置:
Use password authentication, or use a different key:勾選這個可以使用密碼登入,不想配ssh的可以用這個先試試
Passphrase / Password:密碼登入模式的密碼
Port:埠(預設22)
Timeout (ms):超時時間(毫秒)預設300000複製程式碼

配置完成後,點選Test Configuration測試一下是否可以連線上,如果成功會返回success,失敗會返回報錯資訊,根據報錯資訊改正即可。

 


由於配置原因造成一下錯誤 (參考連結)
錯誤: jenkins.plugins.publish_over.BapPublisherException: Failed to connect session for config [131]. Message [Auth fail]

配置方法:

1、生成金鑰
我的jenkins服務安裝在了linux下的jenkins使用者下
[jenkins@jenkins ~]$ ssh-keygen  
Generating public/private rsa key pair.
Enter file in which to save the key (/home/jenkins/.ssh/id_rsa): //金鑰生成路徑,直接預設回車即可
Created directory '/home/jenkins/.ssh'.
Enter passphrase (empty for no passphrase): //預設回車
Enter same passphrase again: //預設回車
Your identification has been saved in /home/jenkins/.ssh/id_rsa.
Your public key has been saved in /home/jenkins/.ssh/id_rsa.pub.
The key fingerprint is:
c0:3d:31:ee:81:b6:5d:5f:d7:83:96:a3:92:85:e0:ab jenkins@jenkins
2、進入到目錄進行檢視
[jenkins@jenkins ~]$ cd .ssh/
[jenkins@jenkins .ssh]$ ll
total 8
-rw-------. 1 jenkins jenkins 1671 Jul 17 23:23 id_rsa
-rw-r--r--. 1 jenkins jenkins  397 Jul 17 23:23 id_rsa.pub
3、將公鑰拷貝到authorized_keys檔案
[jenkins@jenkins .ssh]$ cat id_rsa.pub >> authorized_keys    
4、將生成的authorized_keys拷貝到要連線的linux機器上的對應使用者或者直接root下的.ssh資料夾下
[jenkins@jenkins .ssh]$ scp authorized_keys [email protected]:/home/root/.ssh
The authenticity of host '192.168.0.91 (192.168.0.91)' can't be established.
RSA key fingerprint is ff:dc:00:df:2c:40:70:63:95:ad:53:85:b7:8a:15:06.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added '192.168.0.91' (RSA) to the list of known hosts.
reverse mapping checking getaddrinfo for bogon [192.168.0.91] failed - POSSIBLE BREAK-IN ATTEMPT!
[email protected]'s password:
authorized_keys                                                                 100%  397     0.4KB/s   00:00  
5、配置SSH Server 左上角的jenkins-->系統管理-->系統設定

其中Remote Directory:遠端目錄(寫上面第二步建的testjenkins資料夾的路徑)能test成功就行

 

 

 

4. 接下來進入我們建立的任務,點選構建,增加2行程式碼,意思是將dist裡面的東西打包成一個檔案,因為我們要傳輸。

cd dist&&
tar -zcvf dist.tar.gz *
完整示例(不推薦)

 

推薦本地打好包直接:

 

5. 點選構建後操作,增加構建後操作步驟,選擇send build artificial over SSH, 引數說明:

Name:選擇一個你配好的ssh伺服器
Source files :寫你要傳輸的檔案路徑
Remove prefix :要去掉的字首,不寫遠端伺服器的目錄結構將和Source files寫的一致
Remote directory :寫你要部署在遠端伺服器的那個目錄地址下,不寫就是SSH Servers配置裡預設遠端目錄
Exec command:傳輸完了要執行的命令,我這裡執行了解壓縮和解壓縮完成後刪除壓縮包2個命令
				

 

 

接著安裝好nginx 參考Nginx 安裝配置

nginx配置改動下:

注意nginx配置改了後得重啟

/usr/local/webserver/nginx/sbin/nginx -s reload            # 重新載入配置檔案

/usr/local/webserver/nginx/sbin/nginx -s reopen # 重啟 Nginx

/usr/local/webserver/nginx/sbin/nginx -s stop # 停止 Nginx

 

 

儲存

 

  1. 現在當我們在本地將Welcome to Your Vue.js App修改為Jenkins本地打包後發出一個git push,過一會就會發現我們的伺服器上已經部署好了最新的程式碼,是不是很6。

 

至此,我們的自動化部署也完成了,但是如果過程中有異常怎麼辦,或是我們想知道每次Jenkins執行的日誌及執行結果,我們可以通過配置郵件服務來讓Jenkins每次完成任務後通知相關人員

 

實現郵件提醒

這裡我們不用E-mail Notification,因為它的郵件服務功能太少,無法自定義郵件內容及自定義觸發鉤子,而且只能在異常情況下才能發郵件。我們使用Editable Email Notification這個。

  1. 開啟系統管理-系統配置-Extended E-mail Notification,不是系統管理-系統配置-郵件通知,千萬不要配錯了,否則不起作用。配置一下用來發郵件的郵箱,我這裡用的是我自己的qq郵箱。

要是用別的廠家的郵箱服務就查下別的郵箱廠家smtp怎麼配,用qq郵箱的除了user Name和password其他的和我寫一樣就行。另外password寫的不是qq郵箱的密碼,而是開啟smtp服務後發簡訊獲取的密碼。

開啟建立的那個任務,增加構建後操作步驟選擇Editable Email Notification,Project Recipient List那裡寫你要發給誰郵件,可以多個,用分號隔開。

然後點選Advanced Settings-Triggers-Add Trigger,選擇always,意思是無論什麼情況任務執行完就發郵件,也可以選擇其他模式,如任務執行異常了才發郵件。

 

我這裡配置的接收郵件的地址也是我的qq郵箱,這個可以根據自己公司的工作流程配。
4. 現在當我們在本地修改程式碼後發出一個git push,Jenkins自動構建部署完成後就會給我發一封郵件,郵件附件裡會有本次任務的日誌。

相關推薦

前端自動化部署linux centOs + Jenkins + nignx + 頁面應用

Jenkins是什麼? Jenkins 是一款業界流行的開源持續整合工具,廣泛用於專案開發,具有自動化構建、測試和部署等功能。   準備工作 Linux centOS系統阿里雲伺服器一個 碼雲一個存放vue專案的倉庫   開始安裝與初始化 1、安裝JDK yum install -y

前端框架】Backbone.js在大型頁面應用中的應用實踐

Backbone.js是什麼? Backbone.js是一個JavaScript MVC框架,提供了良好的程式碼組織能力,可以方便地將應用程式解耦成可以複用的部分,為建立大型的單頁面應用提供框架支援,目前的版本是0.9.10(注:現在已到1.2.1版本)。通過將應用程式分解成MVC模式中不同職責的模組,

前端自動化部署基於jenkins和gitlab

一個專案的三個環節,開發環境,測試環境,生產環境,然後每次 npm 打包ftp去拖是不是很麻煩,只想一次提交git後不同環境就能夠根據不同環境的對應的分支進行打包,程式碼釋出。 jenkins和gitlab配合起來的確是特別爽 首先在安裝了jenkins的伺服器上配置node環境

.Net Core 自動化部署:使用jenkins部署linux docker容器執行

jenkins 安裝並配置必要的釋出外掛 Publish Over SSH Plugin因為linux下ssh連線使用更方便快捷,所以這裡建議使用ssh釋出外掛來完成釋出操作在外掛中心搜尋Publish Over SSH關鍵字可以找到這個外掛,安裝它然後重啟jenkins進入

C語言多執行緒自動化部署linux環境

1.建立多工並行 /************************************************************************* > File Name: pipe6.c > Author: zhuan >

PXE+KickStart 全自動化部署linux

PXE+KickStart 全自動化部署 PXE 簡介 PXE (preboot execute environment ,預啟動執行環境)工作於 Client/Server 的網路模式,支援工作站通過網路從遠端伺服器下載映像,並由此支援通過網路啟動作業系統,

hadoop大資料環境部署--linux centos虛擬機器

需要版本: jdk:jdk-7u79-linux-x64.tar.gz hadoop:hadoop-2.5.0-cdh5.3.6.tar.gz 1.建立hadoop使用者 useradd -m hadoop -G root -s /bin/bash 2.賦予hadoop使用者最高許可權 chmo

gitlab-ci實現前端自動化部署(步驟全面)

   近些年前端發展迅速,前後分離已經是一個大趨勢。隨著前端專案的愈加龐大,其自動化也極其重要的一環。不僅僅是通過webpack實現的自動化構建,當專案提交的時候,同時也要實現其自動化的部署、釋出工作。    接下來我就講一講通過gitlab-ci實現前端自動化部署的各個

jenkins自動化部署搭建。jenkins+docker+maven+git+springboot

這兩天在學jenkins。在網上找了一大堆資料。從一臉懵逼到現在的自動化部署。說來都是淚啊。jenkins:一個可以自動化部署的軟體。平時我們程式設計師都是。擼碼-測試-打包-上傳-部署。這一迴圈。而jenkins的功能就是為了讓我們程式設計師能夠安心擼碼的,其他的事情交給j

[團隊協作發 + 自動化部署 Git + Gitlab + Jenkins + K8S + Docker]之三:Git進階編

文件地址:https://download.csdn.net/download/panpan2018/10329739下期更新至:[團隊協作發 + 自動化部署 Git + Gitlab + Jenkins + K8S + Docker]之四:Git高階編

kickstart+DHCP+NFS+TFTP+PXE 全自動化部署Linux系統

graph 提前 linux apache ans root inittab vim usr 目錄 kickstart+DHCP+NFS+TFTP+PXE 安裝詳細步驟 執行PXE——ki

通過 cobbler 批量自動化部署 Linux 系統

tex inux e30 nc命令 pbo 具體步驟 png obb water 實驗介紹:Cobbler自動化部署linux系統,比PXE部署方式效率更高,因此在大多環境中,以cobbler 方式部署系統,更為方便;具體步驟如下所示: 若描述有誤歡迎拍磚交流QQ:4522

前端:將網站打造成頁面應用SPA

一次 顯示 row 增加 blank 觸發 完全 判斷 null 前端:將網站打造成單頁面應用SPA 前言 不知你有沒有發現,像Github、百度、微博等這些大站,已經不再使用普通的a標簽做跳轉了。他們大多使用Ajax請求替代了a標簽的默認跳轉,然後使用HTML5

JS頁面應用實現前端路由(hash)

背景介紹 用了許多前端框架來做spa應用,比如說backbone,angular,vue他們都有各自的路由系統,管理著前端的每一個頁面切換,想要理解其中路由的實現,最好的方法就是手動實現一個。 前端路由有2種實現方式,一種是html5推出的historya

詳細解剖大型H5頁面應用的核心技術點

事件機制 設置 橫豎 模板 phone inline lib 優點 溢出 闡述下項目 Xut.js 開發中一個比較核心的優化技術點,這是一套平臺代碼,並非某一個插件功能或者框架可以直接拿來使用,核心代碼大概是6萬行左右(不包含任何插件) 。這也並非一個開源項目,不能

angular-頁面應用程序

開發人員 containe 數據接口 發送請求 href 站點 response 最大的 require 我們都知道angularjs是單一頁面應用程序,那什麽是單一頁面應用程序呢?單一頁面應用程序到底有什麽好處呢? 下面我們來看一下: 首先我覺得可以把頁面的響應模式分成這

spa頁面應用(angular)

當前 lar 文章 模板 ram rip 加載完成 brush 找到 本篇文章是對單頁面的一個簡單的基本邏輯操作,這個方法可以搭建基本的單頁面的邏輯結構。 簡單理解:單頁面應用,錨點值切換,一個路由對應一個頁面。 路由:此時會創建一個信息保存路由的信息,之後對頁面a

Oracle JET 頁面應用程序Router 使用(上)

模塊名 self. put pla function border routing 都是 功能   單頁面應用程序:使用一個進加載一次的網頁,如果頁面由於用戶的交互而改變,則僅繪制更改的頁面部分。   要創建單頁面應用程序需要使用 oj.Router 的虛擬導航來支持,oj

SPA頁面應用router實現

gpo 路由 outer location 並不會 spa sta url lar spa 單頁面router 主要可以基於兩種方式實現:修改哈希和直接修改url 1.根據在使用location 修改哈希的時候,頁面不會刷新(angular1.x 路由采用) 2.根據h5

輕量級MVVM框架Vue.js快速上手(MVVM、SEO頁面應用

靈活 vue.js 課程 基礎 har rip 完成 crud 通過 輕量級MVVM框架Vue.js快速上手(MVVM、SEO單頁面應用、×××服務器端渲染、Nuxt.js) 網盤地址:https://pan.baidu.com/s/1LkhepNpGAtRjrxp_CVJ