關於本地開發對接前端的解決思路

場景1:假設局域網啓動了一個禪道(管理項目的一個後臺系統),ip爲10.10.119.66:8081,我當然可以直接通過10.10.119.66:8081來訪問到禪道了。但是我還想讓別人都用個域名www.lidisam.cn:8081來訪問禪道。
解決步驟:
1 打開 C:\Windows\System32\drivers\etc\hosts,並編輯添加一行如下:
10.10.119.66 www.lidisam.cn
 
2 然後我們再網站輸入"www.lidisam.cn:8081"即可跳轉到禪道上了
原因分析:爲什麼修改了這個會生效?是DNS解析的原因,默認DNS會去13個節點的根域名訪問,拿到當前域名對應真實IP地址,但是如果本地hosts設置了就會優先使用hosts設置的(比如上面所設置的)。詳情參考: https://blog.csdn.net/qq_28666081/article/details/84945614
 
場景2:假設我現在想抓手機訪問瀏覽器的http請求
解決步驟:
1 首先下一個fiddler,並配置(教程如:https://jingyan.baidu.com/article/03b2f78c7b6bb05ea237aed2.html)
 
2 然後我用手機訪問網站的http請求就能被其抓到了
 
場景3:假設www.lidisam.cn是正式環境的一個域名,這是一個前後端分離的H5項目(SpringBoot + Vuejs),我在本地運行它的SpringBoot代碼,但是我沒有Vuejs代碼,我想用線上的vuejs代碼,然後請求的後端都會請求到我本地跑的程序上
解決步驟:
1 打開 C:\Windows\System32\drivers\etc\hosts,並編輯添加一行如下:
127.0.0.1 www.lidisam.cn
 
2 配置好”場景2“的fiddler,手機開啓代理
 
3 啓動本地SpringBoot項目(這裏是80端口啓動),給本地的SpringBoot項目打好斷點
 
4 手機訪問H5,隨便點幾下,我們就可以看到訪問的請求請求到本地程序了,到斷點那個位置停住了
 
場景4:假設在"場景3"做一點小改動,把SpringBoot項目啓動的端口改爲8080(80都是扯談,8080這種纔是正常的端口),改完之後,我還是想要請求的後端都會請求到我本地跑的程序上
解決步驟:
1 打開 C:\Windows\System32\drivers\etc\hosts,並編輯添加一行如下:
127.0.0.1 www.lidisam.cn
 
2 配置好”場景2“的fiddler,手機開啓代理
 
3 啓動本地SpringBoot項目(這裏是8080端口啓動),給本地的SpringBoot項目打好斷點
 
4 到"http://nginx.org/en/download.html"下載一個nginx用於反向代理,修改nginx.conf如下,並重啓
--------------nginx.conf-----------------
worker_processes  1;
 
events {
    worker_connections  1024;
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    include myconf/*.conf;
    server{
       listen 80;
       server_name  www.lidisam.cn;
       location ~ (^/jsp|.json$){
           proxy_pass http://localhost:8080; # 你本地程序tomcat地址
       }
    }
}
-------------------------------------------
 
5 手機訪問H5,隨便點幾下,我們就可以看到訪問的請求請求到本地程序了,到斷點那個位置停住了
 
場景5:假設因爲某種原因(也有可能是沒開發環境),當前開發分支不能合併到開發環境的分支中。這時候需要前端(Vuejs)與後端(SpringBoot)在本地局域網聯調,但這就會出現域不一樣導致的跨域問題
前置說明:
前端使用npm run dev 啓動本地的vue項目,端口是8080,假設他電腦的ip是10.10.119.60。我這邊後端的ip地址是10.10.119.61,如果前端的本地直接訪問我這個ip,那肯定會出現跨域問題(畢竟域名不一樣)。所以下面可通過代理設置在同一個域名。
 
解決步驟:
1 前端那邊(ip=10.10.119.60)打開 C:\Windows\System32\drivers\etc\hosts,並編輯添加一行如下:
127.0.0.1 www.lidisam.cn
 
2 我這邊(ip=10.10.119.61)啓動本地SpringBoot項目(這裏是8080端口啓動),給本地的SpringBoot項目打好斷點
 
3 前端那邊(ip=10.10.119.60)啓動Vuejs項目(這裏也是8080端口啓動),然後我們可以配置nginx如下:
-------------------------------------------
server{
    listen 80;
    server_name www.lidisam.cn;
    default_type 'text/html';
    charset utf-8;
    # 後端
    location /xxx {
        proxy_pass http://10.10.119.61:8080/;
    }
    # 前端
    location / {
        proxy_pass http://127.0.0.1:8080;
    }
}
-------------------------------------------
上面的意思是:請求www.lidisam.cn/xxx/*路徑下的所有資源,流量都會訪問到我的後端(ip=10.10.119.60),並且假設訪問www.lidisam.cn/xxx/detail/1,就會訪問到10.10.119.60:8080/detail/1;請求到“/”路徑,即第一個路徑非/xxx時,就會訪問到前端資源(ip=10.10.119.60:8080及其下所有非/xxx開頭的路徑)。爲什麼是這樣設置?可參照文章:https://blog.csdn.net/ainuser/article/details/80260144
 
4 前端(ip=10.10.119.61)那臺機隨便點下本地跑起來的前端,就可以看到後端運行到斷點的位置了,這樣就解決了跨域問題了。
 
場景6:如何用內網穿透的方式解決微信本地開發無法開發的問題
由於微信開發有不少接口,微信需要回調請求,但是因爲在本地開發,微信是訪問不了局域網ip的,所以只能通過內網穿透的方式讓微信那邊訪問的到。
 
以下是一個內網穿透工具:https://blog.csdn.net/m0_38001611/article/details/91129650
 
 
 
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章