Vue项目打包成docker镜像部署

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://monkey.blog.xpyvip.top/archives/vue-xiang-mu-da-bao-cheng-docker-jing-xiang-bu-shu