由于近期項(xiàng)目需要實(shí)現(xiàn)自動(dòng)構(gòu)建部署前端vue工程祟霍，在此留作記錄。
本文主要描述使用Jenkins進(jìn)行自動(dòng)化構(gòu)建Vue項(xiàng)目通過(guò)Docker容器部署锌妻，并將鏡像推送至Harbor鏡像倉(cāng)庫(kù)的過(guò)程代乃。關(guān)于Jenkins、Docker仿粹、Harbor的安裝不做講解搁吓。
一、依賴
Jenkins版本：2.317
Docker版本：18.06.0-ce
Harbor版本：v2.1.0-a3eca103
二吭历、Dockerfile文件
-
建立dockerfile文件
Vue工程根目錄下創(chuàng)建文件Dockerfile
image.png
文件內(nèi)容如下：
# build stage
FROM node:12-alpine as build-stage
# 創(chuàng)建一個(gè)工作目錄
WORKDIR /app
# 復(fù)制符合.dockerignore規(guī)則的文件
COPY . .
# 安裝依賴
RUN npm install cnpm -g --no-progress --registry=https://registry.npm.taobao.org
RUN cnpm install --no-progress
# 構(gòu)建
RUN npm run build
# production stage
# 使用nginx鏡像
FROM nginx:stable-alpine as production-stage
# 使用--from把上面產(chǎn)生的靜態(tài)文件復(fù)制到nginx的運(yùn)行目錄
COPY --from=build-stage /app/dist /usr/share/nginx/html
# nginx容器內(nèi)部暴露的端口
EXPOSE 8064
# 運(yùn)行的命令
CMD ["nginx", "-g", "daemon off;"]
- 建立.dockerignore文件
Vue工程根目錄下創(chuàng)建文件.dockerignore堕仔。目的：為了防止工作目錄過(guò)大，防止像node_modules這種文件被拷貝進(jìn)來(lái)晌区。
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*
# Logs
logs
*.log
# Runtime data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn
三摩骨、Jenkins構(gòu)建并推送倉(cāng)庫(kù)
1、建立視圖及Item
2朗若、相關(guān)配置
注意：可提前在harbor上構(gòu)建好項(xiàng)目恼五，此處地址配置為：IP地址/項(xiàng)目/鏡像名稱:tags，那么啟動(dòng)Jenkins構(gòu)建在構(gòu)建成功后將自動(dòng)推送到harbor上哭懈。
注意：需要先在Jenkins上安裝好[Date Parameter Plugin]插件灾馒。
3、shell命令
① 檢查容器
echo "獲取當(dāng)前容器是否存在-----------------------------------------------------------------"
containerps=$(docker ps -f name=test_web -q)
containerstop=$(docker ps -a -f name=test_web -q)
for alpha in "$containerps";do
if [ "$alpha" == "" ];then
echo "檢查是否存在停止的容器-------------------------------------------------"
for alpha1 in "$containerstop";do
if [ "$alpha1" == "" ];then
echo "不存指定容器-----------------------------------"
else
echo "存在停止了的 然后直接刪除-----------開始------------------"
docker rm $alpha1
echo "存在停止了的 然后直接刪除-----------完成------------------"
fi
done
else
echo "存在-停止運(yùn)行 然后刪除----------------------開始-----------------"
docker stop $alpha
docker rm $alpha
echo "存在-停止運(yùn)行 然后刪除---------------------完成------------------"
fi
done
其中“test_web”為容器名稱遣总。
② 構(gòu)建鏡像
# build docker image 每次構(gòu)建不產(chǎn)生緩存
docker build --no-cache -t ${PushVersion} .
③ 運(yùn)行容器
運(yùn)行容器
docker run -d -p 8064:80 --restart always --name test_web \
-v /opt/app/test_web/app/volumes/config:/usr/share/nginx/html/config \
${PushVersion}
④ 刪除中間鏡像及推送
echo "刪除中間層鏡像-------------------------------完成----------------------------------"
docker rmi $(docker images -f "dangling=true" -q)
echo "刪除中間層鏡像-------------------------------完成----------------------------------"
echo "推送鏡像到鏡像倉(cāng)庫(kù)------------- 開始----------------------------------"
docker push ${PushVersion}
echo "推送鏡像到鏡像倉(cāng)庫(kù)------------- 完成----------------------------------"
四睬罗、Docker相關(guān)常用命令
- 構(gòu)建鏡像
docker build -t mytestapi .
注意：mytestapi為鏡像名稱轨功，鏡像名稱后面有一個(gè)點(diǎn)
- 運(yùn)行鏡像
docker run -d -p 8064:80 --restart always --name sc_testapi \
-v /opt/app/sc_testapi /app/volumes/config:/usr/share/nginx/html/config \
mytestapi
注意：端口： 映射宿主機(jī)8064端口到容器的80端口。（因此處nginx默認(rèn)80）
-v 掛載配置文件容达。宿主服務(wù)器主機(jī)目錄:容器目錄
mytestapi 鏡像名稱
- 查看鏡像
docker images
- 刪除鏡像
docker rmi 鏡像ID
- 查看容器
docker ps -a （查看所有容器）
docker ps （查看運(yùn)行中容器）
- 刪除容器
docker rm 容器ID
- 停止容器
docker stop 容器ID
- 啟動(dòng)容器
docker start 容器ID
- 重啟容器
docker restart 容器ID
- 打包鏡像并下載
保存：
docker save b1370b8cdc8c> /root/myyewuxitong-save-0523.tar
下載：
sz myyewuxitong-save-0523.tar
- 進(jìn)入運(yùn)行中容器
docker exec-it 容器ID /bin/bash
docker exec-it 容器ID bash
docker exec-it 容器ID sh 具體docker相關(guān)常用知識(shí)自行學(xué)些
五古涧、Harbor鏡像倉(cāng)庫(kù)
