利用nginx实现内网地图瓦片代理

利用nginx实现内网地图瓦片代理

场景

• 客户【服务器A(192.168.1.10)】在内网环检，【服务器B(192.168.1.11)】有外网
• 【服务器A】可以访问【服务器B】
• 【客户的电脑】在和【服务器A】都处于内网

目标

• 让客户电脑能够访问外网的瓦片数据

解决方案

• 【服务器b】利用nginx搭建一个瓦片服务器proxy pass到各种地图
• 瓦片服务器nginx关键配置如下

  resolver 8.8.8.8;  #此行非常关键,用作域名代理dns解析
  server {
    listen 7602;
    location ~^/(?<tilehost>[^/]+)/.+ {
      rewrite ^/[^/]+/(.+)$ /$1 break;
      proxy_pass http://$tilehost;
    }
  }

• 【服务器a】设置好一个URL的前缀代理到【服务器b】搭建好的瓦片服务器
• 【服务器a】nginx关键配置如下

  server {
    listen 7601;
    location /gistiles/ {
       #设置一个习惯的Url前缀/gistiles 来转发到【服务器B】
		   proxy_pass http://192.168.0.11:7602/;
    }
  }

• Vue Cli 调试模式建议增加如下转发

 devServer: {
    host: "127.0.0.1",
    port: 8080,
    index: "login.html",
    proxy: {
      ...
      '/gistiles/': {
        target: "http://192.168.0.59:7601"
      }
    }
  },

JS代码后面怎么写适应这种模式

例如

• 【原在】http://webst04.is.autonavi.com/appmaptile?style=8&x=415&y=220&z=9

• 【现在】/gistiles/webst04.is.autonavi.com/appmaptile?style=8&x=415&y=220&z=9

• 【原在】https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/11/886/1674

• 【现在】/gistiles/map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/11/886/1674

谈谈坑点

花了一个下午时间各种调试，一开发现转发的时候写死域名不用变量就可以了，但是不知道为什么，各种查资料，甚至一度放弃，知道我尝试直接去敲IP发现居然可以在proxy pass中使用$1这种变量，我就猜一定和DNS解析域名偶关系，果不其然就差这句“resolver 8.8.8.8;”，只能说还是自己反应太迟钝。