內網穿透與反向代理，淺談先後臺分離

導讀

自去年畢業來到杭州，想一想也該有大半年了。自己是軟件工程的科班出身，在校時理論掌握的還能夠。但應用到實踐當中去，有些仍是不大理解，因而，不停地向帶個人人請教，畢竟，三人行，必有我師焉。通過一段時間理論加實踐，多少也掌握了其中的門路。

先後端分離（服務器端、客戶端分離）

• 先後端不分離

在從業的過程當中，也和其餘程序員交流過，他們不少人都沒有先後端（服務器和客戶端）分離，而是先後端一塊兒作掉。若是先後端不分離，此時的服務器端主要是指java代碼，客戶端主要是指jsp，經過spring MVC 將數據封裝到ResponseBody中，再返回給jSP。JSP拿到數據，渲染頁面。這裏 不須要考慮端口號的問題。好比：

/**
     * 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層，接收前端頁面傳來的接口和參數，通過一系列的入參校驗，調用事務層（也就是service層）這裏主要是hibernate（mybatis）的事務層，實現數據庫的事務操做。再調用*dao（data Access object）層實現事務的原子性操做，即將瞬時態的java對象轉化爲持久狀態的數據庫對象。層層深刻，層層返回，將經過Result回傳給前端。

. 前端

前端主要用h5進行頁面佈局，CSS3實現頁面的美化。JavaScript配合jQuery調用後端的接口，傳遞參數和獲取後端回傳的數據。經過vue.js實現回傳的數據的雙向綁定。還可能涉及到其餘框架，好比頁面佈局的bootstrap，數據table方式展現的jqgrid等等。

先後端分離，如何實現數據交互

咱們將寫好的java代碼部署在服務器上，好比Tomcat、Jboss主流服務器。這裏以Tomcat來說解，咱們將項目部署在Tomcat的上，具體如何部署Tomcat，能夠參考這篇教程，Tomcat8權威指南。咱們如今通常在maven中以插件的方式配置Tomcat，便於本地測試，路徑爲根路徑，如如下代碼：

<build>
        <defaultGoal>install</defaultGoal>
        //maven生成的war生成的名字
        <finalName>cloudCodeSaleManager</finalName> 

        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>58081</port>
                    <path>/</path>
                    <uriEncoding>UTF-8</uriEncoding>
                    <finalName>zfounder-custmom-member-portal</finalName>
                    <server>tomcat7</server>
                </configuration>
            </plugin>
        </plugins>
    </build>

在真實的項目中，通常會有測試服和正式服，測試服是咱們用戶的測試數據庫和測試服務器，正式服咱們用到的是正式數據庫和正式服務器，有人說，這樣輸簡直是廢話。可是，咱們測試數據庫和正式數據庫是不同的，於是，若是都寫在同一個配置文件中，修改勢必麻煩。於是，咱們能夠在打包時，會有測試包和正式包，這裏就涉及到maven的profile的配置文件（是在pom中配置，用來激活配置文件的）：

<profiles>
        <profile>
            <id>dev</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <build>
                <filters>
                    <filter>../../platform-dev.properties</filter>
                </filters>
            </build>
        </profile>
        <profile>
            <id>prd</id>
            <build>
                <filters>
                    <filter>../../platform-prd.properties</filter>
                </filters>
            </build>
        </profile>
    </profiles>

咱們Tomcat啓動後，訪問後端接口（url）的格式以下：

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

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

固然，若是沒有域名的話，咱們想要訪問本地，也能夠是這樣的：
http://ip:port/path/filename

這裏的ip涉及到內網和本機地址。
內網也就是局域網，通常以192.168..打頭。本機地址是：127.0.0.1。

它們兩個有什麼區別呢？
假設訪問個人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/",，那麼，他想經過局域網訪問個人接口，這是能夠訪問個人。由於，咱們同處在這個局域網下的。如圖所示：

外網如何訪問，也就是，內網穿透

假如，我和個人同事，不在同一局域網，但他，想訪問我後端的接口，這時該怎麼辦？應該是須要擺脫網域限制，可以訪問個人內網，也就是訪問的本機。這時，就出現了，內網穿透的軟件，好比ngrok，小米球等。

小米球能夠實現內網穿透，他是怎麼實現內網穿透，主要是經過域名的反向代理，這也就是所謂的反向代理。其實，反向代理沒那麼高大上，不要被它嚇到了。固然，這裏須要輸入端口號，這裏前端的hbuilder的端口號，也就是8020端口號。爲何須要端口號，端口號可以肯定本機惟一的進程。好比mysql的3306端口號，Tomcat的80端口號等。爲何是前端的端口號，由於咱們首先訪問的是頁面，頁面經過server_path來訪問後端接口，這裏咱們不須要考慮這方面的。

小米球的配置以下，這裏是免費版的：

當咱們，在瀏覽器的地址欄輸入http://zby.ngrok.xiaomiqiu.cn...，你會發現，它能訪問到個人前端頁面，並調用了我後端的接口，這就實現了ip的反向代理。域名解析也是一樣的道理，利用了ip的反向代理。如圖所示：