场景:图片上传回显,图片存放在后端(192.168.10.78 linux服务器中的某个文件夹下

服务配置:两个服务 192.168.10.73 和 192.168.10.78 其中前端服务部署在73上(并部署了nginx环境),后端服务部署在78上(未配置nginx环境)

 问题:前端图片回显时,显示不了 

原因是:图片放在后端服务,前端服务中通过nginx访问时,在其(nginx)宿主服务器上没有相应的文件路径,因此访问不到图片。

解决方法:在后端服务再部署上nginx环境,这样前端再访问图片的时候 

server {
        listen       19013;
        server_name  localhost;
              location /resource {
                        proxy_pass http://192.168.11.78:8099/resource;
                        ### alias /opt/PlatformResources/;
                        ###root  /opt/PlatformResource;
                        autoindex on;
        }
}

后端nginx配置

server {
        listen       80;
        server_name  localhost;
         location /resource/ {
                    alias /opt/PlatformResource/;
                    autoindex on;        
        }
        
    }


其中: alias /opt/PlatformResource/    :表示这里配置的是真正图片存放的目录
      autoindex on :开启目录访问权限

解释:前端服务访问图片的时候,转发到后端服务的nginx中(相当于访问了后端服务nginx中 /resource路径),这样就可以实现通过前端服务直接访问到后端服务中的图片了

后端服务部署nginx环境要注意 :

第一种方式通过通过docker 镜像来安装nginx环境(我用的是第一种方式,很多坑)

第二种方式通过传nginx压缩包,在linux上解压来安装nginx环境

首先要知道docker容器是独立于linux服务的,就是说使用容器不能之前访问容器外的目录,非常重要,非常重要,非常重要!!!!!

现在容器也启动了,配置也配置好了,怎么访问不到图片呢 !!!再看下面这个图(nginx的配置),有什么想法?

server {
        listen       80;
        server_name  localhost;
         location /resource/ {
                    alias /opt/PlatformResource/;
                    autoindex on;        
        }
        
    }


其中: alias /opt/PlatformResource/    :表示这里配置的是真正图片存放的目录
      autoindex on :开启目录访问权限

是因为 alias /opt/PlatformResource/这个目录在容器中并不存在啊,容器又和外部是隔离的当然就访问不到外部这个目录中的图片了

问题 :有什么办法可以实现访问容器内部的这个路径就能访问到图片呢?

那就是挂载,将外部的文件(/opt/PlatformResource/)挂载到容器中(/opt/PlatformResource/)从而实现外部和内容同步,这样就可以访问到图片了(相当于拷贝了外面的图片到容器中)

缺点:占用内存,图片相当于有两份

我这里将容器中的配置文件也挂载到外部

首先创建对应的目录(就是将容器中的文件放到外部这下文件目录下)

mkdir -p /opt/nginx/html /opt/nginx/logs /opt/nginx/conf /opt/nginx/conf

容器启动时挂载

docker run -d -p 8099:80 --name nginx1 -v /opt/nginx/html:/usr/share/nginx/html -v /opt/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/nginx/logs:/var/log/nginx -v /opt/nginx/conf/conf.d:/etc/nginx/conf.d -v /opt/PlatformResource:/opt/PlatformResource nginx

解释一:-v /opt/nginx/conf/nginx.conf:/etc/nginx/nginx.conf 其中

/opt/nginx/conf 是在外部创建的目录

/etc/nginx/nginx.conf 是nginx容器中的配置文件的路径

-v /opt/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:结合在一起就会将容器中的配置文件复制到外面对应的文件中,这样的好处是在容器外部修改配置文件,容器内部的配置也相应改变。


解释二:-v /opt/PlatformResource:/opt/PlatformResource 其中
第一个 /opt/PlatformResource :外部存放图片的目录文件夹
第二个/opt/PlatformResource  :nginx容器中存放图片的目录文件夹
-v /opt/PlatformResource:/opt/PlatformResource结合在一起就会将容器外部的文件夹内容和容器内部文件夹内容保持同步

解释三:-p 8099:80 其中

8099:是容器80外部的映射端口,因此要注意nginx容器中配置的监听端口是80,而不是8099,我之前就犯了这样的错误,在容器中配置的监听是8099因此通过后端服务一直访问不到图片

注意:

server {
        listen       80; ###这里必须是80,而不是8099
        server_name  localhost;
         location /resource/ {
                    alias /opt/PlatformResource/;
                    autoindex on;        
        }
        
    }


其中: alias /opt/PlatformResource/    :表示这里配置的是真正图片存放的目录
      autoindex on :开启目录访问权限

将容器中的配置文件挂载到外部的好处

一:安装nginx容器后,cd ,ll 这些命令不能直接使用,因为容器和linux服务时隔离的,因此这些命令不能用,除非你在nginx中再安装centos等应用才行,挂载到外面就可以直接使用linux的命名来编辑容器的配置文件了。

二:安全性提高了,如果不小心删除了容器,比如数据库,删除了容器数据库也就删除了,如果挂载到外面的话相当于做了备份。

总之利用nginx镜像搭建nginx环境,一个是要配置好监听端口,二是要将容器外部的图片需要在容器内部也要同步

再看看第二种方式:通过传nginx压缩包,在linux上解压来安装nginx环境

 这种方式安装的nginx是linux服务的一部分不像容器那样和外部是隔离的。

server {
        listen       80;
        server_name  localhost;
         location /resource/ {
                    alias /opt/PlatformResource/;
                    autoindex on;        
        }
        
    }


其中: alias /opt/PlatformResource/    :表示这里配置的是真正图片存放的目录
      autoindex on :开启目录访问权限

优点:   alias /opt/PlatformResource/在这里就是linux中一个路径,不用考虑和nginx是不是共享还是隔离,省内存

如果不用镜像,相当于图片只存在一份,不会像容器那样还要拷贝一份。

缺点是:需要手动安装nginx环境 gcc,还要编译什么的,我就是嫌麻烦才用的镜像部署

最后通过访问前端服务,就可以访问到存储在后端服务中的图片了 

nginx显示图片上传 nginx图片回显_配置文件

 

如果前后端服务部署在一起,如何通过浏览器访问图片

更简单,只需要部署一套nginx服务环境,然后在nginx配置文件中指定图片的存放路径即可

 

server {
              location /resource {
                    alias /opt/PlatformResources/;
                    autoindex on;
        }
}