XX砲なんてもう何も怖くない!WordPressを195倍高速化するAmazonS3とStaticPressを使った運用術!

staticpress-s3

公開日:  最終更新日:2014/05/10

WordPressを軽くするにあたって皆さんどのような方法をとってますでしょうか。

キャッシュプラグインをいれてみたり、CDNいれてみたり、jsの読み込む順番変えたり、、、

しかし、これらの対策を行おうと、サーバ側で何らかしらの処理を行っている以上、たくさんのアクセスが集中してしまうといずれ限界は来てしまいます。

そんな負荷対策に頭を悩ましていた日(そんな悩んでいませんが)に、Amazon S3を使ってwordpressを運用できると聞いたのでこれを試してみることにしました。

 

sponcer link

概要

Amazon S3は簡単に言うと、クラウド上でストレージを提供するサービスで、Webサイトのホスティング機能もあるので、独自ドメインでS3に置いてあるコンテンツを公開することもできます。

今回はそこに目をつけます。

しかしAmazon S3は静的コンテンツしか公開できません。

WordPressはPHPで動いてるので、どうやってS3に置くのかという疑問が出るかと思います。

そこで使うのがWordPressをHTMLなどの静的コンテンツに生成できるプラグイン「StaticPress」を使います。

StaticPressを使うことで、WordPressのページを静的HTMLファイルに再構築してサーバ側の負荷を排除し、Amazon S3に静的HTMLファイルをおくことでスケーラビリティを向上させることが可能になります!!

これでGunosy砲やはてぶ砲やYahoo!砲などの急激なアクセス増加にも容易に耐えることができるようになります。

さらに、動的要素がなくなるため、PHPやWordPressのセキュリティーホールなどの心配もすることがなくなります

まさにいいコトづくしの対策。

やらないわけにはいきません。

というわけで、StaticPressを使ってAmazon S3でWordPressを運用できるようにするのが今回の目標です。

条件

先程も述べましたが、Amazon S3は静的コンテンツしか置くことが出来ないため、動的な部分があると移行することができません。

そのため以下の様な制限があります

  • 標準のコメント機能やトラックバックを使っていない (DISQUSやFacebookなどの外部サービスは大丈夫)
  • User Agentをみてサーバ側で動作を変えたりしていない (レスポンシブデザインなテーマで、PCとスマホで同じテーマを使う必要があります)
  • Voteなどユーザが投稿出来るプラグインを使っていない
  • ブログ内検索を使っていない(Google検索などを使っていれば大丈夫)

また、DNSをAmazon S3に向ける必要があるので、DNSを自分で設定できる必要もあります。

自分の場合は動的なところがいくつかひっかかっていたため、以下の施策を実施しました。

 

以上の準備が整いましたら早速次より手順を紹介します。

Amazon S3でバケットの作成

今回はAmazon S3のWebホスティング機能を使います。

AWSの登録をすました後に東京リージョンのAmazon S3管理コンソールにアクセスします。

ログイン後に以下の画面が出るので「Create Bucket」ボタンを押下します。

s3_1_create_bucket

 

次に、「Bucket Name」はドメイン名といっしょにする必要が有るため当サイトの場合は「blog.mogmet.com」と書いておきます。

Regionは公開するユーザに近いところを選びます。

このブログを見てるのでしたら日本だと思うので迷うこと無く「Tokyo」かと思います。
書いたら「create」ボタンを押下します。

s3_2_bucket_name

 

バケットを作成できたら、右ペインにある「Enable website hosting」にチェックを入れ、以下のように入力して右下の「Save」ボタンを押下します。

  • Index Document : index.html
  • Error Document : 404.html

この際にEndpoint名はメモしておいてください。

s3_3_enable_website

 

Amazon IAMの作成

バケットの準備ができたところで、このバケット用のIAMを作成します。

IAMを用いることでAWSの管理者アカウントを使わなくてもファイルの更新ができるようになります。

権限の作成

まずIAMのコンソールにログインしましょう。

するとDashboardにでかでかと「Create a New Group of Useers」とでているのでボタンを押下します。

s3_4_create_group_user

 

グループ名をつけてあげます。

s3_5_group

 

「Policy Generator」にチェックを入れて「Select」ボタンを押下します。

s3_6_policy_generate

 

