jenkins+docker+nginx+tomcat實現vue項目部署

一、項目准備

1、新建一個vue的項目，確保能在瀏覽器正常訪問。然后在項目的根目錄下新建一個Dockerfile的文件，內容如下

FROM nginx
COPY dist /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

2、在根目錄下創建一個nginx.conf，內容如下

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       9001;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

在瀏覽器訪問服務器ip：8081，通過nginx轉發到localhost：9001。這里只是訪問前端，沒有訪問后台。localhost可以寫成服務器ip

二、將代碼提交到GitHub

地址：https://github.com/zwh0910/vue-print.git,

#初始化倉庫
git init
#將代碼添加到暫存區
git add .
#提交代碼
git commit -m "add files"
#將代碼推送到GitHub
git remote add origin https://github.com/zwh0910/vue-print.git
git push -u origin master

三、項目配置

1、下載nodeJS壓縮包，下載地址：https://nodejs.org/zh-cn/download/，然后拷貝到服務器並解壓到/root/jenkins/data目錄下

2、在jenkins中安裝nodeJs插件，然后重啟jenkins

3、全局工具配置nodeJs

 

 4、新建一個自由風格的軟件項目

5、配置git

 6、配置版本規則

VERSION_NUMBER
${JOB_name}_${BUILD_DATE_FORMATTED,"yyyyMMdd"}

7、配置ndoeJS

 8、構建中添加“執行shell”

echo $PATH
node -v
npm -v
npm config set registry https://registry.npm.taobao.org/
npm install
npm run build

9、構建中添加“build/publish docker images”

vue-print:${VERSION_NUMBER}.${BUILD_NUMBER}

10、構建中添加Execute shell script on remote host using ssh

docker rm -f vue-print
docker run -d -p 8081:9001 --name vue-print vue-print:${VERSION_NUMBER}.${BUILD_NUMBER}

注意：1、瀏覽器訪問端口為8081，修改該代碼可以防止端口沖突。2、9001端口要在nginx.conf中配置，即通過8081端口訪問9001端口

11、點擊立即構建，構建成功后訪問http://服務器ip:8081/