docker如何部署一个前端网站

前面一篇文章，我们展示了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

这样就可以了。