Docker 做为轻量级虚拟化技术,拥有持续集成、版本控制、可移植性、隔离性和安全性等优点。本文使用Docker来部署一个vue的前端应用,并尽量详尽的介绍了实现思路和具体步骤,以方便有相似须要的同窗参考。javascript
Docker 是一个开源的应用容器引擎,让开发者能够打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源,经过容器就能够实现方便快速而且与平台解耦的自动化部署方式,不管你部署时的环境如何,容器中的应用程序都会运行在同一种环境下。html
- 用 vue cli 建立一个vue项目,修改一下建立出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,而后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。
- 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。
- 修改 vuenginxcontainer 的 nginx 配置,使前端页面的接口请求转发到 nodewebserver 上。
- 稍做优化和改进。
运行命令前端
yarn build / npm run build
此时工程根目录下多出一个dist
文件夹vue
若是将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目。java
接下来就来构建一个这样的静态资源站点。node
nginx 是一个高性能的HTTP和反向代理服务器,此处咱们选用 nginx 镜像做为基础来构建咱们的vue应用镜像。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
在项目根目录下建立nginx
文件夹,该文件夹下新建文件default.conf
web
server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html
, 因此咱们能够一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html
目录下。docker
FROM nginx COPY dist/ /usr/share/nginx/html/ COPY nginx/default.conf /etc/nginx/conf.d/default.conf
- 自定义构建镜像的时候基于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镜像里的默认配置。
运行命令(注意不要少了最后的 “.” )npm
docker build -t vuenginxcontainer .
-t
是给镜像命名.
是基于当前目录的Dockerfile来构建镜像
查看本地镜像,运行命令
docker images
到此时咱们的 vue
应用镜像 vuenginxcontainer 已经成功建立。接下来,咱们基于该镜像启动一个docker
容器。
Docker 容器Container: 镜像运行时的实体。镜像(Image)和容器(Container)的关系,就像是面向对象程序设计中的类和实例同样,镜像是静态的定义,容器是镜像运行时的实体。容器能够被建立、启动、中止、删除、暂停等 。
基于 vuenginxcontainer 镜像启动容器,运行命令:
docker run \ -p 3000:80 \ -d --name vueApp \ vuenginxcontainer
docker run
基于镜像启动一个容器-p 3000:80
端口映射,将宿主的3000端口映射到容器的80端口-d
后台方式运行--name
容器名 查看 docker 进程
docker ps
能够发现名为 vueApp的容器已经运行起来。此时访问 http://localhost:3000 应该就能访问到该vue应用: 目前为止,已经经过docker
容器部署了一个静态资源服务,能够访问到静态资源文件。