Jenkins+Docker+github+Vue自動化部署

一、介紹
1、Jenkins

Jenkins是一個獨立的開源軟體專案，是基于Java開發的一種持續集成工具，用于監控持續重復的作業，旨在提供一個開放易用的軟體平臺，使軟體的持續集成變成可能，前身是Hudson是一個可擴展的持續集成引擎，可用于自動化各種任務，如構建，測驗和部署軟體，

Jenkins特點：

開源免費;
跨平臺，支持所有的平臺;
master/slave支持分布式的build;
web形式的可視化的管理頁面;
安裝配置超級簡單;
tips及時快速的幫助;
已有的200多個插件

2、docker

Docker 是一個開源的應用容器引擎，基于 Go 語言 并遵從 Apache2.0 協議開源，

Docker 可以讓開發者打包他們的應用以及依賴包到一個輕量級、可移植的容器中，然后發布到任何流行的 Linux 機器上，也可以實作虛擬化，

容器是完全使用沙箱機制，相互之間不會有任何介面（類似 iPhone 的 app）,更重要的是容器性能開銷極低，

3、Vue

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，

本文介紹Jenkins的docker自動化構建、發布并部署Vue專案的一個流程，

二、環境配置

需要centos7系統安裝的工具如下：

• jdk v1.8
• maven v3.6
• git v2.3
• nodejs v14.17.6
• docker v1.13 docker安裝直達
• jenkins Jenkins安裝直達

上面工具可自行安裝，jdk、maven、nodejs、git、也可以后面通過jenkins自動安裝，

接下來開始操作：

1.安裝maven打包插件進入：

Jenkins>系統管理>插件管理>可選插件，搜索NodeJS Plugin進行安裝，

安裝插件

等待安裝，并進行重啟

（2）進行全域工具配置：

Jenkins>系統管理>全域工具配置

jdk配置，我這里名字填jdk1.8，JAVA_HOME填本機jdk的JAVA_HOME路徑，沒有的話可以選則自動安裝，選擇好版本就好了，不過自動安裝需要Oracle 登錄后才能安裝，

（3）git配置

可本機安裝可以忽略，未安裝可選自動安裝

（4）maven配置

本機安裝的話填寫maven的安裝目錄，未安裝可選自動安裝

（5）NodeJS配置

本機安裝的話填寫NodeJS的安裝目錄，未安裝可選自動安裝

（6）docker配置

沒安裝可以選則自動安裝，本機安裝不需要填寫

最后點擊應用并保存，

三、開始新建任務

1.點擊新建任務

2、填寫任務名稱，選擇創建自由風格的專案，點確認

3.原始碼管理，填寫專案git地址，這里我填寫我的github地址，需要登錄的可以添加賬戶密碼或者ssh公鑰等進行授權

4.構建分支，我這里默認master

5.github下載時間比較慢，這里填10分鐘

6.構建環境，這里選擇nodejs

7.開始專案構建，填寫shell腳本

（1）shell腳本需要根據自己時間進行更改，下面僅供參考

echo $PATH
node -v
npm -v
#npm install -g cnpm --registry=http://registry.npm.taobao.org 
#安裝依賴，使用默認用戶
npm install --unsafe-perm
#構建專案到/dist
npm run build:prod
#將構建好的dist專案，移到/opt/data/build目錄
#/root/.jenkins/workspace/linfen-blog-ui/dist構建好的dist路徑
mv /root/.jenkins/workspace/linfen-blog-ui/dist /opt/data/vue

cd /opt/data/vue

#復制docker 檔案linfen-system/src/main/docker/Dockerfile
cp -Rf /root/.jenkins/workspace/linfen-blog-ui/static/docker/Dockerfile /opt/data/vue

#執行構建Dockerfile命令
docker build ./ -t my/linfen-blog-ui

if [[ -n $(docker ps | grep linfen-blog-vue) ]];then
        echo "l【infen-blog-vue】已運行，正在重啟，，，"
        #停止之前的容器運行
		docker stop linfen-blog-vue

		#洗掉之前的容器
		docker rm linfen-blog-vue
else
        echo "【linfen-blog-vue】不存在，正在部署，，，"
fi

#運行剛剛創建的容器
docker run  --name  linfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-ui

echo "構建完成"

（2）需要在opt中創建檔案夾用來專案構建成docker

# 創建專案構建目錄
mkdir /opt/build/vue

# nginx組態檔目錄和日志目錄
# nginx配置目錄，需要提交拷貝nginx.conf檔案到這里
mkdir /opt/software/nginx/conf/

# nginx日志目錄
mkdir /opt/software/nginx/logs/

8、創建Docker檔案放到/opt/build/vue目錄

# 設定基礎鏡像
FROM nginx
# 定義作者
MAINTAINER linfen-blog-ui
# 將dist檔案中的內容復制到 /usr/share/nginx/html 這個目錄下面
COPY dist/  /usr/share/nginx/html

9.開始執行構建

10、查看控制臺，構建情況

構建成功如下：

Build complete.

 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won't work.

+ mv /root/.jenkins/workspace/linfen-blog-vue/dist /opt/data/vue
+ cd /opt/data/vue
+ cp -Rf /root/.jenkins/workspace/linfen-blog-vue/static/docker/Dockerfile /opt/data/vue
+ docker build ./ -t my/linfen-blog-vue
Sending build context to Docker daemon  5.096MB

Step 1/3 : FROM nginx
 ---> ad4c705f24d3
Step 2/3 : MAINTAINER linfen-blog-vue
 ---> Running in 2cdc9a4459ef
Removing intermediate container 2cdc9a4459ef
 ---> 28909ac4fee0
Step 3/3 : COPY dist/  /usr/share/nginx/html
 ---> 9232c7507bc7
Successfully built 9232c7507bc7
Successfully tagged my/linfen-blog-vue:latest
++ docker ps
++ grep linfen-blog-vue
+ [[ -n d0b9cc5ca3cc   f1b654517986     "/docker-entrypoint.…"   23 hours ago   Up 21 hours   0.0.0.0:80->80/tcp, :::80->80/tcp           linfen-blog-vue ]]
+ echo l【infen-blog-vue】已運行，正在重啟，，，
l【infen-blog-vue】已運行，正在重啟，，，
+ docker stop linfen-blog-vue
linfen-blog-vue
+ docker rm linfen-blog-vue
linfen-blog-vue
+ docker run --name linfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-vue
ae971f47997c34cb85a7c08f121ff15f5b09d86e8c82c65d789bc856e19db0c8
+ echo 構建完成
構建完成
Finished: SUCCESS

日志太長，所以只截取一部分，

11.瀏覽器輸入http://ip:80,就可以看到我們最后的成果了，阿里云等服務器部署需要關閉對應的防火墻和安全組規則

安裝到Jenkins的jdk等，建議還是在本機自己安裝配置，不然很容易發生環境問題，

教程到這來結束