使用Jenkins持續集成前端項目并自動化部署到Nginx服務器

liukai90 發布于2019-07-25 14:11 / 3145人閱讀

摘要：上午折騰了一下持續集成，由于公司使用自己搭建的服務器來進行代碼管理，因此這里是針對服務器來進行的配置，后面稍微介紹了下針對管理的項目的配置之前項目每次修改之后都需要本地一次手動發布到服務器上方便測試和產品查看，有了持續集成之后只要或者提交之

上午折騰了一下Jenkins持續集成，由于公司使用自己搭建的svn服務器來進行代碼管理，因此這里Jenkins是針對svn服務器來進行的配置，后面稍微介紹了下針對Github管理的項目的Jenkins配置

之前項目每次修改之后都需要本地npm run build一次手動發布到服務器上方便測試和產品查看，有了Jenkins持續集成之后只要svn或者git提交之后就會自動打包，很方便，此次記錄以備后詢。

聲明：

后面的項目地址與打包地址都是使用em-mes，自行修改；

另外還有路徑等，根據自己情況自行修改；

1. 安裝 1.1 安裝Nginx

可以直接去官網下直接下載，解壓縮start nginx就可以使了，常用命令：

start nginx  # 啟動
nginx -s reload  # 修改配置后重新加載生效
nginx -s reopen  # 重新打開日志文件
nginx -t  # 配置文件檢測是否正確

教程網上不少，就不贅述了

1.2 安裝Jenkins

從官網下載文件安裝之后，我這里安裝到C:Jenkins，默認端口8080，這時候瀏覽器訪問localhost:8080就能訪問Jenkins首頁，這里注意如果不安裝到C盤根目錄有些插件安裝會出錯

這里會讓你去某個地方找一個初始密碼文件打開并填到下面的密碼框里，驗證成功之后進入頁面，選擇Install suggested plugins推介安裝的插件

插件都安裝完成之后進入用戶登錄界面，設定用戶名、密碼及郵箱。

然后提示 Jenkins is ready！ → Start using Jenkins ~

注意這里因為要使用node的命令來執行創建后操作，所以還需要安裝插件： NodeJS Plugin、Deploy to container、Github、Post build task

這里順便記錄一下啟動和關閉Jenkins服務的命令行：

net start jenkins            // 啟動Jenkins服務
net stop jenkins             // 停止Jenkins服務

2. 創建svn項目的Jenkins任務 2.1 新建

左邊欄新建一個任務，輸入一個任務名稱，這里隨便寫一個

2.2 配置 General

這里才是重頭戲，進入剛剛創建的任務的配置頁面的General

丟棄舊的構建就是檢測到新的版本之后把舊版本的構建刪除

源碼管理

這里采用的是svn來管理代碼，

構建觸發器

這里的Poll SCM表示去檢測是否更新構建的頻率，*****表示每分鐘，H****表示每小時

構建

cd cd C:Jenkinsworkspaceem-mes
node -v
npm -v
cnpm i
npm run build

構建后操作

安裝插件 Post build task 后，可以在增加構建后操作步驟中選擇 Post build task 選項，增加構建后執行的script，具體可以參考文章：jenkins部署maven項目構建后部署前執行shell腳本

我這里的 Log text 是 Build complete

Script：

rmdir /q/s C:
ginx-1.14.0htmlem-mes
xcopy /y/e/i C:Jenkinsworkspaceem-mesem-mes C:
ginx-1.14.0htmlem-mes

復制生成好的文件到Nginx的目錄下，路徑自行修改

3. 創建Github項目的Jenkins任務

Jenkins不僅可以持續集成svn項目，Git項目也是可以的，這里以Github上的項目為例

其他配置和上面一章一樣

這樣如果github有新的push請求，都會自動化部署到之前的服務器上，可以說很方便了

試一試

配置好了我們試一試吧~
在剛剛github項目中隨便commit一版到github

稍等片刻去本地Jenkins地址http://localhost:8080/job/vue-element-template/就能看到Jenkins已經在構建中了

50秒之后

構建成功！構建用時54秒，現在訪問本地地址http://localhost:8282/vue-element-template，已經能看到編譯后的發布版本啦~如果你希望發布的是測試版本，可以自行修改構建后操作的script

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：

使用Jenkins自動編譯部署web應用

Jenkins+github 前端自動化部署

配置Jenkins郵件通知

jenkins部署maven項目構建后部署前執行shell腳本

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

GPU云服務器云服務器 jenkins持續集成部署前端到云服務器nginx 前端web項目部署到云服務器 Jenkins自動化部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/39821.html

DCOS應用案例-不同場景的應用上云遷移

摘要：極大地降低了平臺的復雜度，更加方便企業開發人員實現各種業務應用，幫助企業輕松打造基于云計算的軟件基礎設施。本文將從實際案例出發，結合不同的使用場景，為各位介紹的這些特性。是未來數據中心操作系統的核心。 0.前言隨著 Docker 技術的日漸火熱，本就火爆的云計算行業進入了一個加速階段。云計算最大的特點是彈性和靈活，幫助企業應對復雜的業務需求。由于云計算的IT構架和上一代的IT構架有很...

PumpkinDylan 2019-06-28 15:10 評論0 收藏0
使用Jenkins進行持續部署（PHP代碼）

摘要：查看初始密碼，這里我們的容器是首次進入，需要先安裝插件，這里我們選擇手工的去選擇一些插件就行了，因為我們如果只是集成的話用不了多少插件插件選擇我就不截圖說明了，和里面得插件可以先取消。在docker項目中單機構建jenkins使用gitlab的webhook對項目進行持續部署注意本次項目是php項目沒有build和test部分，至于test部分我們下一節進行，本次只是進行一個提交部署...

fjcgreat 2019-06-28 13:30 評論0 收藏0
優勢+工具+實踐=DevOps&Docker的企業級落地

摘要：的設計模式的設計模式以持續集成持續測試持續交付和持續部署為中心，自動化協作和持續監控是中使用的一些其他設計模式。持續集成持續集成是不斷地將源代碼集成到一個新的構建或發布的過程，源代碼可以在本地存儲中，也可以在或中。 showImg(https://segmentfault.com/img/remote/1460000010452455); 識別二維碼報名活動 8月19日，來自微軟、數人...

stormjun 2019-06-28 15:54 評論0 收藏0
Jenkins實現前端項目自動化集成打包部署

摘要：原博客地址實現前端項目自動化集成打包部署掘金地址前言以前寫前端項目打包部署，都是手動運行命令，打包完，然后壓縮，再上傳到服務器解壓。驗證提交代碼，成功自動打包部署提交代碼，觀察界面，出現構建任務，構建完成之后收到郵件通知。原博客地址:https://yezihaohao.github.io/2017/09/09/Jenkins實現前端項目自動化集成打包部署/掘金地址:https://...

Guakin_Huang 2019-08-21 16:26 評論0 收藏0