前面一篇文章，我们展示了docker如何挂载数据：
这篇文章简单介绍一下docker如何部署一个前端网站。
首先，我们把前台代码进行打包，变成一个文件夹。本文以vue项目为例，随便创建了一个vue项目，然后进行打包。打包完的文件夹名称是dist。
如果你没有vue项目，可以点击下面这个项目下载：
dist.zip链接:
https://pan.baidu.com/s/115EhZvAVSXLV-dPmRAGpQw?pwd=1hgh
自己注意解压
1.修改nginx.conf
我们主要的任务是修改nginx的配置文件，然后进行挂载。
worker_processes1;events{worker_connections1024;}http{include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout65;#gzip on;server{listen80;server_name my-test;location /{# root html/dist; #本地测试位置root /usr/share/nginx/html;#nginx容器规定位置index index.html index.htm;}error_page500502503504/50x.html;location=/50x.html{root html;}}}这里需要说明的是后台代理这个地方可以不用写，我们只是测试前台部署。
后台代理这里表示 所有请求中以 /api开头的全部转发到 http://test:8081这个端口去，这里的test就是上一篇文章中我们部署的jar包的那个容器名，8081就是那个容器的端口号。
2.挂载数据
我们在服务器的root目录下创建一个文件夹，叫nginx。我们把打包好的前台文件和nginx的配置文件一同复制到这个文件夹下面。
然后执行下面指令：
dockerrun-d--namenginx-test-p80:80-v/root/nginx/dist:/usr/share/nginx/html-v/root/nginx/nginx.conf:/etc/nginx/nginx.conf nginx然后访问地址，然后就可以看到我们使用docker创建的前端内容了。
3.使用dockerfile编写
上面我们使用指令进行的编写，我们也可以自己编写dockerfile，然后使用dockerfile来创建，效果一样，但是实际开发中多使用dockerfile。
我首先删除掉刚才的容器，然后编写dockerfile文件
#指定基础镜像FROM nginx#将前端文件复制到nginx容器规定目录下COPY dist /usr/share/nginx/html#将nginx配置文件复制到nginx规定目录下COPY nginx.conf /etc/nginx/nginx.conf我们将前台静态文件、nginx配置文件、Dockerfile文件放在同一个文件夹底下，然后cd到这个文件夹底下
然后执行下面指令，生成一个新镜像，镜像名字就是vue-app。注意指令末尾的点
dockerbuild-tvue-app.
然后我们再启动容器
dockerrun-d--namevue-test-p80:80 vue-app这样就可以了。