指定したバケットに対して操作が可能にするため、以下のように設定をして「Add Statement」ボタンを押下します。

  • Effect : Allow を選択
  • AWS Service : Amazon S3 を選択
  • Actions : All Actions (*) にチェック (全て選択されます)
  • Amazon Resource Name (ARN): 「arn:aws:s3:::/*」 と入力。自分の場合は「arn:aws:s3:::blog.mogmet.com/*」と入力した

s3_7_edit_permissions_1

「Add Statement」ボタンを押下すると下の方にルールが追加されます。

 

これだけではたりないのでもう一つルールを追加します。

再度、以下のように設定をして「Add Statement」ボタンを押下します。

  • Effect : Allow を選択
  • AWS Service : Amazon S3 を選択
  • Actions : 「GetBucketLocation」「ListAllMyBuckets」「ListBucket」 にチェック
  • Amazon Resource Name (ARN): arn:aws:s3:::*と入力。

s3_8_edit_permissions_2

 

2つ設定できたら下の「Continue」ボタンを押下します。

s3_9_edit_permissions_continue

 

JSONでの設定も一応できるらしいですが、とりあえず「Continue」ボタンを押下します。
s3_10_json_continue

 

ユーザの作成

今作った権限を与えるユーザを作成します。

「Enter User Names」と書いてあるところに適当にユーザ名を指定してあげます。

また、「Generate an access key for each User」にチェックが入っているのを確認して下さい。

入力したら「Continue」ボタンを押下します。

s3_11_create_user

 

これで問題なければ「Continue」ボタンを押下します。

s3_12_preview

 

鍵の保存

「Show User Security Credentials」リンクを押下して、「Access Key ID」と「Secret Access Key」をメモしておきます。

※ここでメモしておかないとSecret Access Keyは再度表示できないのでメモ必須です。

心配でしたら「Download Credentials」ボタンを押下してcsvファイルでダウンロードしておきましょう。

s3_13_id_key

 

WordPressからS3にアップロード

StaticPressのインストール

次にStaticPressの準備をします。

なお、MySQL5.6をお使いの方は一部トラップがございます。

以下の記事を参考にしてあらかじめ修正しておいてください。

StaticPressをMySQL5.6の環境で導入しようとしたら詰まった話

 

サイドメニューの「プラグイン」→「プラグイン新規追加」でStaticPressを検索してインストール、有効にします。

s3_14_install_staticpress

 

さらに追加オプションのプラグインとしてStaticPressをS3と連携させるStaticPress-S3プラグインをインストール/有効化します。

しかし残念ながらこれはプラグイン検索では出てこないので、githubから直接pluginディレクトリに持ってきます。

 

その後、WordPressの管理画面のプラグインのページから有効化します。

s3_15_staticpress-s3_enabled

 

StaticPressの設定

StaticPressのプラグイン有効化後、サイドメニューに「StaticPress」という項目が追加されているので、その中の「StaticPress設定」を押下します。

以下のように設定を入力して、StaticPress設定枠にある「変更を保存」ボタンを押下します。

  • 静的サイト URL : ブログTOPのURL
  • 出力先ディレクトリ (ドキュメントルート) : /wordpressのドキュメントルート/static

s3_16_staticpress_setting

 

次にAmazon S3の設定をします。下の方に「StaticPress S3 Option」の項目があるので以下のように設定を入力して下にある「変更を保存」ボタンを押下します。

  • AWS Access Key : IAMの作成した時にメモしたAccess Key ID
  • AWS Secret Key : IAMの作成した時にメモしたSecret Access Key
  • Region : Tokyoを選択した場合は「AP_NORTHEAST_1」に設定します
  • S3 Bucket : 上記3つを入力後に「設定を保存」ボタンを一旦押下すると出てくるので、作ったバケット名を選択する

s3_17_staticpress_s3_option

以上で準備は全て完了です。

 

HTMLを生成してS3にアップロード

サイドメニューから「StaticPress」ページに遷移して「再構築」ボタンを押すとS3にアップロードされていきます。

s3_18_rebuild

 

ずらずらとURLが表示されて最終的に「終了」という表示がでます。

s3_19_rebuild_comp

 

S3のバケットの中身をみてみるとファイルがアップロードされているのが確認できるかと思います。

s3_20_uploaded_on_s3

テンプレートのアップロード

テンプレートをカスタマイズして使っている人は、元になるテンプレートを上書きする形で実装していると思うのですが、StaticPressでは継承元のテンプレートを意識して構築をしてくれないので自分で必要なファイルを置いて上げる必要があります。

自分の場合はGushのテーマをカスタマイズして使っていたのでGushのテーマをphpファイルを取り除いてアップロードしました。

まず、以下のコマンドでphpファイルだけ取り除きました。

 

ファイルが準備出来たら、Amazon S3の管理コンソールにて、「バケット名」→「wp-content」→「themes」とたどったところで「Upload」ボタンを押下します。

s3_21_upload

 

「Drag and drop files and folders to upload here.」と書いてあるところに先ほどのファイルをテーマフォルダごとドラッグアンドドロップします。

すると下にアップロードするフォルダ名が表示されます。

問題なければ「Set Details」ボタンを押下します。

s3_22_select_folder

 

「Set Details」ページでは特に何も設定せずに「Set Permissions」ボタンを押下します。

s3_23_set_details

 

「Add more permissions」ボタンを押下し、以下のように設定を入力して「Start Upload」ボタンを押下します。

  • Grantee : Everyone
  • Open/Download : チェック

s3_24_set_permissions

 

アップロードが終わると「Done」と表示され、左側にもアップロードされたフォルダが確認できるはずです。

s3_25_done

 

style.cssのmime-typeの調整

StaticPress-S3経由でアップロードされたstyle.cssはなぜかmime-typeが「text/x-asm」とおかしいことになっているのでこれを修正します。

Amazon S3の管理コンソールからアップロードしたstyle.cssまでファイルをたどります。
「Properties」の「Metadata」にてValueを「text/css」と変更して「Save」ボタンを押下します。

s3_26_mime

以上で対象バケットのEndpointにアクセスしてみると正常にcssが読み込まれて、ブログがうまく表示されるかと思われます。

 

DNSの変更

Amazon S3にコンテンツを置けたところで最後にDNSを切り替えます。

自分はCloudFlareを使っているため、CloudFlareにてDNSを変更しました。

ドメインに対してAmazon S3の対象バケットのEndpointにCNAMEを向けてやります。
s3_27_dns_cname

DNSを切り替えることでS3のほうへアクセスがいくようになります。

 

 

以上で、最強の環境の完成です。

 

運用上の注意点

style.cssの更新

style.cssについてはstyle.cssを更新するたびにStaticPress-S3によってmime-typeが「text/x-asm」に上書きされてしまうので、

変更などを行ったら随時mime-typeを変えないとレイアウトが崩れてしまいます。

ファイルの更新

基本的にStaticPressは差分更新を行うため、既に作成されているファイルなどは構築しません。

もし、再度すべてのファイルを再構築したいようでしたら、wordpressのサーバ側にある静的ファイルを一度全部消してあげると全て再構築のし直しができます。

Photonを使っている場合

JetPackプラグインのPhotonの機能を使っている方は、記事をWordpressで書いてプレビューするときに、画像がS3に反映されていないと画像が表示されないので、一度画像をアップロードしたあとに、StaticPressで再構築をして画像をS3に反映させることで画像がプレビュー時にも表示されるようになります。

 

応答速度

どれくらいはやくなったかをabコマンドを使って測定してみました。
使ったabコマンドは以下

同時接続10を10回やって総数100個のリクエストを投げてみました。

 

結果

検証項目 移行前(apache+MySQL) Amazon S3
テスト時間 177.781 sec 0.908 sec
平均リクエスト時間 1777.813 msec 9.079 msec
最大リクエスト時間 74412 msec 552 msec

圧倒的な差が出てしまいました。
平均リクエスト時間でみるならば約195倍もの効果がありました。

移行前の環境は大量のアクセスが来てしまうとapacheがいっぱいいっぱいになり、中々リクエストを返しきれないという挙動になっていました。

 

まとめ

Amazon S3StaticPressを組み合わせて使うことでWordpressの利点をいかしつつも静的ファイルの生成と配信をすることができるようになりました。

これでどんなアクセスが来ようがもう何も怖くない!!はずです。

また、さらにCloudFlareを組み合わせて使うことでAmazon S3の配信料金も抑えることが出来るかと思います。

それでは、素晴らしきWordpressライフを。

 

参考

WordPressをStaticPress+Amazon S3+Vagrantでセキュリティ万全にする方法 [前編] | @masuidrive blog

 

  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP ↑