jenkins+docker+nginx+vue前端項目實現自動部署

借鑒博客：https://www.jianshu.com/p/1d07b986ab2c

借鑒博客：https://blog.csdn.net/ansu2009/article/details/83584796

 

1、准備一個vue項目代碼上傳到git倉庫

 

 

2、jenkins配置node插件：

 

 　　

　　2,1、jenkins全局配置，選擇自動安裝node：選擇的版本要和本地vue項目運行的版本一至，不然jenkins打包的時候會報錯各種問題

 

 

 

 

 

3、接下創建一個任務，選擇自由風格項目

 

 

 

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

 

 　　3.2、選擇構建環境：如果安裝好了nodeJs配置，直接選中就可以了

 

 

 

　　3.3、項目構建配置這里選擇執行shell，就是寫一些shell腳本命令打包這個vue項目，並運行到docker容器（由於我是把打包好的vue項目放到nginx里面的，所以docker運行的是nginx容器，可以選擇其他的：比如tomcat，把打包好的dist丟到tomcat里面，再運行tomcat也是一樣的）

　　

 

 

　　　　　　　　npm這段打包vue項目的命令本來是寫進dockerRun.sh腳本里的，不知道為什么在腳本里執行沒生效，提示找不到npm命令，所以把這段命令拿出來先執行了，再執行腳本中的命令：

node -v
npm -v
cd /var/lib/jenkins/workspace/vue-project
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build

sh /home/vueProject/nginx/dockerRun.sh

 

 

 

 

 

　　　　========最后保存，然后去服務器配置一些打包部署的重要配置文件===============================

 

 

 

　　3.4、/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;

    location / {
        root /home/vueProject/nginx;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
        error_page 405 =200 $uri;
    }

    location /api {
        proxy_pass http://xx.xx.xx.xx:8080/jz-project;
        proxy_redirect off;
        proxy_cookie_path / /api;
    }

    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/vueProject/nginx/

 

 

　　　　3.3.3、dockerRun.sh 腳本命令文件內容如下：

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

#操作/項目路徑(Dockerfile存放的路徑)
#BASE_PATH=/home/vueProject/nginx

#項目名稱
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}')



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

# 將build好的vue項目源文件目錄移動到Dockerfile文件所在目錄
function transfer(){
    echo "=========================>>>>>使用npm命令打包vue項目====="

　　　　cd dist

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

        cp -r /var/lib/jenkins/workspace/vue-project/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鏡像，開始---->"

　　　　 cd /home/vueProject/nginx
        docker build -t $SERVER_NAME .

　　　　 echo "=========================>>>>>>>構建新的$SERVER_NAME鏡像，完成---->"

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


        cd /home/vueProject/nginx
        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

 

 

 4、最后所有准備工作完成，點擊立即構建，查看jenkins控制台日志輸出：  成功如下

 

 　　4.1、在服務器上查看此項目在docker鏡像的容器是否運行成功： 成功如下：

 

 

　　4.2、在瀏覽器直接訪問vue項目所在服務器ip地址，成功如下：

 

 

 

 

 

 

 

 

 

 

 

 

...