この記事の所要時間: 1226

cdnCDNとは平たく言えば、1つのサーバーで全てを賄わず、画像などのメディアファイスを別のサーバーから呼び出すことで、負荷を軽減させ最適化させること。

wordpressで簡単にCDN(コンテンツデリバリネットワーク)を使えるプラグインを2つご紹介。

この仕組みを構築する場合、シンボリックリンクを使いSHHで…と初心者には難しくなってしまいがち。特にこのサイトで使用しているsixcoreサーバーではSHHが使えないのでそこでまたややこしくなってくる。

なので、ここでは簡単に実現するためにプラグインを使用する方法を使うことにする。

–スポンサーリンク–

CDMを無料でできる方法

まず、無料で出来る方法では、【Dropbox CDN】というプラグインを使用する。
【Public】フォルダに使用する画像を入れ、その画像を右クリックし【パブリックリンクのコピー】をクリック。
doropbox1
こちらは無料でできる代わりに10Gまでの制限がある。※超えると404で表示されてしまう。
↑上記の画像はプラグインからではなく、画像リンクをそのまま貼り付けてある。

このように、画像なら特に外部から簡単にリンクで呼び出しができる。そう考えると、FlickrやPicasaでもいいわけだ。
ただ、ポップアップでの画像展開や、wordpressとの連携を考えると少し不便なところも出てくるし、cssやjsやスクリプトなどのプログラムを呼び出すことも難しいといえるだろう。

そんな時活躍してれるのが、【Amazon S3】というアマゾンが提供してくれるサーバーだ。
最近、アマゾンでは電子書籍化も活発になりつつあるし、サーバーも値下げが行われて更に使いやすくなっている。
しかも日本語での対応も徐々に増えてきた(登録の段階など)。とはいえ、まだ実際の仕様などでは英語での表記が多いし、従量課金制ということもあり、従来のサーバーとは使い勝手が違っているのに戸惑うこともあるかもしれない。

次にこのAmazon S3をCDNとしてwordpressで使用するまでの流れを簡単に解説していきたいと思う。

Amazon S3をCDNに利用する方法

Amazon S3は、2013年4月より更に値下げが行われた。
料金の概要は、無料で容量が月5Gまで転送量が月15Gまで使用出来る。※アップロードは2000個、ダウンロードは2万個
→料金の詳細はこちら

今回は【Amazon S3 for WordPress】というプラグインを使用することで、wordpressのメディアファイルとして同期する方法となる。
これにより、CDNによる負荷軽減+バックアップとしても利用できるだろう。
※なお今回の解説画像から早速Amazon S3 for WordPressを利用している。

まず、こちらの『今直ぐサインアップ』よりアカウント作成。
※登録の流れの詳細はこちら

次に【支払い方法】にカード登録。
AmazonS3-1
カードの確認が出来たら(通常、直ぐにメールへお知らせがくる)

AmazonS3-2
↓このような英語で記載のメールが届けばok。

AmazonS3-3
次にwordpressの管理画面より【Amazon S3 for WordPress】を検索後インストールし有効化。

AmazonS3-4
続いて、サイドメニューの【Amazon S3】より【Amazon 3s setting】の『AWS Access kye ID』と『Secret Key』を入力後、【Authenticate Account】をクリック。

と、その前に、『AWS Access kye ID』と『Secret Key』を取得し、【Amazon S3】でセッティングをしておく必要がある。

AmazonS3-5
『AWS Access kye ID』と『Secret Key』は、こちらの【アクセス証明書】より入手できる。
※シークレットアクセスキーは【表示】をクリックすれば見れる。

次にAmazon S3のセッティングを行う。Amazon S3はfirefoxブラウザでアドオンを入手することで行えるようになる。

AmazonS3-6
firefoxのプラウザよりこちらから、【Amazon s3 organizer(s3Fox)】をインストール。

AmazonS3-7
インストール後、firefoxのメニューバーの【ツール】より、【S3 Organizer】をクリックすると、【S3Fox】が起動し表示される。

その画面の左上の【Manage Accounts】すると新しいウィンドウで【s3 Account Manager】が表示されるので、先ほど取得した『AWS Access kye ID』と『Secret Key』を入力後【ADD】をクリック。
※【Account name】 は自分にわかるもので適当でも大丈夫。

