1. 程式人生 > >將WordPress部署到七牛雲端儲存實現CDN加速

將WordPress部署到七牛雲端儲存實現CDN加速

首先我們需要了解什麼是 CDN 加速,CDN 加速簡單的來說,就是把原伺服器上資料複製到其他伺服器上,使用者訪問時,那臺伺服器近訪問到的就是那臺伺服器上的資料。CDN 加速優點是成本低,速度快。適合訪問量比較大的網站。而且,如果你的部落格所在的主機是限制流量的,一個很好的辦法就是把圖片還有其他靜態檔案部署到其他伺服器,這樣就會減少主機流量消耗了。

20141112194809

那麼我們為什麼要用七牛呢?七牛的優勢總結如下:

1、安全效能:為使用者資料建立至少三個副本並跨IDC儲存到多個數據中心,同時支援防盜鏈設定。

2、資料儲存:支援圖片、音訊、視訊、JS、CSS等多種靜態檔案的儲存,並支援斷點續傳。

3、雲端加速:七牛的500多個加速節點遍佈全球,會自動選擇離使用者最近的節點,並實現資料上傳下載的雙向加速。

4、資料處理:支援雲端線上壓縮、裁剪等圖片處理及音訊、視訊格式轉換,還可線上進行視訊截圖。

5、開發合作:為開發者提供了多種接入工具及豐富的開發包,提供API、SDK教程示例。

6、域名繫結:已備案的網站可申請繫結自己的域名,未備案的使用者可使用七牛的二級域名繫結。

7、映象功能:通過一定的設定,可自動將網站原有圖片等靜態檔案映象到七牛,而無需重新上傳到七牛伺服器。

8、外鏈分享:由於七牛雲支援外鏈,可以將檔案上傳至七牛,直接利用檔案連結地址作外鏈呼叫。

點選此連結申請一個七牛雲端儲存賬號,建立一個公開空間,比如我建立一個空間叫 cuiqingcai,和我的域名相對應。

QQ截圖20141112184648

建立完成之後它就會為我的這個空間分配一個二級域名。我的就叫 cuiqingcai.qiniudn.com

然後我們需要部署我們的網站,點選右邊的空間設定,選擇映象儲存裡面的一鍵加速網站,這時就需要你輸入映象源,這裡就填寫你的部落格地址,然後勾選下方的使用預設的 robots.txt 配置檔案。

Q:為什麼要配置 robot.txt 檔案?

A:因為你配置了這個網址確定加速之後,七牛會為我們生成一個映象空間,這個映象空間的地址就是二級域名地址,我的便是 cuiqingcai.qiniudn.com,你訪問之後發現它的內容和我的 cuiqingcai.com 部落格網址是完全一致的,這也是為什麼把它稱為映象空間的原因。因為內容是一致的,所以會導致搜尋引擎對源站 也就是你的域名進行封鎖,所以我們可以通過配置 robots.txt 檔案避免這種情況的發生。

好,我們繼續,點選確定之後我們就能配置好了映象空間。

QQ截圖20141112185908

下面還有一個域名設定,它預設會為你分配一個預設永久的空間,比如我的就是 cuiqingcai.qiniudn.com,這個是七牛的二級域名,七牛的一大特色就是支援域名繫結,在這裡你可以新增你的二級域名,不過貌似需要你賬戶餘額大於10塊,但是它是不收費的。另外的要求就是你的域名需要備案,如果沒有備案,那就不行了。

點選下面的申請域名繫結,然後點選新視窗右下角的自定義域名,會出現以下內容。

QQ截圖20141112190327

比如你就可以在此處輸入你自己定義的二級域名加備案號。比如我的輸入qiniu.cuiqingcai.com 便可以,然後輸入備案號,提交稽核需要一週之內。你可以先用著它給你分配的二級域名。

好了,配置好了映象空間和你的域名(或者用預設域名)便可以配置我們的WordPress了。

登陸wordpress儀表盤後,在瀏覽器中輸入:http://你的域名/wp-admin/options.php,使用Ctrl+F命令找到 upload_url_path 選項,在其中輸入http://七牛二級域名/wp-content/uploads ,注意,後面一定不要加“/”,比如我的便輸入 http://cuiqingcai.qiniudn.com/wp-content/uploads。最終格式如下圖:

1114

設定之後,點選最下面的確定,這時你發現你的媒體庫中的所有的圖片的連結格式都已經更改了,已經不是原來的域名連結了。

