Docker打包VUE项目并运行

Docker打包VUE项目并运行

1、Docker正常运行，Vue项目正常运行并打包成dist包
2、vue项目是基于nginx基础镜像运行的
3、创建nginx镜像
1）外网从镜像服务器上拉取nginx :docker pull nginx
2) 创建nginx镜像：docker build -t nginx:latest .
3)docker run创建容器
docker run -ti -d --name nginx-1429 -p 9000:80 nginx:latest
4）查看运行的容器 docker ps
4、在项目dist同级目录下创建文件nginx文件夹，给nginx文件下创建文件default.conf

server_name:修改为docker服务宿主机的ip
该配置文件定义了首页的指向为/usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。
5、在dist同级根目录下创建Dockerfile文件

FROM nginx：该镜像是基于nginx:latest镜像构建的
COPY ./dist /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下
COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将 nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 nginx 镜像里的默认配置
6、创建dist镜像，并运行容器（在项目、Dockerfile所在目录下）
docker build -t zz-mms .
-t是给镜像命名，.(点)是基于当前目录的Dockerfile来构建镜像
docker run -d -p 9090:80 --name mms zz-mms
docker run：基于镜像启动一个容器
-d：后台方式启动
-p 9090:80: 端口映射，将宿主机的9090端口映射到容器的80端口
–name：容器名，叫mms
zz-mms：要启动的镜像名称
7、查看运行的容器
docker ps

8、宿主机ip:主机端口9090/index.html