本地模擬服務器CDN(靜態HTML，CSS，JS)開發

本地模擬服務器CDN(靜態HTML，CSS，JS)開發

      所謂本地開發環境就是和線上cdn（a.longencdn.cn）同樣的目錄結構和功能，提供了一個本地鏡像，開發者直接在本地鏡像的對應目錄中做開發便可，包括一些html靜態文件,css文件及JS文件等。好比說服務器cdn項目目錄結構是 a.longencdn.cn/apps/js,  那麼咱們在本地也和服務器目錄同樣，訪問 a.longencdn.cn 的時候 apache 首先在開發機上尋找文件，找不到去正式環境去 download 文件，一併返回給客戶端。a.longencdn.cn/apps/js.這樣作的好處有如下幾點：

  優勢：

   1. 調式比較方便。 好比線上要更改需求，好比要更改JS，css，那麼咱們把demo下載到本地，對本地的相應的JS，css更改，若是ok的話，把相應的JS，css文件提交到svn上便可。(由於本地的目錄和線上同樣的，因此他們會先查找本地的文件，若是沒有找到再往服務器找相同的文件名js或者css。)。

   2.  也能夠模擬combo合併js，css文件。減小請求，提升性能。

好比雅虎的首頁JS文件以下：

  

使用&符合合併或者壓縮多個JS，css文件。

好比淘寶首頁JS文件以下：

 

多個JS文件使用逗號(，)隔開，合併，減小請求數。這些都是使用combo進行文件合併，這些，咱們徹底可使用php服務器在本地開發模擬，好比：

拔赤github上封裝了合併及壓縮JS，css文件的PHP，拔赤自動合併或者壓縮JS/CSS 。下面咱們來看看使用本地PHP來模擬線上CDN。

環境搭建

1.  安裝PHP，我這邊直接安裝wamp5.

2.  進入apache根目錄,打開配置文件 httpd.conf 如：

 

把如下文件都打開：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule expires_module modules/mod_expires.so
LoadModule include_module modules/mod_include.so

接着 再添加一句：讓html執行PHP

AddType application/x-httpd-php .html .htm .php .phtml .shtml

將shtml支持打開（開啓shtml主要是爲了多人協做時更加方便）

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

3. 添加虛機的配置，打開extra/httpd-vhosts.conf，將下面代碼拷貝進去，並根據註釋提示的內容，自行修改，主要是將 DocumentRoot 和 RewriteCond 中的路徑（D:/dev/a.longencdn.cn/）如：

  

添加以下面代碼：

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "D:/wamp5/wamp/www"  
    ServerName localhost
    
    #這裏修改成你本機的開發目錄
    <Directory D:/wamp5/wamp/www>
        Options +Includes  
        Order deny,allow
        Allow from All
    </Directory>

</VirtualHost>


<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "D:/dev/a.longencdn.cn/"  
    ServerName a.longencdn.cn
    
    RewriteEngine On
    RewriteCond %{QUERY_STRING} ^\?.*\.(js|css|js,|css,)$ [OR]
    RewriteCond %{QUERY_STRING} ^\?.*\.(js?.+|css?.+)$ [OR]
    RewriteCond %{REQUEST_FILENAME} -min\.(js|css) [NC] 
    RewriteRule ^/(.*)$ /cb.php?%{REQUEST_URI} [QSA,L,NS,NC]
    
    #這裏D:/dev/a.longencdn.cn/修改成你本機開發目錄
    RewriteCond D:/dev/a.longencdn.cn/%{REQUEST_FILENAME} !-F  

    #這裏修改成你本機的開發目錄
    <Directory D:/dev/a.longencdn.cn>
        Options +Includes  
        Order allow,deny
        Allow from All
    </Directory>
</VirtualHost>

其中：

DocumentRoot "D:/wamp5/wamp/www" 是指：以下圖：

 

DocumentRoot "D:/dev/a.longencdn.cn/"  是在本地也創建了一個文件目錄，D:/dev/a.longencdn.cn， 再下面就是放項目的文件，好比文件名叫apps，再把拔赤寫的cb.php複製放到a.longencdn.cn根目錄下，如：

其中cb.php文件相對應的地方也要改下：如


4. 接着打開hosts文件 綁定加一句 127.0.0.1  a.longencdn.cn 就ok了。

最後咱們能夠來演示下： 假如我項目文件apps下有js文件 其中裏面有2個js文件，分別爲a.js和b.js 代碼分別以下：

a.js

function A(){
   console.log("我是A函數");
}

  b.js

function B(){
    console.log("我是B函數");
}

那麼咱們能夠直接在本地服務器下訪問a.js：如：

b.js訪問以下：

固然咱們能夠連着寫a.js，b.js 模擬淘寶的cdn代碼，以下：

ok，經過以上能夠看到，已經能夠訪問且對多個js合併了。

下面分別對拔赤的php文件 合併及壓縮的文件提供下載  及 我本地的apache2 conf文件配置供下載：
1.  拔赤的php合併及壓縮下載。
2.  apache2 conf文件配置下載。