前面一篇文章我们展示了docker如何挂载数据这篇文章简单介绍一下docker如何部署一个前端网站。首先我们把前台代码进行打包变成一个文件夹。本文以vue项目为例随便创建了一个vue项目然后进行打包。打包完的文件夹名称是dist。如果你没有vue项目可以点击下面这个项目下载dist.zip链接:https://pan.baidu.com/s/115EhZvAVSXLV-dPmRAGpQw?pwd1hgh自己注意解压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这样就可以了。