而變成了七牛雲端儲存你設定的二級域名的連結。比如我的一張圖片連結就變成了

http://cuiqingcai.qiniudn.com/wp-content/uploads/2014/11/545ae06e25ea9.png

而你點選七牛雲端儲存下的內容管理,就會發現你的部落格下的所有圖片都已經同步到了裡面。截圖如下:

QQ截圖20141112191445

以後你再新上傳的照片也會自動同步到七牛上,此方法的好處在於你只需在wordpress中上傳圖片,就會自動同步到七牛空間,而無需登陸七牛上傳並手動輸入圖片地址了。並且除了圖片地址改變外,其他操作如常。引用圖片時會自動載入七牛空間中的圖片,實現 wordpress 免費CDN全網加速。不便之處是上傳的圖片仍會在 wordpress 空間中保留,佔用空間容量。也就是說,它仍然在你的本地儲存了一份,不過訪問時會訪問七牛的網址,也就可以實現CDN加速,而且為你的主機節省流量了。當然,由於圖片已同步至七牛映象空間中,你也可以選擇刪除 wordpress 中的圖片。

現在瀏覽你的網站,如果現在沒有問題,那麼你就可以不用瀏覽下面的額外內容,如果有部分圖片顯示有問題,那麼請繼續看。

如果你的網站設定了特色影象功能,比較悲劇的事情就發生了。你的網站可能無法讀取特色影象,整個頁面也顯得很難看。這是因為WordPress使用了timthumb縮圖剪裁外掛,通過這個外掛,使用者在後臺上傳的各種圖片都會按照預先在前端頁面中設定的大小進行剪裁,大大降低了前端開發的難度。

由於timthumb預設設定中,出於安全考慮是不允許快取外部地址圖片的。因此我們開啟timthumb快取路徑時會提示 “您可能無法從該網站獲取的影象“。所以解決的辦法來了。

找到這個主題所在的目錄,找到timthumb.php檔案,將下面一條語句

 define ('ALLOW_ALL_EXTERNAL_SITES', false)

替換為

 define ('ALLOW_ALL_EXTERNAL_SITES', true)

這樣就可以實現通過外鏈抓取圖片了,特色影象便顯示出來了。

現在再瀏覽你的網站,看看還有沒有什麼問題,如果沒有問題,現在就美美地享受移植到七牛上帶來的便捷和歡樂吧!

如果還有問題,請繼續閱讀下方內容。

現在一般的網站模板載入都沒有問題了,如果你用的 WordPress 模板比較高階,利用了Ajax非同步載入功能,我們便會發現非同步載入已經是不會生效的,也可能你的整個網站樣式變得混亂。這是為什麼?是因為你修改了路徑為七牛的路徑,載入JS或者CSS檔案時便會去七牛那裡尋找,但是現在七牛上只同步了圖片,JS和CSS檔案是不存在的,這時因為找不到這些檔案,你的網站便會出現問題了。

現提供兩個解決方法:

1.使用水煮魚的“七牛映象儲存 WordPress 外掛”將你的其他檔案(如JS,CSS)同步到七牛

外掛下載地址:https://wordpress.org/plugins/wpjam-qiniu/

配置好這個外掛之後,你可以點選外掛使用幫助來配置這個外掛,配置完了之後便可以將你的js和css檔案上傳到七牛中。你的Ajax非同步載入就不會出現問題了。

2.使用WP Super Cache外掛進行同步

外掛下載地址:http://wordpress.org/plugins/wp-super-cache/

貼心提示:外掛安裝之後可能出現如下錯誤

QQ截圖20141112193509

固定連結出錯,這時你更改下左邊面板-設定-固定連結,更改為其他選項,不要選擇原來的固定連結就好了,比如我選擇文章名這個選項,外掛就可以順利進入啦。

在這裡點選CDN選項卡,點選開啟CDN支援。

112194058

其中Off-site-URL更改為你的七牛映象域名,比如我的便是 cuiqingcai.qiniudn.com,這樣點選確定之後便同樣可以把你的JS等檔案同步到七牛。你的樣式或者Ajax非同步載入就可以順利實現啦。

通過以上步驟,我們就可以將我們的部落格部署到七牛雲端儲存上,提高網站載入速度,同時也節省我們的主機流量。一舉兩得,美哉美哉!

到此為止,我們的網站應該都沒有問題了,盡情享受CDN加速之後帶來的效果吧!如果還有問題,請評論或者給我留言。