前端開發模式與Nginx之間的一段孽緣

本文適用於前后端分離的項目，當然有興趣的同學也可以看一下，了解一下我口中的“孽緣”；

前言

在吃螃蟹前咱們先了解一下幾種傳統的前端開發模式（以java web為例）：

1. 繪制好的前端頁面以及一些資源文件交給后端，讓后端去維護（后端可能通過jsp去渲染）
2. 前端維護前端代碼，但是前端需要在本地運行后端程序（本地啟一個Tomcat之類的）

傳統開發模式所面臨的兩個問題就是：開發效率、數據。我們在繪制頁面的時候當然可以用假數據先繪制上去，也可以本地mock數據，但是有時候遇到一些復雜的業務場景的時候，這些並滿足不了我們的需求，就算滿足了也會很繁瑣很繁瑣。整個開發模式其實前后端有工作交叉的情況出現，后端寫接口的時候其實都已經測試過接口了，各種數據接口都存在了，前端再去mock有時候就是一種資源浪費。當然我相信小伙伴們會在這里提出一個疑問：那如果后端沒有寫接口前我就要去寫前端頁面怎么辦？沒事，繼續往下面看。

今天我想講的是在一個前后端分離的項目開發過程中，我們怎么去做好這個前端開發模式，來保證前端在開發過程上不會因為太依賴與后端而降低開發效率。有很多項目都是采用了RESTfull 架構：后端提供API，前端調用后端接口，然后ajax一個又一個的接口。

開始吃螃蟹啦

在了解傳統的創建開發模式后，這邊給大家介紹一下我所認識的前端開發模式。在某些業務場景里，我們需要用到線上的數據，而非我們本地mock。又或者有時候我們線上代碼是打包混淆過的，我們需要去跟蹤一個問題，往往直接去線上調試也是一件比較麻煩的事情，當然還有很多沒列舉出來的情況。所以針對以上幾種情景，我大致分為以下幾種方案：

1. 使用apache server的代理工具
2. 使用Findler或者 Charles 等代理工具進行本地文件代理
3. 使用RAP工具
4. 使用 Nginx 的反向代理

以上幾種均是我在開發中用到過的開發模式，下面我給大家稍微講解一下怎么去實現各個開發模式，然后也會像大家簡述一下優缺點。
本次案例信息如下：

• 域名：www.damingge.com
• 域名指向IP：151.101.100.133
• 本地項目地址：/www/damingge
• 請求API地址格式：/api/xxxx/xxxx

使用 apache server 代理配置

准備

• apache server 監聽80端口
• apache server 的DOCUMENT_ROOT地址配置為/www

原理

首先拿到線上登錄的session，保證用戶操作合法。然后將域名映射到本地，通過域名訪問本地項目。將所有請求API前面都加上一個新的前綴，然后將apache server 對新前綴的所有API請求進行攔截請求並且代理轉發。

實施方案

1. 解析新域名api.damingge.com 到 151.101.100.133，保證該域名能夠正常訪問到后端的服務（這個時候兩個域名訪問到的后端服務是一毛一樣的，沒有任何差別，只不過是多個域名指向了同一個地址）。
2. 找到apache 的安裝目錄，找到文件：extra/http-proxy.conf
3. 添加一條ProxyPass記錄：ProxyPass /mock_ajax/ http://api.damingge.com/。（重啟后生效）該步操作就是為了讓監聽80端口的apache攔截所有/mock_ajax/的請求，請注意是監聽本地服務的80端口。
4. 登錄線上地址拿到session后，將www.damingge.com的ip地址映射到127.0.0.1，這邊就能保證訪問該域名的時候是apache內的項目，而且可以讓apache的代理配置攔截。
5. 我們以index.html為例，我們新的訪問路徑為www.damingge.com/damingge/index.html。接下來就是在我們的項目內動手腳，我們在所有原有的API基礎上添加一個/mock_ajax/前綴，新API的格式為：/mock_ajax/api/xxxx/xxxx。（此處建議將要代理的文件拷貝一份出來，重命名為index_dev.html，對所有的請求做統一的處理，而不是在線上文件進行修改，新的訪問地址是www.damingge.com/damingge/index_dev.html）

優點

• 能夠做到直接訪問線上的數據
• 能夠拿本地的代碼調試線上，調試起來較為方便。

缺點

• 操作比較繁瑣。
• apache，如果不使用反向代理的話只能配置80端口。
• 需要配置一個域名來專門提供后端服務。
• 需要多拷貝一份文件專門來處理本地開發模式下的API前綴。
• 每次需要在登錄后重新修改host。

使用 Findler 或者 Charles 等代理工具

准備

• 下載好軟件即可

原理

代理軟件比較簡單粗暴，原理就是攔截所有請求，匹配到是你想攔截的文件就去代理到本地文件。

實施方案

登錄后打開代理工具，刷新一下頁面，然后把你想要調試的文件map local，這樣就可以直接進行線上調試了

優點

• 簡單、方便、粗暴。不需要改host，也不需要配置二級域名。
• 可以隨時代理任何想代理的文件。

缺點

• 可能會對所有的請求進行攔截
• 有時候請求會阻塞。

使用 RAP 工具

原理

RAP工具模擬數據接口，前端頁面引入指定js腳本，會攔截請求，達到數據模擬的效果。

優點

• 與普通的mock數據相比，該方法更靈活，而且后期不需要去維護請求地址，只需要去除引入的js腳本即可
• 提高前后端聯調的效率，也增加前端開發效率，不必要去為了數據擔心，rap工具會自動按照生成規則生成模擬數據。

缺點

• 需要搭建一套rap服務器
• 在原有的開發基礎上，還需要去維護rap接口，前期開發較繁瑣，但是后期調試方便。

使用 Nginx 反向代理

准備

• 安裝好nginx

原理

nginx監聽指定端口的服務，並對請求進行代理轉發。

實施方案

1. 配置一個域名local.damingge.com，映射地址為127.0.0.1
2. 在nginx的配置中添加配置，監聽指定域名，並轉發

nginx配置文件如下

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    #監聽代理指定文件或目錄
    server {
        listen          80;
        server_name     local.damingge.com;
        charset         utf-8;
        index           /index.xhtml;
        
        location /static {
            #proxy_pass $scheme://$host$request_uri;
            #proxy_set_header Host $http_host;
            root /www/damingge;
        }
        location / {
            proxy_pass http://151.101.100.133/;
            proxy_set_header Host www.damingge.com;
        } 
    }
    include servers/*;
}

我們將所有/static/xxxx/xxx下的請求都進行了攔截，也就是說我們請求到的資源文件都是本地工程項目里的。然后將其他請求代理到遠程服務器上去，並且設置請求host為www.damingge.com，這樣子處理的話可以防止跨域問題。

優點

• 我們可以配置指定的代理攔截規則，可以做到數據與代碼分離，代碼拿本地，數據拿線上。
• 可以解決線上線下切換的問題，只需要配置一次host即可，每次通過local.damingge.com訪問即是做過攔截的本地開發模式，直接用過www.damingge.com訪問即是不做任何攔截的線上環境。

缺點

• 暫無缺點

總結

• 在數據模擬上，我更建議大家用rap，而非本地mock一份json文件。
• 在線上調試以及前后端開發聯調上，我更傾向於Nginx，而已做到靈活配置。