表示された画像は2つに分かれている。左がローカル(PS側)で右がAmazon S3となる。
次にフォルダ(パケット)を作成する。

AmazonS3-8
右の画面上で右クリックし、【Create Directory】を選択。
小窓が開くので、【Folder Name】に名前を入力すると作成できる。

AmazonS3-9
このようにフォルダが作成されるので、自分なりに管理しやすいようわけておくといいだろう。
次にアクセス権の設定をしておく。

AmazonS3-10
フォルダを右クリック後、【Edit ACL】を選択。
【Everyone】の【Read】をクリックすると、赤い☓から緑のチェックに変わる。その後【ok】をクリックすると、そのフォルダ全ての公開設定が完了する。

AmazonS3-11
試しに画面左のローカル(PC)より画像を選択し、中央の右矢印をクリックするとアップロードされる。※アップロード状況は画面下に緑のバーで表示される。

次にwordpressのメディアとの同期設定をしていく。
サイドメニューの【Amazon S3】より【Amazon 3s setting】の『AWS Access kye ID』と『Secret Key』を入力後、【Authenticate Account】をクリックすると次の画面になる。

AmazonS3-12
【Use this bucket】のプルダウンメニューより、先ほど作成したフォルダを選択。
【File Upioads】にチェックを入れると、メディアと同期されるようになる。
【save】をクリック。

後は、通常の作業を行うだけ。
つまり、【メディアを追加】より画像を追加するだけで、Amazon S3に追加され、URLもAmazon S3になる。※この解説ページの画像URLを見ると一目瞭然だ。

ちなみに、Amazon S3上で見てみると、
AmazonS3-13
wordpressと同じように、【/wp-content/uploads/2013/04/】のフォルダが自動的に作成されている。

このように画像を多く使用するサイトで負荷をかけず表示をスムーズにしてくれるかもしれない。

気になる課金については、どのくらいのアクセスでどれほど発生するのかを、課金され次第、追ってアップしていく次第だ。

--スポンサーリンク--

ちなみに、従量課金制というのもあって、現在の使用状況は気になるところだ。
料金は、リアルタイムに確認出来る。
AmazonS3-19
サインアップし、【アカウント】の【サインアップアクティビティ】より確認できる。
※ダイレクトなURLはこちら

確認しつつ、もしも料金が発生しそうな時には、プラグインを『停止』させることで、いつでも”ストップ”させることができる。

–スポンサーリンク–

追記

この記事をアップした後で、少し欲が出てきてしまい、【Amazon CloudFront】も試して見ることにした。
※色々試せるのもAmazon S3のいいところだろう。

少々の画像のみなら、Amazon S3から直接でも大丈夫だと思う。
ただ、音楽や動画(ストリーミング)の配信なども考えると、1つだけ懸念することも出てくるかもしれない。
なぜなら、Amazon S3はアメリカからファイルを呼び出すため、時間がかかる可能性があるから。

そこで、【Amazon CloudFront】経由するといいらしいということと、設定も(上記の作業が終わっていれば)とても簡単なようので、早速試して見ることにした。

まず、firefoxの【Amazon S3 Organizer(S3Fox) 】より、
AmazonS3-14
フォルダを右クリックし【Manage Distributions】を選択。
【Creative Distributions】をクリックすると、【Status】が『InProgress』に変わる。
【ok】をクリック。
しかし、メディアからアップロードしても、URLはAmazon S3のまま変化なしで失敗。

その後【Amazon S3 for WordPress】ではなく、【Amazon S3 and Cloudfront】があることを発見。
AmazonS3-15

すると、設定の【Amazon S3】に、【Cloud Front】が出現。
AmazonS3-16
CloudfrontのURLを貼り付け【save】をクリックすると、無事『cloudfront.net』経由に画像URLが全て変更される。

CloudfrontのURLは
AmazonS3-18
先ほどの、【Creative Distributions】の【Status】欄をクリックすると、上記のURLが出現するので、【コピー】をクリックし、【Cloud Front】のURLへ貼り付けする。

ところが、画像のURLが『http://https://websites-designs.com』に、なってしまった。
そこで、【Cloud Front】のURLから『http://』を削除してみると
AmazonS3-17
無事、表示されるようになった。

