如何将Jenkins构建的React项目Dist文件复制到Nginx容器？

方法一：Docker共享卷（最直接） #

1. 创建一个用于共享静态文件的Docker卷：

   docker volume create nginx_static_volume
   

2. 启动Nginx容器时挂载该卷到静态文件目录：

   docker run -d -p 80:80 --name my-nginx -v nginx_static_volume:/usr/share/nginx/html nginx
   

3. 在Jenkins构建完成后，将dist目录内容复制到共享卷：
   • 如果Jenkins容器也挂载了这个卷，直接在构建脚本里将dist文件同步到卷的挂载路径即可；
   • 如果没挂载，用docker cp命令从Jenkins容器复制到Nginx容器：

     # 替换成Jenkins容器内dist的实际路径
     docker cp jenkins-container:/var/jenkins/workspace/react-project/dist/. my-nginx:/usr/share/nginx/html/
     

方法二：Jenkins流水线+Docker命令 #

1. 确保Jenkins容器能访问宿主机的Docker服务：启动Jenkins时挂载Docker socket：

   docker run -d -p 8080:8080 -v /var/run/docker.sock:/var/run/docker.sock -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts
   

2. 在Jenkins流水线中添加部署步骤，直接执行docker cp：

   pipeline {
       agent any
       stages {
           stage('Build React App') {
               steps {
                   sh 'npm install'
                   sh 'npm run build'
               }
           }
           stage('Deploy to Nginx') {
               steps {
                   sh 'docker cp ./dist/. my-nginx:/usr/share/nginx/html/'
                   // 可选：如果需要刷新Nginx缓存，重启容器
                   sh 'docker restart my-nginx'
               }
           }
       }
   }
   

方法三：宿主机目录中转 #

1. 在宿主机上创建一个临时目录，比如/opt/react_dist
2. 启动Jenkins时挂载该目录：

   docker run -d -p 8080:8080 -v /opt/react_dist:/opt/react_dist -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts
   

3. Jenkins构建完成后，将dist目录同步到宿主机挂载的目录：

   sh 'cp -r ./dist/* /opt/react_dist/'
   

4. 再将宿主机目录的内容复制到Nginx容器：

   docker cp /opt/react_dist/. my-nginx:/usr/share/nginx/html/
   

注意事项 #

• Nginx的静态文件目录默认是/usr/share/nginx/html，如果你的Nginx配置了自定义目录，要替换成对应路径；
• 使用docker cp时，要确保Jenkins容器内已安装Docker客户端，或者通过挂载宿主机的Docker命令来执行；
• 静态文件更新后，Nginx通常会自动读取新内容，无需重启，但如果涉及Nginx配置变更则需要重启容器。

内容的提问来源于stack exchange，提问作者Jojo