Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的应用程序都会运行在同一种环境下。Docker 作为轻量级虚拟化技术,拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。

Nginx 是一个高性能的 HTTP 和反向代理服务器,选用 Nginx 镜像作为基础来构建vue应用镜像。

 

1.获取 Nginx 镜像

docker pull nginx

  • Docker镜像(Image)一个特殊的文件系统。Docker 镜像是一个特殊的文件系统,除了提供容器运行时所需的程序、库、资源、配置等文件外,还包含了一些为运行时准备的一些配置参数(如匿名卷、环境变量、用户等)。 镜像不包含任何动态数据,其内容在构建之后也不会被改变。
  • Docker 镜像相关操作有:搜索镜像,docker search [REPOSITORY[:TAG]];拉取镜像,docker pull [REPOSITORY[:TAG]];查看镜像列表,docker image ls;删除镜像,docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] 等等。
  • Docker 镜像名称由 REPOSITORY 和 TAG 组成 [REPOSITORY[:TAG]],TAG默认为 latest。

2.生成vue静态文件

打包生产环境

npm run build:prod

docker 前端 dockerfile docker部署前端vue项目_Docker

命令执行成功后,会在当前目录产生dist文件夹


3.新建vueDocker目录,把dist目录拷贝到服务器该目录下并切换到该目录

docker 前端 dockerfile docker部署前端vue项目_docker_02


使用vi在dist创建Dockerfile

FROM nginx

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

:wq 保存退出

docker 前端 dockerfile docker部署前端vue项目_docker_03


4.自作镜像文件

docker build -t vue-docker . //镜像名要用小写,最后不能少了点

docker 前端 dockerfile docker部署前端vue项目_docker_04


查看镜像文件

docker image ls

docker 前端 dockerfile docker部署前端vue项目_Docker_05


5.启动容器

docker run -p 8888:80 -d vue-docker

//-d 后台运行容器,并返回容器ID ;

// 8888:80 把外网8888端口映射到docker的80端口

docker 前端 dockerfile docker部署前端vue项目_docker_06


docker ps //查看容器运行状态

docker 前端 dockerfile docker部署前端vue项目_Docker_07

 

备份镜像

docker save imagename  -o  /home/路径/iomsvueimg.tar

还原镜像

docker load --input iomsvueimg.tar

 

在默认的情况下,docker没有对容器进行硬件资源的限制,当容器负载过高时会尽肯能第占用宿主机资源。在这基础上,docker提供了针对容器的内存,CPU,IO资源的控制方式。

-c可以指定CPU的占比,--cpuset可以绑定CPU

 Docker提供参数-m, --memory="" 限制容器的内存使用量。

磁盘的IO限制,磁盘大小的限制,docker容器默认的空间是10G,如果想指定默认容器的大小(在启动容器的时候指定),可以在docker配置文件里通过dm.basesize参数指定。