docker+jenkins前端react项目自动化部署

一、环境配置

服务器版本：centos8
docker版本：24.0.5
jenkins版本：2.420
react版本：18.2

二、docker内安装jenkins

• 2.1 映射jenkins内到宿主机docker环境

docker run -d -u root -p 8080:8080 -p 50000:50000 -v /home/jenkins_home:/var/jenkins_home -v /home/localtime:/etc/localtime --name MyJenkins jenkins/jenkins
# 这三个是映射宿主机docker
-v /var/run/docker.sock:/var/run/docker.sock
-v /usr/bin/docker:/usr/bin/docker 
-v /etc/docker:/etc/docker

三、配置jenkins

• 配置gitee
  参考gitee官方教程Jenkins插件
• jenkins 安装
  
• 配置项目流水线

jenkins配置远程ssh

pipeline {
    agent any
    stages {
        stage('拉取代码') {
            steps {
                git branch: 'master', credentialsId: 'jenkins里的凭证', url: 'git地址'
            }
        }
        stage('删除镜像') {
            steps {
                sh 'docker --version'
                 sh 'docker rmi hdzkui > out.log 2>err.log  &'
            }
        }
        stage('构建镜像') {
            steps {
               sh 'docker build -t hdzkui .'
            }
        }
       stage('打包镜像') {
            steps {
               sh 'docker save -o hdzkui.tar hdzkui:latest'
            }
        }
          stage('宿主机执行') {
            steps {
             sshPublisher(publishers: [sshPublisherDesc(configName: 'dockerssh', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '''
            docker rm -f hdzkui || true> out.log 2>err.log
            docker rmi hdzkui:latest || true > out.log 2>err.log
            docker load -i hdzkui.tar
            docker images
            docker run --name hdzkui -it -d -p 4005:80 hdzkui:latest''', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: './', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'hdzkui.tar')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: true)])
            }    
        }
    
    }
}

四、jenkins配置ssh

• 安装Publish over SSH
• 
  

五、项目中创建Dockfile

FROM node:14.18.0 AS builder

# 移动到工作目录：/home/www
WORKDIR /home/www

# 将代码复制到容器中
COPY . .

# 安装依赖,打包
RUN npm -v
RUN npm config set registry https://registry.npmmirror.com/
RUN npm install cnpm -g --registry=https://registry.npmmirror.com/
RUN cnpm i
RUN npm run build

###################
# 接下来创建一个nginx镜像，将dist内容复制进去
###################

FROM nginx

WORKDIR /usr/share/nginx/html
# 从builder镜像中把/dist 拷贝到当前目录
COPY --from=builder /home/www/dist .

EXPOSE 80

六、更改项目流水线配置

pipeline {
    agent any

    stages {
        stage('拉取代码') {
            steps {
                git branch: 'master', credentialsId: '凭证', url: '仓库地址'
            }
        }
        stage('停止镜像'){
            steps{
                 sh 'docker --version'
                sh 'docker rm -f aaa'
            }
        }
        stage('删除镜像') {
            steps {
                 sh 'docker rmi aaa'
            }
        }
        stage('构建镜像') {
            steps {
               sh 'docker build -t aaa .'
            }
        }
        stage('删除临时镜像') {
            steps {
               sh 'docker rmi $(docker images -q -f dangling=true)'
            }
        }


       stage('运行镜像') {
            steps {
               sh 'docker run -d -p 4005:80 --name aaa aaa:latest'
              
            }
        }

    
    }
}

参考：
https://blog.csdn.net/TanHao8/article/details/130779041
https://blog.csdn.net/yueyue763184/article/details/129941605