问题背景:

项目前端展示的文章内容,是后台KindEditor富文本编辑器编辑生成的.其中需要插入图片,客户担心在富文本编辑器中插入的图片,会在图片服务器迁移后,不能正常显示,且改动较多

解决过程

1.改造编辑器中的图片路径.

在实际工作中,一般我们会将图片上传到专门的图片服务器中,而把路径地址存储到数据库中.前端展示时,根据数据库中的路径地址去取到图片 而现在的图片地址是ip+端口的绝对路径地址,这样写死以后是肯定取不到图片的,也不利于后期改造. 所以必须

先把图片存储在数据库中的地址由绝对路径改为相对路径,并在路径中增加一个标识便于ngnix监听

这次我修改的监听标识为"/photoserver" 当图片在前端展示时还会拼成绝对路径,端口号为4001

2.修改ngnix的配置文件,使其监听并拦截到图片路径,反向代理到新图片服务器

这里特别要注意一点的是:如果你的ngnix是在docker容器里的,一定要先把服务器的端口和docker的端口映射,要不直接配置监听服务器端口,是不起作用的.我就是在这里浪费了很多时间.如果你的ngnix是直接安装在服务器上则不会出现这个问题 c44ea7a06fd9 harbor.legendshop.cn/legendshop-public/nginx:1.13.11 "nginx -g 'daemon of…" 4 days ago Up 3 days 0.0.0.0:4001->80/tcp, 0.0.0.0:4007->443/tcp xiamen-nginx 上边是sudo docker ps 中ngnix的情况,可以看到服务器的4001端口映射到了80端口 

这个为ngnix.conf中的配置情况,拦截到/photoserver再次代理转发到新的地址,示例是转发到我们docker中的另一个图片应用 server { listen 80; location / { proxy_set_header Host $host:4001; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://xiamen-web:8080; } location /photoserver { proxy_set_header Host $host:4001; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://xiamen-photo:8080; } } }