vue 通过docker构建镜像部署项目

通过构建镜像，以镜像的形式部署项目，部署后的项目可称为一个容器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

构建镜像成功后会出现如下内容，包括镜像id和镜像版本latest
Successfully built f401fedc4835
Successfully tagged my-vue-test:latest

5.查看生成的镜像

#可看到刚在构建成功的镜像
docker images

image

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

7.查看是否已经成功运行

#查看已经成功运行的容器
docker ps

# 查看全部的容器
docker ps -a

image

8. 浏览器访问localhost:3006（3006端口为运行容器时映射到容器端口的端口），即可看到页面

image

9.以上操作可在本地浏览器进行正常访问，可对镜像进行复制到线上环境中，进行doker run即可在访问线上环境，类似操作，大同小异。

以上操作只是简单的一个部署环境，忽略基于公司产品的部署项目）