利用nginx實現(xiàn)內(nèi)網(wǎng)地圖瓦片代理

場景

• 客戶【服務(wù)器A(192.168.1.10)】在內(nèi)網(wǎng)環(huán)檢，【服務(wù)器B(192.168.1.11)】有外網(wǎng)
• 【服務(wù)器A】可以訪問【服務(wù)器B】
• 【客戶的電腦】在和【服務(wù)器A】都處于內(nèi)網(wǎng)

目標(biāo)

• 讓客戶電腦能夠訪問外網(wǎng)的瓦片數(shù)據(jù)

解決方案

• 【服務(wù)器b】利用nginx搭建一個瓦片服務(wù)器proxy pass到各種地圖
• 瓦片服務(wù)器nginx關(guān)鍵配置如下

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

• 【服務(wù)器a】設(shè)置好一個URL的前綴代理到【服務(wù)器b】搭建好的瓦片服務(wù)器
• 【服務(wù)器a】nginx關(guān)鍵配置如下

server {listen 7601;location /gistiles/ {#設(shè)置一個習(xí)慣的Url前綴/gistiles 來轉(zhuǎn)發(fā)到【服務(wù)器B】proxy_pass http://192.168.0.11:7602/;}}

• Vue Cli 調(diào)試模式建議增加如下轉(zhuǎn)發(fā)

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

JS代碼后面怎么寫適應(yīng)這種模式

例如

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

• 【現(xiàn)在】/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

• 【現(xiàn)在】/gistiles/map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/11/886/1674

談?wù)効狱c

花了一個下午時間各種調(diào)試，一開發(fā)現(xiàn)轉(zhuǎn)發(fā)的時候?qū)懰烙蛎挥米兞烤涂梢粤?#xff0c;但是不知道為什么，各種查資料，甚至一度放棄，知道我嘗試直接去敲IP發(fā)現(xiàn)居然可以在proxy pass中使用$1這種變量，我就猜一定和DNS解析域名偶關(guān)系，果不其然就差這句“resolver 8.8.8.8;”，只能說還是自己反應(yīng)太遲鈍。

總結(jié)

以上是生活随笔為你收集整理的利用nginx实现内网地图瓦片代理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。