–スポンサーリンク–

JetpackでCDN

wordpress.comで開発されているプラグインをまとめた【Jetpack by wordpress】にて、CDNが無料で提供されている。
内容は、

WordPress.com の CDN (コンテンツ・デリバリー・ネットワーク) から画像を読み込ませ、サイトを高速化しましょう。画像をキャッシュし、高速なネットワークから提供することで、あなたのサーバーの負荷をワンクリックで低減できます。

これに加え横幅をサイトに自動調整してくれる機能や、上部から順番に読み込む機能なども備わっている。※更に画像編集もあるようだ。

無料なのでこちらがいいかもしれない。
ただ、無料なだけに詳細な情報が少ないにも事実だ。

Jetpack6
ちなみに、実験的に【Cloud Front】を設定したまま有効化してみた。
すると、アップロードURLは、【Cloud Front】になっているが、サイト上に表示されるURLは、『http://i0.wp.com/d2pxhlacr917eg.cloudfront.net/~Jetpack6.jpg』となっている。

これはもしかすると、【Cloud Front】を更にwordpress.com側の【Photon】が呼び出して表示しているのかもしれない。
そうなると、おそらく意味がないだろう。
ただ、【Photon】の機能や実際の表示速度の計測も含め、しばらく様子を見ていこうと思う。

追記

様子を見ていると、ある日に気がつくと画像が表示されていなかった。
おそらくwordpress側の使用条件にマッチしていなかったのだと予想される。
※乱用されないよう、いくつか条件があるようだ。

CDNmiss1
このように、画像が空欄の状態になっていた。

そこで、jetpackの『Photon』を停止させたところ…

CDNmiss2

このように、画像が表示されるようになった。

–スポンサーリンク–

有料クラウドサービス

今回ご紹介した他にも、表示速度をアップする方法は様々ある。

例えば、『PHP☆Ninjya
このような、wordpress専用のクラウドサービスに一任してしまえば楽だ。
ただ、如何せん費用がかかるのが難点だと思う。

近年、これだけwordpressが普及した中、このようなクラウドサービスは更に普及してくるだろう。
そうなれば価格も抑えられていくに違いない。

それまでの目安として、先ほどのninjyaの例を上げるとするなら、サイトアクセス数が月30万つまり1日に1万を超えたところで検討してみてもいいかもしれない。
※これはserverでの単位なので、1つのserverに複数のサイトがある場合には、serverを移したり増強すればいいと思う。

1サイトで1日1万UA超えてくるなら、9800円は費用対効果としても丁度いいと思う。
※おそらくこの基準で価格を算出していると思われる。とはいえ、出始めたばかりということもあり、まだ高いといえる。

wpboosterというクラウドサービスもある。
こちらは、転送量の従量制課金となっている。
どちらが高いのかは微妙なところ。

–スポンサーリンク–

シークレットキー取得が新しくなる

2014年4月より、シークレットキーの取得方法が変わるので、
こちらの記事に取得方法をメモ代わりに記載。

–スポンサーリンク–

追記2

AmazonのCDN課金が、先月から3000円を超えていて驚いた。
確かにPVは伸びていると思うが、そこまではないと思っていたからだ。

画像やアイキャッチを使うことで、二乗で増えていたのかもしれない。
(あ、そういえば、先月はトレンドで急激に上げたサイトがあったのを思い出した)

ここで1つ疑問が沸いてしまった。
「もしアクセスを上げる攻撃にあった時どうなるのだろう?」と。

なので、暫くの間jetpackの『Photon』の切り替えて試してみることにした。

そこで新たに気がついたのが、プラグインを停止しても「それまでの転送URLは残る」ということに。
そんな時には、「Search Regex」というプラグインを使えば、一括で置き換えしてくれるので、とても便利だった。

参考にさせていただいたサイトはこちら。

Search Regexプラグインは過去に投稿した記事の内容を一括置換することができるプラグインです。

引用元: Search Regexプラグイン記事やコメント内容を一括置換 – WordPressプラグインの一覧.

著者情報

山田招憲
Wordpressを使ったSEOからの集客を含むアクセスアップサポートを行っています
(検証サイト3000サイト以上)
詳しいプロフィールはメルマガ内で…