WordPressでKeyCDNを使ってみた

あけましておめでとうございます。

今年も何卒、よろしくお願いいたします。

正月なので実家に帰っている坂本です。

 

私のブログは割と画像を使うことが多いので、当初よりCDN導入を考えていたのですが

いかんせんお金のかかる事なので、どこのサービスを使おうか迷っておりました。

 

色々調べるとKeyCDNが安くて良いみたいなので導入してみました。

 

CDNとは

そもそもCDNってなあにって方が多いかもしれませんので一応

コンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で、ウェブコンテンツを配信するのに最適化されたネットワークのことを意味します。 そのサーバーが、代わりに配信することで、負荷が分散され、Webサイトの表示速度の向上にもなる仕組みになります。

だそうです。

 

通常のサーバーへのリクエスト

通常CDNを設定していないサイトには自分の繋げているネットから、サイトが立っているサーバーに情報をリクエストして送ってもらう

 

 

CDNを利用した際

CDNは自分の繋げているネットから、見たいサイトが設定している近いCDNから送ってくれ、なおかつ画像とか用に作ってあるので、ユーザーからすると通信量が節約できたり、早くみれたりする

 

というもの

 

お金かかるけど、表示速度の向上などが期待できるため、SEO対策になりますよ。

 

 

WordPressのアップロードディレクトリを変更

早速設定していきたいところですが、Wordpressデフォルトのアップロードディレクトリがあまり好きではなかったので、変更しようかなと。

 

デフォルトだと

DocumentRoot/wp-content/uploads/YYYY/MM/file.ext

となる

 

今回はそれを

DocumentRoot/media/YYYY/MM/file.ext

にしようかなと。
http://blog.url/wp-admin/options.php

にアクセス

 

すると下のようなオプションの一覧画面になります。

Wordpressのオプション一覧画面

割とupload系のオプションが下の方にあるので

Command + f ( Windowsの場合 Ctrl + f )で検索してください。

すると下のような画面になります。

Wordpressのオプション一覧画面でuploadを検索

upload_path : アップロードファイルを保存する場所(DocumentRootからみて)

upload_url_path : アップロードしたファイルにアクセスする際のurlを書き込みます。

※ upload_url_pathについては後述していきます

 

この場合は、

DocumentRoot/media/YYYY/MM/file.ext

にアップロードして

ブラウザなどからアクセスするときには

upload_url_path/YYYY/MM/file.ext

でアクセスすることになります。

 

自分のしたいように設定したら一番したの保存を押します。

 

私の場合はKUSANAGIを使用しているのでnginxのconfファイルを変更しました。

location ~* /(?:uploads|files)/.*\.php$ {
    deny all;
}

となっているところを下記に変更

location ~* /(?:uploads|files|media)/.*\.php$ {
    deny all;
}

 

同じようにSSL対応しているので

location ~* /(?:media|files)/.*\.php$ {
    deny all;
}

となっているところを下記に変更

location ~* /(?:uploads|files|media)/.*\.php$ {
    deny all;
}

 

変更点を説明すると、

http://hoge.com/media/attack.php

https://hoge.com/media/attack.php

などのmediaディレクトリ下のphpファイルにアクセスできなくするよ

ということ

 

無事変更できたら、

service nginx reload

これで設定が反映されます。

 

※ 少し前のWordpressの場合upload_pathがwp-contentからのパスになっていたようで、既出のサイトなどを参考にしたところ、パーミッションエラーになりました。そらそうです、/DocumentRoot/../mediaなんてされたらたまったものじゃないですからね(‘A

 

 

KeyCDNを使ってみる

いよいよKeyCDNを適用していきます。

KeyCDNへアクセスしてください。

登録していない方はSignUpより登録してください。

ログインすると下記のような画面になります。

KeyCDNの管理画面トップ

最初に1ドルだけもらえるようです。

※ この1ドルがなくなる前に課金しないとサービスが停止するのでご注意を

 

左メニューのZonesを選択

Add Zoneを選択してZone追加画面へいきましょう。

KeyCDNのZone追加画面

Zone Name : ZoneName.hogehoge.kxcdn.comなどになります

Zone Status :  すぐ使うか、とりあえず作るかという感じ

Zone Type : pull(オリジナルファイルは自サーバー) push(オリジナルファイルはKeyCDNサーバー)

※ 特に構想がないのであれば、pullを選択しておくのが賢明です。

 

私はSSL対応しておりますので

Show Advanced Featuresにチェックをいれて詳細な設定をしていきます。

KeyCDNのZone追加画面のsslの項目

SSL : https使うの?

Force SSL : httpでアクセスされたら301でhttpsにリダイレクトする?

上記ふたつをenabledに変更しました。

 

KeyCDNのZone追加画面のUrl項目

最後に設定したいブログ等のURLを指定するだけです。

 

私の場合は

https://heyg.jp

といれるだけ。

 

全て終わったら一番下のsave押して保存します。

 

Zoneの一覧に追加されていればOKです

追加したばかりだと、Status部分がactiveになっていませんが、待っていれば大丈夫です。

 

Zone URLがCDN用のURLになりますので忘れずコピーでもしておきましょう!

 

WordPressのアップロードパスをCDN用に変更

毎回毎回、画像のURLを

ZoneName.hogehoge.kxcdn.com

に変えてるなんてしんどすぎますよね?

そこで先ほどあった/wp-admin/options.phpのupload_url_pathです。

先ほどと同じ手順で下のページまでいきます。

Wordpressのオプション一覧画面のアップロード項目

upload_url_pathを

http://Zone URL/piyopiyo

などに変更します。

※ Zone URLは先ほどのKeyCDNのZone追加後に表示されたものです

 

私の場合は

https://heygblog-65c6.kxcdn.com/media

に変更しました。

 

これで、アップロードを毎回帰る必要もなくなります。

必然的に全てのファイルがCDNで運用されることになりますが…

※ 割と思いつきで変更したので影響具合は確認できていません

 

既に保存している記事などに記述しているURLは自動では変わりません。

手動で変更するか

WordPressのpluginであるsearch regexなどを使って変更してください

 

 

設定したKeyCDNを確認してみる

設定は全て終わりました。

正常にうごいているか確認してみましょう。

curl -I url

で確認できます。

 

私の場合

curl -I https://heygblog-65c6.kxcdn.com/media/2016/12/heygfavicon.png

とすると

HTTP/1.1 200 OK
Server: keycdn-engine
Date: Wed, 04 Jan 2017 22:59:04 GMT
Content-Type: image/png
Content-Length: 4872
Connection: keep-alive
Last-Modified: Tue, 27 Dec 2016 16:08:18 GMT
ETag: "586291f2-1308"
Expires: Wed, 11 Jan 2017 22:59:04 GMT
Cache-Control: max-age=604800
Link: <https://heyg.jp/media/2016/12/heygfavicon.png>; rel="canonical"
X-Cache: HIT
X-Edge-Location: jptk
Access-Control-Allow-Origin: *
Accept-Ranges: bytes

200 OKなどと表示されていて、サーバーがkeyCDNになっていれば問題ありません。

 

ね?簡単でしょ?

 

まとめ

CDNと聞くと凄い難しそうで抵抗がありますが、これだけ簡単に個人でCDNが使える時代です。

SEOにも影響してくる、表示速度改善の項目に該当しますし

CMSなどを使って個人でブログをする際は設定するのがベストなのではないでしょうか。

数ヶ月たったころに経過報告させていただきます。

 

それでは!

 

Leave a Reply