借鑑部落格：https://www.jianshu.com/p/1d07b986ab2c

1、準備一個vue專案程式碼上傳到git倉庫

2、jenkins配置node外掛：

　　2,1、jenkins全域性配置，選擇自動安裝node：

3、接下建立一個任務，選擇自由風格專案

　　3.1、建立的任務配置git倉庫地址：

　　3.2、專案構建配置這裡選擇執行shell，就是寫一些shell指令碼命令打包這個vue專案，並執行到docker容器（由於我是把打包好的vue專案放到nginx裡面的，所以docker執行的是nginx容器，而沒有直接執行打包好的vue專案）

　　3.3、/home/vueProject/nginx/ 此目錄下會放三個配置檔案：default.conf 、 dockerfile 、dockerRun.sh

　　　　　　default.conf 此配置檔案是用來配置nginx的

　　　　　　dockerfile 用來生成docker映象

　　　　　　dockerRun.sh 此腳本里面寫構建vue、生成並執行nginx映象容器的shell命令

　　　　3.3.1、default.conf配置檔案內容如下：

server {
    listen       80;
    server_name  xx.xx.xx.xx;  #伺服器的ip

    location 
 
/ {
        root   /home/vue-project/nginx;   #打包的dist資料夾存放路徑
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

　　　　3.3.2、dockerfile 配置檔案內容如下：

FROM nginx

MAINTAINER myname_z

RUN rm 
 
/etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /home/vue-project/nginx/

　　　　3.3.3、dockerRun.sh 指令碼命令檔案內容如下：

#=====================================================================================
#=================================1、定義初始化變數======================================
#=====================================================================================

#操作/專案路徑(Dockerfile存放的路徑)
BASE_PATH=/home/vueProject

#專案名稱
SERVER_NAME=nginx-vue-project

#獲此專案的取容器id
CID=$(docker ps -a | grep -w "$SERVER_NAME" | awk '{print $1}')

#獲取此專案的映象id
IID=$(docker images | grep -w "$SERVER_NAME" | awk '{print $3}')



#=====================================================================================
#=====================================================================================

# 查詢源jar檔名，進行重新命名，最後將原始檔移動到Dockerfile檔案所在目錄
function transfer(){
    echo "=========================>>>>>使用npm命令打包vue專案====="
        npm install
        npm run build

    echo "=========================>>>>>>>移動打包好的dist到Dockerfile所在目錄=========="

        cp -r /var/lib/jenkins/workspace/dist/target/dist /home/vueProject/nginx

    echo "=========================>>>>>>>遷移完成Success"

}



#=====================================================================================
#==================================3、構建最新映象=======================================
#=====================================================================================

# 構建docker映象
function build(){

    #無論映象存在與否，都停止原容器服務，並移除原容器服務
    echo "=========================>>>>>>>停止$SERVER_NAME容器，CID=$CID"
    docker stop $CID

    echo "=========================>>>>>>>移除$SERVER_NAME容器，CID=$CID"
    docker rm $CID

    #無論如何，都去構建新的映象
    #構建新的映象之前，移除舊的映象
    if [ -n "$IID" ]; then
        echo "=========================>>>>>>>存在$SERVER_NAME映象，IID=$IID"


        echo "=========================>>>>>>>移除老的$SERVER_NAME映象，IID=$IID"
        docker rmi $IID

        echo "=========================>>>>>>>構建新的$SERVER_NAME映象，開始---->"
        echo "=========================>>>>>>>構建新的$SERVER_NAME映象，完成---->"

    else
        echo "=========================>>>>>>>不存在$SERVER_NAME映象，構建新的映象，開始--->"


        cd $BASE_PATH
        docker build -t $SERVER_NAME .
        echo "=========================>>>>>>>構建新的$SERVER_NAME映象，結束--->"
    fi
}




#=====================================================================================
#==============================4、最後執行docker容器，啟動服務===============================
#=====================================================================================

# 最後執行最新容器，啟動服務
function run(){
    transfer
    build

    docker run -d --restart=always --name $SERVER_NAME -p 80:80 $SERVER_NAME

}

#入口
run

...