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

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

前后端不分離

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

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

        return null;
    }

前后端分離

當然，前后端分離時，后端還是以java代碼為主，前端就變化多端了。

. 后端

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

. 前端

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

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

 
        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ù)據(jù)庫和測試服務器，正式服我們用到的是正式數(shù)據(jù)庫和正式服務器，有人說，這樣輸簡直是廢話。但是，我們測試數(shù)據(jù)庫和正式數(shù)據(jù)庫是不一樣的，因而，如果都寫在同一個配置文件中，修改勢必麻煩。因而，我們可以在打包時，會有測試包和正式包，這里就涉及到maven的profile的配置文件（是在pom中配置，用來激活配置文件的）：

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

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

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

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

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

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

它們兩個有什么區(qū)別呢？
假設訪問我的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訪問我，也就是說，想通過我本機ip請求我的接口，是沒辦法訪問我后端的接口。因為，這是我本機的ip，只有我個人才能訪問。因而，我自己是可以訪問的。如圖所示：

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

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

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

小米球的配置如下，這里是免費版的：

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