docker构建vue项目镜像并发布到dockerhub中使用

小灰灰 2023-10-04 20:18 45阅读 0赞

先将本地vue项目打包为一个镜像，不会的可以看文章：[使用docker构建vue项目并成功运行在本地和线上\_1024小神的博客-CSDN博客][docker_vue_1024_-CSDN]

然后开始注册一个dockerhub账号并登陆：然后点击 create repository

[Docker Hub][]

![9d776595e8ce4dee8c11a7b2e3d8b8a4.png][]

开始填写仓库名称和描述：（此仓库类似代码仓库，可以存储多个不同版本的镜像，就像代码迭代一样，每打一个tag，就相当于一个版本，都会在这个仓库里面进行管理）

![15f10e8a95e440d988ab278d6935c505.png][]

然后回到本地，查看一下本地镜像：

![da61eca10bab4533bf95b6d910fbad0a.png][]

也可以先将容器变为镜像，或者直接tag一个已存在的镜像：

### 将容器变为镜像： ###

// 找到运行中的容器 (复制你要打包的容器的id)
    docker ps
    // 打包为镜像 （86d78d59b104：容器的id 、  cvreport：我们要打包成的镜像的名字）
    docker commit 86d78d59b104 cvreport
    // 找到打包的镜像
    docker images

### 为镜像打一个标签tag: ###

docker tag cvreport 1024xiaoshen/cvreport:v1
    
    // cvreport ：本地镜像的名字 、 
    // 1024xiaoshen：我们docker仓库的用户名 、 
    // cvreport：我们刚才新建的仓库名 、 
    // v1：版本号，可以不设置

然后docker images一下，可以看到我们刚打的tag镜像：

![4d6cb0e1e70748969bd744901fb00828.png][]

### 将tag镜像push上传到我们的仓库： ###

docker push 1024xiaoshen/cvreport:v1
    
    // cvreport ：本地镜像的名字 、 
    // 1024xiaoshen：我们docker仓库的用户名 、 
    // cvreport：我们刚才新建的仓库名 、 
    // v1：版本号，这里必须填我们刚打tag时候的那个

![de2573e50c3840999405b40c9f6ce7aa.png][]

然后回到我们的dockerhub仓库：就可以看到刚上传的镜像

![92126a2a1dec4aa9bf7657df3b85b354.png][]

### 下载自己的镜像： ###

// 记得先登录，输入用户名和密码
    docker login
    
    // 根据版本号拉取
    docker pull 1024xiaoshen/cvreport:v1

比如我到自己的云服务器上，先登陆

![ce867dd044cb4bdbaa696ff7dcc1deaa.png][]

### 然后开始pull镜像：![c785c6746e164779941940f4fd4fe3ca.png][] ###

查看一下：

![205656025fb447308ff2c2c49fdcea47.png][]

### 运行一下： ###

docker run -d -p 9090:80 --name cvpod cf09

![d7d614fbdd6b48d2a4729880c5968a13.png][]

然后在浏览器输入 服务器IP:9090 即可访问，如果不行，请在安全组里开放9090端口：

![0542f46d7f654d7e84a015169725df40.png][]

![36be3c6a4338424089d185319c12939d.png][]

[docker_vue_1024_-CSDN]: https://xiaoshen.blog.csdn.net/article/details/128252147
[Docker Hub]: https://hub.docker.com/
[9d776595e8ce4dee8c11a7b2e3d8b8a4.png]: https://img-blog.csdnimg.cn/9d776595e8ce4dee8c11a7b2e3d8b8a4.png
[15f10e8a95e440d988ab278d6935c505.png]: https://img-blog.csdnimg.cn/15f10e8a95e440d988ab278d6935c505.png
[da61eca10bab4533bf95b6d910fbad0a.png]: https://img-blog.csdnimg.cn/da61eca10bab4533bf95b6d910fbad0a.png
[4d6cb0e1e70748969bd744901fb00828.png]: https://img-blog.csdnimg.cn/4d6cb0e1e70748969bd744901fb00828.png
[de2573e50c3840999405b40c9f6ce7aa.png]: https://img-blog.csdnimg.cn/de2573e50c3840999405b40c9f6ce7aa.png
[92126a2a1dec4aa9bf7657df3b85b354.png]: https://img-blog.csdnimg.cn/92126a2a1dec4aa9bf7657df3b85b354.png
[ce867dd044cb4bdbaa696ff7dcc1deaa.png]: https://img-blog.csdnimg.cn/ce867dd044cb4bdbaa696ff7dcc1deaa.png
[c785c6746e164779941940f4fd4fe3ca.png]: https://img-blog.csdnimg.cn/c785c6746e164779941940f4fd4fe3ca.png
[205656025fb447308ff2c2c49fdcea47.png]: https://img-blog.csdnimg.cn/205656025fb447308ff2c2c49fdcea47.png
[d7d614fbdd6b48d2a4729880c5968a13.png]: https://img-blog.csdnimg.cn/d7d614fbdd6b48d2a4729880c5968a13.png
[0542f46d7f654d7e84a015169725df40.png]: https://img-blog.csdnimg.cn/0542f46d7f654d7e84a015169725df40.png
[36be3c6a4338424089d185319c12939d.png]: https://img-blog.csdnimg.cn/36be3c6a4338424089d185319c12939d.png