通过构建镜像，以镜像的形式部署项目，部署后的项目可称为一个容器app（感兴趣的人可研究docker和kuberne、es相关内容），达到轻便、节省开支、资源隔离等
1. 环境准备
下载docker app，并启动
http://get.daocloud.io/#install-docker-for-mac-windows
2. 在vue项目根目录下编写Dockerfile文件
#dockerfile
#使用 nginx最新版本作为基础镜像
FROM nginx
#将当前文件夹的dist文件复制到容器的/usr/share/nginx/html目录
COPY ./dist /usr/share/nginx/html/
#声明运行时容器暴露的端口（容器提供的服务端口）
EXPOSE 8080
#CMD:指定容器启动时要运行的命令
CMD ["nginx", "-g", "daemon off;"]
3.项目打包
npm run build
4.构建镜像
#添加版本：docker build -t <镜像名称>:<镜像版本> .
#无版本，版本号默认为latest docker build -t <镜像名称> .
docker build -t my-vue-test
image.png
构建镜像成功后会出现如下内容，包括镜像id和镜像版本latest
Successfully built f401fedc4835
Successfully tagged my-vue-test:latest
5.查看生成的镜像
#可看到刚在构建成功的镜像
docker images
image.png
6. 启动容器
#格式（默认latest）: docker run -d -p 《外部访问端口》：《容器内端口 》 《容器名称》
#格式（对镜像打tag）：docker run -d -p 外部访问端口：容器内端口 《容器名称》:《tag即版本号》
#-d:后台运行
# -p: 端口映射 ；外部访问端口:容器内端口
#本地主机的3006端口映射到容器内的80端口，且容器在后台运行
docker run -d -p 3006:80 my-vue-test
执行命令后会显示一个id
image.png
7.查看是否已经成功运行
#查看已经成功运行的容器
docker ps
# 查看全部的容器
docker ps -a
已在运行的容器.png
8. 浏览器访问localhost:3006（3006端口为运行容器时映射到容器端口的端口），即可看到页面
image.png
9.以上操作可在本地浏览器进行正常访问，可对镜像进行复制到线上环境中，进行doker run即可在访问线上环境，类似操作，大同小异。
以上操作只是简单的一个部署环境，忽略基于公司产品的部署项目）
网友评论