Docker安装Nginx并且部署Vue项目超详细

安装Nginx服务

1.使用docker查询nginx的镜像

使用命令：docker search nginx

2.下载nginx镜像

使用命令：docker pull nginx

3.创建挂载目录

在/home/wms下创建/nginx
通过命令：mkdir nginx 创建目录

4.运行并且挂载nginx （可不看第7步以后的优化）

通过docker images 查看docker的镜像
docker run -d -p 80:80 --name nginx_wms_ui -v /home/wms/nginx/dist:/usr/share/nginx/html --restart=always nginx

5.把vue的目录上传到挂载的目录

6.把容器重启一下

查看容器id：docker ps
重启容器：docker restart 容器id

重启完成后，可以通过浏览器访问linux的ip,由于我设置的端口是80的默认浏览器可以不加，因为我们直接访问ip浏览器会自动添加80端口访问资源

7.为什么要挂载在到docker的/usr/share/nginx/html

看nginx的默认配置就知道
进入docker的容器里面：
通过命令docker ps查看运行容器信息；
在通过命令 docker exec -it 容器id /bin/bash 进入容器目录

进入 cd /etc/nginx/conf.d

下有个default.conf文件我们查看可以发现

但是你会发现etc/nginx下有个nginx.conf 配置文件我们查看配置发现这里有条语句是引用了上面default.conf的配置，由此可见我们以后需要配置其他项目路径就直接配置default.conf就行了。

但是这个有个缺点每次修改都需要进入容器的内部求修改。

8.优化nginx的配置文件（为了以后多项目部署方便修改Nginx）

我们可以通过把etc/nginx 复制到宿主机的目录下这样我们就可以修改宿主机的配置文件在重新启动一下容器就可以实现最新的配置
在home下创建nginx目录用于存放容器复制出来的文件（可以省略使用docker命令会自动创建）
首先使用命令：docker ps 查看容器信息
然后使用命令复制容器的文件到宿主机：docker cp nginx_wms_ui:/etc/nginx /home/

nginx_wms_ui:为容器的名称
/etc/nginx:为需要复制的文件
/home/ :把他保存到那个目录下

进入/nginx修改宿主机的default.conf配置文件命令：vi conf.d/default.conf
修改vue访问的路径（这个路径要记住，后面挂载需要使用）

通过docker ps -a 查看所有容器
在通过命令删除就的nginx容器：docker rm 容器id 删除容器

运行命令启动：

docker run --name nginx_wms_ui -p 80:80 -v /home/wms/nginx/dist:/usr/local/vue/dist -v /home/nginx:/etc/nginx -d nginx

解释：
–name：后面的是容器名称
-p:冒号前面是宿主机的对外端口，冒号后面的是容器的端口
-v：冒号前面的是宿主机的文件目录，冒号后面是容器的内部文件目录
-d:表示后端运行
nginx：最后面的nginx是镜像的名称

现在已经把宿主机的vue项目dist挂载到nginx容器中，这样监听的请求就会被nginx代理到对应的目录中访问资源，还有宿主机的/home/nginx也被挂载到了容器etc/nginx中，这样只要修改宿主机的nginx配置,只要重启容器最新配置就会生效。