如何使用docker部署vue项目

作者: 图恩分类: 开发笔记阅读: 516字数: 957发布时间： 2022-03-16 21:12:43

大家好我是图恩,熟悉vue项目的开发朋友应该了解，对于vue项目来说，上线其实就是执行npm run build 命令，然后将build出的dist文件夹上传到服务器上就可以了，对于现在的前后端分离项目来说，就是把dist放到nginx的html文件夹即可。

上传的过程既可以手动实现，也可以通过jenkins这类在线编译软件，总之，殊途同归。

除了上面两种还有一种现在比较火的部署方式，就是docker部署，当然正如上面说的，docker也是要实现上面的操作，只不过有些差异而已。

针对docker部署需要了解的是，一般我们只需要拉取nginx镜像，把dist文件夹写入镜像即可，不需要去镜像里面执行拉取代码、执行编译、打包等操作。这些操作一般在写入镜像执行。

这样做的目的跟docker的理念是一致的，功能解耦，方便维护，而且对于一些大公司来说，可能还需要将编译后的代码进行扫描等操作，如果在docker镜像内编译的话如果出现错误是不好定位问题的。

那么如何实现docker部署vue项目呢，操作如下参考：

文件目录如下：

vueProject: {

　　　　Dockerfile

　　　　dist

　　　　src

　　　　package.json

}

在vueProject 根目录下新建Dockerfile文件，注意没有后缀，nginx镜像默认服务器的目录在/usr/share/nginx/html，内容如下：

FROM nginx

COPY ./dist ./usr/share/nginx/html

build项目：

npm run build

Build完成后会生成dist目录

然后在vueProject根目录下打开命令行执行如下命令生成镜像：

docker build -t vuePro .

注意最后是一个点，代表在当前目录执行Dockerfile

如果没报错说明执行成功，此时可以在docker镜像列表看到该镜像。

启动镜像：

docker run --name vp -dp 8088:80 vuePro

—name vp 代表自定义启动的镜像名称

-dp 是-d,-p的简写

8088:80 代表在宿主机的8088端口映射镜像的80端口，因为nginx默认的服务器端口就是80

最后就是之前生成的镜像名称。

大功告成。