Ubuntu系统 jenkins部署vue前端服务

1.前提：

       服务器上安装node及npm，通过如下命令查看是否安装

2.新建流水线

3.流水线脚本：

node{
    stage('Git Checkout'){
checkout([$class: 'GitSCM', branches: [[name: '*/test']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: '261446b0-5a90-4c76-b060-39cd389b418c', url: 'ssh://*****************/xd_front.git']]])
}
   
stage('vue Build'){
    
        sh '''#!/bin/bash
              npm install
              npm run test
              rm -rf disttemp
              mkdir disttemp
              cp -rf dist disttemp/
              cp -rf /*****/vue/* disttemp/
              docker stop ${Image} | true
              docker rm ${Image} | true
              docker rmi ${Image}:${Tag}  | true
              cd disttemp
              docker build -t  ${Image}:${Tag} .
              docker run -d -p ${Port}:80  --name ${Image}   ${Image}:${Tag}
             ''' 
    }
}

5.vue文件夹内容

Dockerfile文件：

FROM nginx:1.17
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

nginx文件夹：

default.conf文件：

server {
listen       80;
server_name  localhost;

#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ @router;
}

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
location @router {
      rewrite ^.*$ /index.html last; # 接到截取的uri 并按一定规则重写uri和vue路由跳转
 }
}