背景
部署環境中jenkins和docker的使用,請參看我的上篇博客:jenkins部署SpringBoot的jar包項目到docker容器並運行
項目部署運維往往是一件讓人很頭疼的事情,如果人工每次進行部署,繁瑣的流程讓人望而生畏,每次又都是重複的操作,讓人越看越厭。這篇文章將介紹如何使用jenkins+docker自動化部署前端項目。
jenkins+docker部署前端項目
jenkins相關配置
配置jenkins插件和全局工具配置
配置所需插件
點擊系統管理,選擇插件管理,添加除了新手推薦需要安裝的插件
安裝Publish Over SSH用於連接遠程服務器
安裝Deploy to container插件用於把打包的應用發佈到遠程服務器
進行全局工具配置
如果win10或者服務器安裝的有,可以直接選擇使用(不選擇自動安裝),如果沒有也可以選擇自動安裝。
進行系統設置
去系統設置裏配置Publish over SSH
- Passphrase 服務器的密碼
- Path to key 連接遠程服務器密鑰文件的路徑
- Key 密鑰文件的內容
- Name 自定義服務器名
- HostName 服務器IP外網地址
- UserName 服務器用戶名
- Remote Directory 傳輸文件的目錄
Publish over SSH可以配置多個,根據Name進行判別。會將所需要傳的文件源串發送至Remote Directory目錄。
構建項目
構建自由風格的項目
配置git地址
如果有需要可以構建觸發器,用於自動化構建項目
觸發器建議使用這2種
1.定時構建
定時構建就是沒隔一段時間就是構建1次任務
0 * * * * 代表每小時0分的時候構建1次項目
第1個代表分,第2個代表時,第3個代表日,第4個代表月,第5個代表周
2.輪詢SCM
輪詢SCM就是查看源碼管理的代碼有沒有更新,如果更新了就去構建,沒有更新就不會構建
*/5 * * * * 代表每5分鐘就去查看源碼有沒有更新
當然其他方式的觸發器也可以使用。
以上爲配置前端項目共通內容
部署Vue項目
配置構建環境,選用Node
如果沒有,在全局工具配置裏面配置
配置構建命令
選擇windows命令,執行npm的安裝和構建命令,這裏的安裝和構建命令需要分爲兩步,分開執行,否則不成功,原因並不知道。
執行完一次windows命令,需要執行exit 0
,否則會報錯:Build step 'Execute Windows batch command' marked build as failure
發送dist文件夾下的內容至遠程服務器,並執行shell命令
- Source files 項目構建後的目錄(以本項目爲根路徑)
- Remove prefix 去前綴
- Remote directoty 發佈的目錄(前綴爲系統設置裏配置Publish over SSH的Remote Directory)
- Exec command 發佈完執行的命令。
Exec command 的shell腳本:
BUILD_ID=dontKillMe /usr/local/dockerApp/blog-manage-web/docker.sh
解釋:
/usr/local/dockerApp/blog-manage-web
是dist文件夾的放置目錄
docker.sh
是執行docker的相關操作
服務器進行docker相關配置
- 進入雲服務器中到項目的目錄下,即
/usr/local/dockerApp/blog-manage-web
- 在該目錄下創建並編寫Dockerfile文件
FROM nginx
COPY dist/ /usr/local/html/blog-manage-web/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'blog-manage-web build ok'
這裏的nginx爲docker安裝的容器,如果沒有,運行時會自動安裝
- 創建並編輯ngin的配置文件nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 8089;
server_name 118.89.143.27;
location / {
root /usr/local/html/blog-manage-web;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
- 創建並配置docker.sh腳本
當時jenkins遠程將dist發送至服務器的/usr/local/dockerApp/blog-manage-web
目錄
# 文件的根路徑
BASE_PATH=/usr/local/dockerApp/blog-manage-web
#docker 鏡像/容器名字或者jar名字 這裏都命名爲這個
SERVER_NAME=blog-manage-web
#容器id
CID=$(docker ps | grep "$SERVER_NAME" | awk '{print $1}')
#鏡像id
IID=$(docker images | grep "$SERVER_NAME" | awk '{print $3}')
#修改文件夾的權限
chmod -R 777 $BASE_PATH/dist
# 判斷鏡像是否存在
if [ -n "$IID" ]; then
echo "存在$SERVER_NAME鏡像,IID=$IID"
docker stop $SERVER_NAME # 停止運行中的容器
docker rm $SERVER_NAME ##刪除原來的容器
docker rmi $IID ## 刪除原來的鏡像
else
echo "不存在$SERVER_NAME鏡像,開始構建鏡像"
fi
# 構建docker鏡像
cd $BASE_PATH
docker build -t $SERVER_NAME .
# 運行容器
docker run --name $SERVER_NAME -v $BASE_PATH:$BASE_PATH -d -p 8089:8089 $SERVER_NAME
關鍵點爲:如果存在鏡像,停止運行中的容器-刪除原來的容器-刪除原來的鏡像-構建新的鏡像-運行新的容器;如果不存在鏡像,構建新的鏡像-運行新的容器。
有的博客說,有-v掛載之後,每次本地更新jar包重啓容器即可,不用重新構建鏡像,不知道是否可行,需要測試。測試後在進行更新,
立即構建項目
如果是success說明成功
通過ip+端口,訪問項目接口,測試是否成功
部署普通的H5項目
利用jenkins+docker也可配置H5項目,唯一的區別只是不用執行npm的相關目錄,直接將項目複製進容器,利用nginx進行反向代理即可。
此處操作與上文類似,所以省略。
下面講述使用win10的jenkins+docker安裝tomcat部署前端項目
win10的jenkins+docker安裝tomcat部署前端項目
關於docker安裝tomcat請參看我的另一篇博客:docker安裝mysql、tomcat、nginx
jenkins的所有配置與上文幾乎一致,只是在執行構建操作有所區別
構建
系統設置裏配置的Publish over SSH有所改變
因爲/usr/local/dockerApp/tomcat/webapps/test
與tomcat的webapps/test
有掛載,所以上傳到這裏可以直接進行訪問。
掛載操作,參看上面docker安裝tomcat的鏈接(掛載目錄可以進行修改)。
然後立即構建進行測試。
訪問地址:ip:端口/test/項目名