Docker打包VUE项目镜像运行

前言

今天是国庆中秋双节前一天，我在上海，在的知几个朋友都回老家过节了，打开携程看了看机票价格，清醒的认识到还没赚够买机票的钱！望着故乡的方向，不禁感叹！

环境准备

1.docker环境一个
2.vue项目一个

接下来主要是前端编译后的代码打包通过Dockerfile打包Docker镜像！

VUE项目

1.打包目录设置
这里如果没有特殊要求那么建议使用默认的打包目录，如果有特殊目录设置需求的话那么需要在线面Dockerfile中配置
特殊目录设置

在项目根目录先创建vue.config.js文件
module.exports = {
  outputDir: '项目输出目录',
  publicPath: '/项目输出目录/'
}

2.编译打包

命令行输出配置好的编译命令

确定编译好的代码放到服务器上是能直接访问的，不用加其他的文件路径

3.编写Dockerfile文件
如果没又设置特殊访问目录路径使用下面即可

FROM nginx
EXPOSE 80
COPY /dist /usr/share/nginx/html
ENTRYPOINT nginx -g "daemon off;"

如设置了特殊访问目录的话需要将打好的dist目录打成压缩包放在同样的目录下

FROM nginx
EXPOSE 80
ADD/dist.zip /usr/share/nginx/html
ENTRYPOINT nginx -g "daemon off;"

原因：
COPY和ADD这里都是直接将dist里的文件直接复制到nginx的html目录，并不是将dist目录也复制进去


所以这里加特殊访问路径的和不加特殊访问路径的就有点区别，至于这里为什么要将COPY换成ADD和Dockerfile怎么写那就看看Docker综合篇这篇文章的Dockerfile详细介绍了

然后这里不难看出我用的编译器是idea，那么这里就可以直接使用idea操作远程DockerIDEA整合Docker插件打包镜像并运行

注意：
这里Dockerfile中有一个对外暴露的端口，这个是跟随镜像走的，这个可以去DockerHub官网自行查看！

上线Dockerfile就是你项目中的Dockerfile文件，下面- 9996:80就是运行时的端口映射，那么这里项目的访问地址就是http://xxx.xxx.x.xxx:9996/

访问测试

那么就搞定了