安装jenkins和配置，请看这篇文章：
http://blog.iwiki.ink/archives/jenkinsdockerpipline%E9%83%A8%E7%BD%B2springboot%E9%A1%B9%E7%9B%AE

1.配置Dockerfile

在前端项目根目录下新增：
Dockerfile
(author为作者名称，xxx为自己的项目名称)

FROM nginx:1.17.3-alpine

MAINTAINER author

ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && mkdir -p /xxx

WORKDIR /xxx

ADD /dist/  /usr/share/nginx/html/

提交代码,必要时合并分支

2.配置Jenkins Pipeline

jenkins新建流水线项目，流水线定义选择

Pipeline script

填写脚本如下：
(xxx是需要自己修改的配置，其中credentialsId为jenkins凭据的ID，可以在凭据管理中找到)
注意,这里构建项目的‘Npm run build’步骤是用的docker镜像的nodejs环境,如果是jenkins里安装了nodejs，则配置成

stage('Npm run build'){
            steps {
               # Nodejs18.8.0是安装nodejs时取的名称
                nodejs("Nodejs18.8.0"){
                    sh 'node --version'
                    sh 'npm --version'
                    sh 'npm install'
                    sh 'npm run build:prod'
                }
            }
        }

``` import java.text.SimpleDateFormat node { try{ //此处如此命名是为了发布到腾讯docker仓库，可自行修改 def dockerId='xxx' def dockerUrl='xxx' def dockerNamespace='xxx' def dockerName='xxx' //环境配置，没有使用vue自带的环境配置，自定义了一个js存放服务器地址，参考下一节 def env='test'

    def dateFormat = new SimpleDateFormat("yyyyMMddHHmm")
    def dockerTag = dateFormat.format(new Date())
    
    stage('git pull'){
        sh 'pwd'
        git branch: "xxx", credentialsId: 'xxx', url: 'xxx'
    }
    stage('Npm run build') {
        docker.image('node:11-alpine').inside {
            sh 'node --version'
            sh 'npm --version'
            sh 'npm install'
            sh 'npm run build:stage'
        }
    }
    stage('Docker build') {
        sh 'pwd'
        sh 'ls'
        def imageUrl = "${dockerUrl}/${dockerNamespace}/${dockerName}:${dockerTag}"
        def customImage = docker.build(imageUrl)
        sh "docker rm -f ${dockerName} | true"
        customImage.run("-it -p 8087:80 --name ${dockerName} -e env=${env}")
        //only retain last 3 images
        sh """docker rmi \$(docker images | grep ${dockerName} | sed -n  '4,\$p' | awk '{print \$3}') || true"""
    }
    currentBuild.result="SUCCESS"
}catch (e) {
    currentBuild.result="FAILURE"
    throw e
} finally {
    //发布邮件，请自行配置Jenkins邮件服务，不发送直接删除
    // mail to: 'xxx@qq.com',subject: "Jenkins: ${currentBuild.fullDisplayName}，${currentBuild.result}",body:"${currentBuild.result}"
}

}

该脚本来自：https://juejin.cn/post/6844903955634323469

customImage.run("-it -p 8087:80 --name $ -e env=$")

这行代码的意思是:将构建好的镜像的80端口绑定到宿主机的8070端口（前端是以nginx镜像为基础构建出来的），后期要配合单独nginx镜像对外提供服务，就可以为nginx镜像配置代理规则，比如http://abc.com/web 将 /web转发到8070端口

该脚本可以省去为jenkins安装nodejs环境的步骤，pipeline script执行时会拉取一个nodejs的docker镜像去执行npm install等操作

配置完成后，点击保存，构建项目，完成后进入ssh输入

sudo docker ps

查看是否成功运行🎆