jenkins + github + nginx + vuecli 實現簡單持續集成，自動打包部署。

時間 2019-11-25

標籤 jenkins github nginx vuecli 實現簡單持續集成自動打包部署欄目自動化構建简体版

原文原文鏈接

本人微信 Gx3212333，無論吹水或交流均可以找我[呲牙]html

若是過程當中有遇到任何問題，均可以互相交流。vue

也很是但願各位大佬能給予好的建議。java

Jenkins

概念

Jenkins是一款開源 CI&CD 軟件，用於自動化各類任務，包括構建、測試和部署軟件。node
Jenkins 支持各類運行方式，可經過系統包、Docker 或者經過一個獨立的 Java 程序。linux

爲何要學

公司在用
稍微好一點的崗位職責像jenkins之類 (持續集成、自動部署) 的，基本都是多多少少是會提到的。
傳統的作法，在服務器初始一個 git 倉庫，而後每次代碼更新後，人工手動去拉去，次數多了也就煩了，而這些每次只需在項目開始前配置一遍 jenkins 以後全部的人工操做都不須要管了。(ps: 有問題甩鍋給 jenkins 就好了[呲牙])

前置任務

centOs 服務器
git、 linux、shell 基礎就行。
nginx基本配置。

開篇準備

初始一個 vuecli 項目，訪問以下nginx

在 github 建立倉庫

配置 github webhookgit

http://ip:8080/github-webhook/github

目錄

環境搭建

登陸服務器web

安裝java依賴shell

yum install java
複製代碼

使用 wget 添加jenkins源

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
複製代碼

安裝以後使用 yum 命令就能下載了。

yum install jenkins
複製代碼

jenkins 修改權限端口之類的，在該位置

vim /etc/sysconfig/jenkins
複製代碼

JENKINS_PORT -> jenkins的啓動端口，默認8080
JENKINS_USER -> jenkins 用戶，修改成root

// 這裏我將 JENKINS_USER 修改成 root 用戶了。
JENKINS_USER="root"
複製代碼

使用 chown給 jenkins 指定全部權

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
複製代碼

啓動 jenkins

service jenkins restart
複製代碼

看到 ok 便可

訪問jenkins

ip地址 + 8080
複製代碼

首次訪問是這樣子的(官網圖).

這張圖紅色圈起來的替換成你頁面顯示的

cat /val/jenkins_home/xxxx/xxx
複製代碼

而後將顯示的複製到輸入框後，點擊下一步便可。

而後到安裝插件頁面

我這裏是點擊的安裝推薦插件選項。

等待便可，有點漫長 loading...

建立用戶

而後到這裏 jenkins 就安裝完畢了，點擊開始使用。

新建任務

構建觸發器，就是監聽 github 的 webhook，若有新的 push 後從新構建。

此時保存便可

點擊那個 w 列的🌞(太陽)，這裏是構建的描述，若是構建失敗的話，你能夠根據這裏的提示定位問題。

這裏我當時矇蔽了一下，我就在想構建後的文件去哪裏了，我該怎麼訪問?

構建後的存放地址

cd /var/lib/jenkins/workspace
複製代碼

此時咱們在去修改一下配置信息中的 shell

node -v
npm -v
npm install
npm run build
複製代碼

發現構建失敗??

不過不要緊

咱們進入全局設置的插件管理

下載完後，咱們去全局配置管理，發現對了一個 NodeJs 選項。

啊千辛萬苦，終於看到咱們最愛的 dist 文件了，這裏你的 shell 命令能夠自動拓展，如移動到其餘位置。

nginx

cd /etc/nginx/conf.d
vim test-jenkins.conf

server {
      listen 8000; # 監聽端口
      server_name _;
      location / {
        # 這裏我這裏指向 jenkins 構建的目錄，也能夠在構建時的 shell 將文件移動要其餘地方。
        root  /var/lib/jenkins/workspace/test-jenkins/dist;
        try_files $uri $uri/ index.html;
      }

      error_page 500 502 503 504 /50x.html;
      location = /50x.html {
        root /usr/share/nginx/html;
      }
}
複製代碼

**而後打開就 ip:8000 就能訪問了。