Docker部署nginx域名配置及一些问题记录

2021年09月07日 · Vue;Docker;Nginx

[TOC]

Jenkins安装及项目部署可以看上一篇文章

安装nginx

1、这里我们拉取官方的最新版本的镜像：

$ docker pull nginx:latest

2、查看本地镜像

使用以下命令来查看是否已安装了 nginx：

$ docker images

在上图中可以看到我们已经安装了最新版本（latest）的 nginx 镜像。

3、运行容器

安装完成后，我们可以使用以下命令来运行 nginx 容器：

$ docker run --name nginx-test -p 8080:80 -d nginx

参数说明：

4、安装成功

最后我们可以通过浏览器可以直接访问 8080 端口的 nginx 服务：

进入容器

Docker部署nginx、配置域名

1) 挂载配置文件

   在这里我使用了默认的nginx配置来启动容器， 接下来修改nginx.conf文件，这里需要我们在外部挂载一个配置文件nginx.conf来挂载容器里的nginx的配置文件，因为我们知道在docker里进入到nginx容器时，再去修改 /etc/nginx/nginx.conf文件是极其不方便的，想要在nginx容器外面去操作配置是极其不方便的，因此就有了挂载配置文件的方案。
   首先在docker容器的外部新建一个/data/nginx/{conf,log,conf.d}, 其中conf目录下面为nginx的配置文件，default.conf为nginx的默认配置文件，这两个文件的内容可以先从docker容器里的nginx里拿出来，此路径需要通过指令进入到nginx容器的终端才能查看到, 另外不挂载的时候才能够进入到nginx容器的终端去查看路径。
   注: 外挂时一定需要 nginx.conf和default.conf两个文件才行，并且要保证配置内容没有出错。
在这里插入图片描述
nginx.conf:
在这里插入图片描述
default.conf:
在这里插入图片描述

   以下这两个配置文件的路径是用docker run起来以后，我们可以在没有指定挂载的时候，进入到nginx容器终端里显示出来的路径。

文件名 在nginx容器里的路径
nginx.conf /etc/nginx/conf
default.conf /etc/nginx/conf.d/default.conf

准备好如上所需要的配置文件后，我们就可以通过如下命令启动nginx容器:

docker run --name my-nginx -p 80:80 \
-v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /data/nginx/log:/var/log/nginx \
-v /data/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf \
-d nginx

参数解析:
-v: 表示的是将容器所需要的文件进行挂载， 本例中是将nginx镜像所在容器里的/etc/nginx/nginx.conf 文件挂载到 我们自定义的 /data/nginx/conf/nginx.conf 文件。
-d: 容器以后台的方式进行运行，关闭终端后也不停止。
-p: 80:80 , 将nginx容器的80端口映射到Docker的80端口。

启动成功后，通过docker ps命令查看容器是否在运行:
在这里插入图片描述
如果失败了，那么用docker logs 加上返回的一串字母串查看失败的日志。

2) 重新加载配置文件

   通过上述步骤，我可以将nginx的配置文件挂载到了docker容器外，然后我们只需要在外部修改 /data/nginx/conf/nginx.conf 文件即可， 修改好后需要重新启动一下容器。

docker restart my-nginx

如果在run容器出现容器已经存在，那么可以通过以下指令删除指定的容器, 后面接容器的id或者Name, 前提是要将运行中的容器先暂停:

docker stop my-nginx
docker rm   my-nginx

解决 nginx部署vue刷新、访问路由页面404

Bug

当使用nginx 部署vue项目的时候 当我们刷新页面的时候，或者访问路由配置页面的时候会直接404，这是因为通常我们做的vue项目属于单页面开发。所以只有index.html。解决这个bug也很简单。只需要将访问重定向到index.html这个页面。交由 index.html 去处理对应的路由跳转就好.

修改nginx配置

配置代码：

    # 如果要配置多个IP 域名，将下面的server复制一份修改 server_name
    server {
        listen   80; # 监听的端口 
        server_name  xx.xx.xxx.xx; # 处理的host地址 （请替换成你对应的项目访问 ip 或 域名）!!!
        root    /usr/share/nginx/html; # vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址（进入docker镜像中找到地址））
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
   }

解决 nginx部署vue刷新、访问路由页面404_cpc q:2531249502的博客-CSDN博客_nginx部署vue项目路由跳转刷新

一些命令

直接部署Vue到docker

← 返回首页