使用docker 以及nginx部署vue项目简单示例

1 、基本介绍

   随着技术的发展，前端分离以及容器技术的普及，使用docker以及nginx部署vue越来越便捷。

2 、具体实现步骤

2.1 实现步骤 

2.1.1 编写docker file

   在vue 项目中新建Dockerfile 文件，如下图

然后编写一个简单Dockerfile文件，其中"EXPOSE  8999"  表示nginx 容器运行时监听的端口

2.1.2  编写nginx  配置文件

     配置nginx 文件即可，此例子给出一个最简单的例子

    

2.1.3  打包vue项目

   在本地项目运行npm run build 即可，当然本地要nodes.js 

2.1.4 安装docker，并且下载nginx 镜像

    在目标服务器安装docker，下载docker 安装，下载网址：https://download.docker.com

下载后使用tar 名利解压安装即可，使用docker -v 验证是否安装成功

搜索nginx 的docker 镜像

下载nginx docker 镜像

2.1.5构建vue项目镜像， 运行docker  run 启动部署项目

使用docker build  -t project-test  ，命令运行镜像。使用docker run 执行镜像 ，执行 的命令

docker run -d -p 8999:80 --name project-test -v  /usr/localdata/web2-dist/dist:/usr/share/nginx/html -v /usr/local/data/web2/nginx.conf:/etc/nginx/nginx.conf project-test

其中/usr/localdata/web2-dist 为上传发布vue项目的包的路径,/usr/local/data/web2/nginx.conf为nginx 配置文件，通过docker 目录挂载的方式将vue 发布容器中。

3 总结