CDN(Content Delivery Network,內容分發網絡)。其含義,在百度百科上是這么寫的:CDN 是構建在數據網絡上的一種分布式的內容分發網。CDN 的作用是采用流媒體服務器集群技術,克服單機系統輸出帶寬及並發能力不足的缺點,可極大提升系統支持的並發流數目,減少或避免單點失效帶來的不良影響。。。后面一大堆。
至於它到底寫的是什么。我也解釋不清楚。其作用簡單粗暴地理解就是:加速。舉例說明:
使用Chrome上一個網站(在這之前調出開發者工具(F12)):http://www.codeproject.com/
並且在開發者工具中選中“Network”。
然后按下回車進入網站。等待網站加載完畢。然后看到這個Network里面的內容。
有一條極其可恥的紅色請求。請求的文件名為:jquery.min.js,類型為Get,狀態為(faild),還花費了10.93S。最下面的信息顯示總共花費了12.84秒,而這個jquery的請求就花費了10.93s,還失敗了。
現在再單擊這條紅色的請求,來查看詳情。
如下圖:
看到這個Request URL,發現這條請求是發送到googleapis.com主機的。問題就在這里。谷歌在中國,基本上是被防火牆轟殺至渣的。這條請求根本不能完成正常的響應,導致了花了10.93s還沒有響應,最后還請求失敗了。
發生這類情況,一般都是在我們訪問國外的網站的時候發生的,國內開發者都知道國情,所以要么已經把腳本放在自己的網站下了,或者直接把請求發送到某個CDN服務器上來加載。但是向Codeproject、Stackoverflow等國外網站都直接用googleapis,
所以有這問題。
那么這個問題該如何解決。這時候,CDN技術就可以派上用場了。我這個所謂的CDN,只是一個測驗而已,擺不上台面的。自己玩玩就可以了。
那么如何來操作。
下面分兩大塊來測試。1、不寫一行代碼;2、用少量的代碼控制(.net mvc4)
首先來說第一種:不寫一行代碼如何來做。
(1)需要的設備:一台服務器(windows),一台客戶機(windows)。注意:如果沒有服務器,那么只有一台客戶機也是可以的,就是一台計算機又當服務器,又當客戶機。
(2)服務器(或者客戶機)需要去控制面板打開IIS管理,這個不說了。
(3)下載一個jQuery文件。這里有個微軟CDN服務器可以下載,打開鏈接之后,Ctrl+S就行了——http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js
(4)原理簡介:我們在瀏覽器輸入一個域名(網址),按下回車之后,計算機(windows)做的事情,就是先在本地的一個名叫hosts的文件中查找映射關系。
這個hosts文件的作用就是解析域名,把請求的域名轉換成IP。來看一下hosts文件中內容(可以直接用記事本打開,此處使用Notepad++,強烈推薦啊)。如下圖:
看到這個文件有很多的注釋,這些信息非常有用,建議仔細研讀,這里稍作解釋。這些注釋說的大意就一句話:
本文件用於域名解析,用法:一行只能寫一個映射關系,語法是:IP 空格 域名。
也就是說,我們只要像他那樣寫,在最后追加一行,並保存,比如
127.0.0.1 www.baidu.com
然后去瀏訪問百度,發現並沒有訪問到百度。因為域名解析被指向了本地127.0.0.1。
由此可以想到,如果能把這個ajax.googleapis.com域名解析成我們可以訪問到的IP不就可以了嘛。於是先確定服務器(或者客戶機)的IP地址。我這里的IP地址是局域網IP地址:192.168.1.108。
如果是客戶機,比如是自己的計算機,那么可以寫127.0.0.1。於是追加到hosts中去:
192.168.1.108 ajax.googleapis.com
接下來,看到光是域名解析做完了是不夠的,因為那一段請求非常的長,后面有很多級目錄:http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
那么這時候IIS的功能就要用起來了。首先到服務器中創建好本地目錄,注意這個目錄的結構要做成:/ajax/libs/jquery/1.6.2/jquery.min.js。如下圖:
然后在IIS中添加網站,怎么添加這里不說,添加之后如圖:
然后注意,在訪問codeproject之前最好做一件事情,就是清空瀏覽器緩存,否則可能會從緩存中讀取,看不到效果。接着來訪問網站。
看到這結果,完美加載狀態碼為200,成功了。然后單擊這條查看詳情:
我們看到這里多了一個Remote Address,就是我們想要解析到的IP地址,后面的80是默認端口。簡直完美運行啊。
這里不得不說明一下,hosts文件應該是不支持端口映射的,我試了很多,像什么冒號+端口,逗號+端口,都不行,去查好像也是說不行,
也就是說我們解析的時候只能使用80端口。而80端口是默認的,所以在hosts文件中不用指明。
那么再來考慮一種情況,不同的網站jquery文件請求版本可能不同。codeproject是1.6.2,stackoverflow的是1.7.1,jquery.com的請求是1.11.2。而我們剛才只有一個1.6.2。
既然這樣,那我們會想,我在剛才的文件夾/ajax/libs/jquery/下,多加幾個版本文件夾不就行了嗎。比如再加一個1.7.1,再加一個1.11.2,然后在這兩個文件夾下再各放一個
jquery.min.js。不錯,這的確是可以的。這個jquery.min.js文件的實際版本,你可以不跟文件夾對應,你可以全部都是1.6.2,只要外面的文件夾版本寫對就行了,但是這樣不是很好,
因為有些網站用的1.11.2版本里的特性,而你給他解析加載的實際上是1.6.2,這樣就會報錯了。所以最好還是對應起來。
接下來說第二種方法,用少量的.net mvc手段來控制。
可以讓jquery的實際版本和文件夾寫出來的版本號完美對應。
首先用visial studio 2012 update5來創建一個mvc4項目。
如下:
創建完了之后沒用的東西全部刪除,其中這個script文件夾中放了很多的jquery版本,如圖:
好了。然后我們來創建一個控制器,取名為HomeController,寫一個Action,取名為Index,如下代碼:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace CDN.Controllers { public class HomeController : Controller { public void Index(object id) { var js = String.Format(@"/Script/jquery-{0}.min.js", id); var temp = Server.MapPath("~" + js); Response.WriteFile(temp); } } }
然后根據http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js這個請求的特性,來配置一下路由參數。如下代碼:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace CDN { public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "ajax/libs/jquery/{id}/jquery.min.js", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } } }
懂MVC4的人一眼就知道了,如果不懂的,建議先看看mvc4的路由規則,這里不再贅述。這個url,就是根據那條請求特性寫的,把版本號用{id}來代替,把請求指向/Home/Index?id=版本號。
於是HomeController中的Index順利的接收到了請求,再根據id中傳過來的版本號找到服務器中相關文件,然后response出去,就可以了。最后發布出來,部署到IIS中。詳細過程不贅述。如圖:
然后去訪問一下,結果跟上面一模一樣,這里不截圖了。
個人感覺第二種方法好一點,用程序控制版本。不過第一種方法簡單粗暴,也是可以的。
模擬CDN就完成了。這里用googleapis來舉例,因為用到的還是挺多,所以就用這個了。這種方法自己隨便玩玩就行了。畢竟要改hosts,不宜做什么用處。