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

导读:本篇文章讲解 Docker安装Nginx并且部署Vue项目超详细,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

安装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配置,只要重启容器最新配置就会生效。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/83883.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!