摘要：小米球可以實(shí)現(xiàn)內(nèi)網(wǎng)穿透，他是怎么實(shí)現(xiàn)內(nèi)網(wǎng)穿透，主要是通過域名的反向代理，這也就是所謂的反向代理。其實(shí)，反向代理沒那么高大上，不要被它嚇到了。域名解析也是同樣的道理，利用了的反向代理。

自去年畢業(yè)來到杭州，想想也該有大半年了。本身是軟件工程的科班出身，在校時(shí)理論掌握的還可以。但應(yīng)用到實(shí)踐當(dāng)中去，有些還是不大理解，于是，不停地向帶我的人請(qǐng)教，畢竟，三人行，必有我?guī)熝?。?jīng)過一段時(shí)間理論加實(shí)踐，多少也掌握了其中的門路。

前后端不分離

在從業(yè)的過程中，也和其他程序員交流過，他們很多人都沒有前后端（服務(wù)器和客戶端）分離，而是前后端一起做掉。如果前后端不分離，此時(shí)的服務(wù)器端主要是指java代碼，客戶端主要是指jsp，通過spring MVC 將數(shù)據(jù)封裝到ResponseBody中，再返回給jSP。JSP拿到數(shù)據(jù)，渲染頁(yè)面。這里 不需要考慮端口號(hào)的問題。比如：

  /**
     * Created By zby on 16:03 2019/3/5
     */
    @RequestMapping(value = "/", method = RequestMethod.GET)
    @ResponseBody
    public Result fun() {

        return null;
    }

前后端分離

當(dāng)然，前后端分離時(shí)，后端還是以java代碼為主，前端就變化多端了。

. 后端

java通過springMVC的Rest模式的Controller層，接收前端頁(yè)面?zhèn)鱽淼慕涌诤蛥?shù)，經(jīng)過一系列的入?yún)⑿ｒ?yàn)，調(diào)用事務(wù)層（也就是service層）這里主要是hibernate（mybatis）的事務(wù)層，實(shí)現(xiàn)數(shù)據(jù)庫(kù)的事務(wù)操作。再調(diào)用*dao（data Access object）層實(shí)現(xiàn)事務(wù)的原子性操作，即將瞬時(shí)態(tài)的java對(duì)象轉(zhuǎn)化為持久狀態(tài)的數(shù)據(jù)庫(kù)對(duì)象。層層深入，層層返回，將通過Result回傳給前端。

. 前端

前端主要用h5進(jìn)行頁(yè)面布局，CSS3實(shí)現(xiàn)頁(yè)面的美化。JavaScript配合jQuery調(diào)用后端的接口，傳遞參數(shù)和獲取后端回傳的數(shù)據(jù)。通過vue.js實(shí)現(xiàn)回傳的數(shù)據(jù)的雙向綁定。還可能涉及到其他框架，比如頁(yè)面布局的bootstrap，數(shù)據(jù)table方式展示的jqgrid等等。

我們將寫好的java代碼部署在服務(wù)器上，比如Tomcat、Jboss主流服務(wù)器。這里以Tomcat來講解，我們將項(xiàng)目部署在Tomcat的上，具體如何部署Tomcat，可以參考這篇教程，Tomcat8權(quán)威指南。我們現(xiàn)在一般在maven中以插件的方式配置Tomcat，便于本地測(cè)試，路徑為根路徑，如以下代碼：

 
        install
        //maven生成的war生成的名字
        cloudCodeSaleManager 

        
            
                src/main/resources
                true
            
        
        
            
                org.apache.tomcat.maven
                tomcat7-maven-plugin
                2.2
                
                    58081
                    /
                    UTF-8
                    zfounder-custmom-member-portal
                    tomcat7
                
            
        
    

