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

時間 2019-11-16

標籤前端開發模式 nginx 之間一段孽緣欄目 Nginx 简体版

原文原文鏈接

本文適用於先後端分離的項目，固然有興趣的同窗也能夠看一下，瞭解一下我口中的「孽緣」；html

前言

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

繪製好的前端頁面以及一些資源文件交給後端，讓後端去維護（後端可能經過jsp去渲染）
前端維護前端代碼，可是前端須要在本地運行後端程序（本地啓一個Tomcat之類的）

傳統開發模式所面臨的兩個問題就是：開發效率、數據。咱們在繪製頁面的時候固然能夠用假數據先繪製上去，也能夠本地mock數據，可是有時候遇到一些複雜的業務場景的時候，這些並知足不了咱們的需求，就算知足了也會很繁瑣很繁瑣。整個開發模式其實先後端有工做交叉的狀況出現，後端寫接口的時候其實都已經測試過接口了，各類數據接口都存在了，前端再去mock有時候就是一種資源浪費。固然我相信小夥伴們會在這裏提出一個疑問：那若是後端沒有寫接口前我就要去寫前端頁面怎麼辦？沒事，繼續往下面看。java

今天我想講的是在一個先後端分離的項目開發過程當中，咱們怎麼去作好這個前端開發模式，來保證前端在開發過程上不會由於太依賴與後端而下降開發效率。有不少項目都是採用了RESTfull 架構：後端提供API，前端調用後端接口，而後ajax一個又一個的接口。nginx

開始吃螃蟹啦

在瞭解傳統的建立開發模式後，這邊給你們介紹一下我所認識的前端開發模式。在某些業務場景裏，咱們須要用到線上的數據，而非咱們本地mock。又或者有時候咱們線上代碼是打包混淆過的，咱們須要去跟蹤一個問題，每每直接去線上調試也是一件比較麻煩的事情，固然還有不少沒列舉出來的狀況。因此針對以上幾種情景，我大體分爲如下幾種方案：web

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

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

域名：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請求進行攔截請求而且代理轉發。apache

實施方案

解析新域名api.damingge.com 到 151.101.100.133，保證該域名可以正常訪問到後端的服務（這個時候兩個域名訪問到的後端服務是一毛同樣的，沒有任何差異，只不過是多個域名指向了同一個地址）。
找到apache 的安裝目錄，找到文件：extra/http-proxy.conf
添加一條ProxyPass記錄：ProxyPass /mock_ajax/ http://api.damingge.com/。（重啓後生效）該步操做就是爲了讓監聽80端口的apache攔截全部/mock_ajax/的請求，請注意是監聽本地服務的80端口。
登陸線上地址拿到session後，將www.damingge.com的ip地址映射到127.0.0.1，這邊就能保證訪問該域名的時候是apache內的項目，並且可讓apache的代理配置攔截。
咱們以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 等代理工具

準備

下載好軟件便可

原理

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

實施方案

登陸後打開代理工具，刷新一下頁面，而後把你想要調試的文件map local，這樣就能夠直接進行線上調試了後端

優勢

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

缺點

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

使用 RAP 工具

原理

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

優勢

與普通的mock數據相比，該方法更靈活，並且後期不須要去維護請求地址，只須要去除引入的js腳本便可
提升先後端聯調的效率，也增長前端開發效率，沒必要要去爲了數據擔憂，rap工具會自動按照生成規則生成模擬數據。

缺點

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

使用 Nginx 反向代理

準備

安裝好nginx

原理

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

實施方案

配置一個域名local.damingge.com，映射地址爲127.0.0.1
在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，這樣子處理的話能夠防止跨域問題。