Vue项目打包成docker镜像部署
一、介绍
我们部署Vue项目,可以build之后,直接放到nginx下面即可,今天给大家介绍创建docker镜像,使用docker镜像启动容器运行部署Vue项目的方式,可以尝试尝试,原理和使用nginx部署一样,不过是使用的docker容器而已,内部还是使用的是nginx作为基础镜像。
二、docker安装
docker安装就不介绍了,不懂的伙伴可以去看我的docker安装文章。之前也写过关于docker介绍、安装的文章,不了解如何安装使用的可以看以往的文章。
三、编写DockerFile
docker安装完成之后,在我们需要部署的项目目录中新建文件dockerFile。文件内容如下:
FROM nginx:latest
LABEL Author xpy
COPY build /usr/share/nginx/html
第一行:设置基础镜像,基础镜像使用nginx
第二行:作者信息
第三行:将build文件夹下面的内容拷贝到/usr/share/nginx/html目录下面(nginx的默认项目路径),其中build文件夹有可能是dist文件夹,如果没有,重新npm run build一下就出来了,也就是我们Vue项目打包之后我们正常使用nginx是拷贝过去的文件夹。
四、创建镜像
docker build -t xxx .
注意:后面的.不能省略,镜像创建成功之后使用docker images即可看到自己创建的镜像
五、启动镜像
docker run -d --name xxx -p 8888:80 xxx
启动命令说明:
-d:容器后台启动
—name : 容器名称
-p 8888:80 :将nginx容器的80端口映射到主机的8888端口,我们访问时直接访问主机ip+映射到主机的端口,这里是8888,如果有路径,后面还要带上路径。
xxx : 我们刚刚创建的自己的镜像的名称
六、总结
以上步骤即可帮助我们使用docker容器部署Vue项目,原理其实和我们使用nginx部署Vue是一样的,我们打包自己的镜像使用的基础镜像也是nginx,感兴趣的小伙伴可以自己动手尝试尝试。文章来源:https://www.toymoban.com/news/detail-401332.html
原文链接:https://monkey.blog.xpyvip.top/archives/vue-xiang-mu-da-bao-cheng-docker-jing-xiang-bu-shu文章来源地址https://www.toymoban.com/news/detail-401332.html
到了这里,关于Vue项目打包成docker镜像部署的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!