在真實(shí)的項(xiàng)目中，一般會(huì)有測(cè)試服和正式服，測(cè)試服是我們用戶的測(cè)試數(shù)據(jù)庫(kù)和測(cè)試服務(wù)器，正式服我們用到的是正式數(shù)據(jù)庫(kù)和正式服務(wù)器，有人說，這樣輸簡(jiǎn)直是廢話。但是，我們測(cè)試數(shù)據(jù)庫(kù)和正式數(shù)據(jù)庫(kù)是不一樣的，因而，如果都寫在同一個(gè)配置文件中，修改勢(shì)必麻煩。因而，我們可以在打包時(shí)，會(huì)有測(cè)試包和正式包，這里就涉及到maven的profile的配置文件（是在pom中配置，用來激活配置文件的）：

 
        
            dev
            
                true
            
            
                
                    ../../platform-dev.properties
                
            
        
        
            prd
            
                
                    ../../platform-prd.properties
                
            
        
    

我們Tomcat啟動(dòng)后，訪問后端接口（url）的格式如下：

scheme://host.domain:port/path/filename

scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
domain - 定義因特網(wǎng)域名，比如 runoob.com
:port - 定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱

當(dāng)然，如果沒有域名的話，我們想要訪問本地，也可以是這樣的：
http://ip:port/path/filename

這里的ip涉及到內(nèi)網(wǎng)和本機(jī)地址。
內(nèi)網(wǎng)也就是局域網(wǎng)，一般以192.168..打頭。本機(jī)地址是：127.0.0.1。

它們兩個(gè)有什么區(qū)別呢？
假設(shè)訪問我的server_path如下所示

constant = {
    dev: {
        **server_path: "http://127.0.0.1:58081/",**
        imgPre: "http://web.cs.wentonghuishou.com/",
        commonParams: {}
    },
}
_env = "dev";
window.constant = constant[_env];

我做后端Java的，開啟了Tomcat。我的同事是做前端的，他用上面的server_path訪問我，也就是說，想通過我本機(jī)ip請(qǐng)求我的接口，是沒辦法訪問我后端的接口。因?yàn)椋@是我本機(jī)的ip，只有我個(gè)人才能訪問。因而，我自己是可以訪問的。如圖所示：

如果他把server_path改成了server_path: "http://192.168.40.177:58081/",，那么，他想通過局域網(wǎng)訪問我的接口，這是可以訪問我的。因?yàn)?，我們同處在這個(gè)局域網(wǎng)下的。如圖所示：

假如，我和我的同事，不在同一局域網(wǎng)，但他，想訪問我后端的接口，這時(shí)該怎么辦？應(yīng)該是需要擺脫網(wǎng)域限制，能夠訪問我的內(nèi)網(wǎng)，也就是訪問的本機(jī)。這時(shí)，就出現(xiàn)了，內(nèi)網(wǎng)穿透的軟件，比如ngrok，小米球等。

小米球可以實(shí)現(xiàn)內(nèi)網(wǎng)穿透，他是怎么實(shí)現(xiàn)內(nèi)網(wǎng)穿透，主要是通過域名的反向代理，這也就是所謂的反向代理。其實(shí)，反向代理沒那么高大上，不要被它嚇到了。當(dāng)然，這里需要輸入端口號(hào)，這里前端的hbuilder的端口號(hào)，也就是8020端口號(hào)。為什么需要端口號(hào)，端口號(hào)能夠確定本機(jī)唯一的進(jìn)程。比如mysql的3306端口號(hào)，Tomcat的80端口號(hào)等。為什么是前端的端口號(hào)，因?yàn)槲覀兪紫仍L問的是頁(yè)面，頁(yè)面通過server_path來訪問后端接口，這里我們不需要考慮這方面的。

小米球的配置如下，這里是免費(fèi)版的：

當(dāng)我們，在瀏覽器的地址欄輸入http://zby.ngrok.xiaomiqiu.cn...，你會(huì)發(fā)現(xiàn)，它能訪問到我的前端頁(yè)面，并調(diào)用了我后端的接口，這就實(shí)現(xiàn)了ip的反向代理。域名解析也是同樣的道理，利用了ip的反向代理。如圖所示：