Sharable

システム&ウェブのシェアラブル

AmazonS3でWordPressを運用したい(NOT永代供養)

2013年2月25日

WordPress3.5.1で構築されたブログをS3で公開・運用する方法についてまとめておく!
あえてS3Syncは使いません。
従来のようにFTPで運用したい!という気持ちに応えます。

概要は「WPで投稿する度に静的HTMLが生成されてS3に自動でアップロードされる仕組み」になる。
ユースケースとしては、

・ローカル(自分のパソコン内)のワードプレスで記事を作成する
・公開、と同時に自動で記事が(phpから)HTML化される
・そのHTMLが自動で指定したS3にアップロードされる

というかんじです。

よく言われている「サイトの永代供養」としてS3を使うのではなく、アグレッシブに「サイトの分骨寿陵」するのだ……って分かりづらいか(笑)
まぁ、言葉はなんでもいいのだ。

永代供養としてWordpressをS3に移行する方法であれば比較的簡単にできる。
Wordpressを静的HTML化して手動でアップすれば終わりだ。

静的HTML化もプラグインを使ったり、wgetしたり。

でもでもS3でWordpressを「運用したい」んだ!っていうニーズは多いと思う。だってS3なら巷のレンタルサーバよりも月額使用料が安くなる可能性高いもん。
まぁレンタルサーバの場合はホスティングだけでなくメールサーバも使えたり様々な特典があるので、一概にS3が安いとは言えないかもしれない。

でもでもホスティングだけでOK!という人も多いはず。メールなんてドメインがあれば無料メールサーバを使う方法がいくらでもある。
(そのうちその方法もまとめておく)

今回はそんな(やっぱり少ないかもしれない)ニーズのためにS3でWordpressを運用する方法をまとめておこうと思う。
何がいいって、この方法なら完全に無料で整えることが出来るということだろう。もちろんS3の料金はかかるし、独自ドメインを使うならその料金もかかる
でも、S3にアップする仕組み周りには一切お金をかけずともOKという意味だ。

あ、そうそう。何を血迷ったか、日本語ドメインで試してみた……。日本語ドメインでもできたんだからもちろん普通の英語のドメインなら問題ないと思う。

WordPressをS3で運用する手順の目次

では目次ですねー。

S3の環境設定をする

  1. [任意]ドメイン取る
  2. S3でバケツ作る
  3. S3のバケツを公開設定する
  4. [任意]S3に独自ドメインを適用する
  5. cloudgatesを使ってs3にftpアップロードできるようにする

wordpressをローカルに用意しよう

  1. bitnamiをダウンロード・インストールする
  2. WPに静的HTML生成プラグインを入れる(Really-Static)
  3. Really-Staticの設定をしよう
  4. [任意]DreamWeaverとかもFtp設定しておこう

テストして仕上げよう

  1. [任意]Really-staticの設定をテスト用にする
  2. [任意]手動でHTML化してみよう(手動アップ)
  3. S3のリダイレクト設定を使おう
  4. 投稿してみよう(自動アップ)

S3の環境設定をする

では一つずつ見ていく。けど、WEB上に有意義な情報が多い項目は割愛します。

[任意]ドメイン取る

いきなり割愛します(笑)

S3でバケツ作る・S3のバケツを公開設定する・S3に独自ドメインを適用する

こちらもsoftelメモさんのページが分かりやすいです。

cloudgatesを使ってs3にftpアップロードできるようにする

こ、こちらもaws memoさんのページが分かりやすいです。

wordpressをローカルに用意しよう

bitnamiをダウンロード・インストールする

xampp環境を自分で作ってもいいけど、あえてbitnamiを使ったことないので使ってみた。
xampp環境を構築する方法はWEB上にたくさんあるので、分からない場合は探してみてください。

で、恒例のリンク紹介ですm(__)m kachibito.netさんのページが分かりやすいです。

愚かな私は、最初ワードプレスを日本語ドメインで運用しているサーバーにインストール(オンライン上に展開)していましたが、日本語ドメインのサーバから日本語ドメインを適用したS3へのアップロードは後述のプラグインとの相性が悪く失敗しました。ローカルでの挙動は意図したとおりでしたので、ローカルの環境をお薦めします。というか、ローカルじゃないと無料とは言えないので是非。運用するワードプレスはローカルでもS3にアップロードすればオンラインになります。

WPに静的HTML生成プラグインを入れる(Really-Static)

やっと書ける内容になりました。
といってもここではWordpressでメニューのプラグインから新規追加を選択して、「Really Static」と検索してヒットしたプラグインをインストール・有効化するだけですね。

Really-Staticの設定をしよう

よし、書くぞー。

WordPress管理画面の「settings」>「Really Static」を選択。
いくつかタブがあると思います。現在の自分の画面には、
・Source
・Destination
・Manual Refresh
・Logfile
・Debug
・Donate
が表示されていますが、これだけだとちと足りませんので、下部にある「show Expertsettins」というチェックを入れます。
showexpertsettingsそうすると、
・Settings
・Reset
・Advanced
という3つのタブが追加されると思います。

Sourceタブの設定

Really Static: Sourceタブ・url to wordpressinstalltion
bitnamiのデフォルトであるURLを入れました。http://127.0.0.1/wordpress/

・url path to the actuall used templatefolder
テンプレートフォルダを入れます。http://127.0.0.1/wordpress/wp-content/themes/twentytwelve/とかhttp://127.0.0.1/wordpress/wp-content/themes/mytheme/とか

Destinationタブの設定

destination先ほど紹介したcloudgateから与えられたSFTPの情報を入力します。
・work with sftpにチェック

・各値を入力する

・path from SFTP-Root to cachedfiles
ここには、/wp/と入れておいてください。(wp以外のフォルダ名でもOK)

私は最初、S3直下にアップしたいために「/」と入力しましたが、そうすると「\」(バックスラッシュ)というフォルダがS3に生成されてindex.htmlが配備されていました。これではうまく動かないので、代わりに/wp/を入力し、後述するリダイレクト処理をもって解決としました。

・Domainprefix for your cached files
ここには独自ドメインやS3のエンドポイントを入力して下さい。私は独自ドメインを取って試したので、エンドポイントではテストしてません。
例)http://www.example.com/wp/
例にあるように、/wp/まで入れるのがポイントです。(wp以外のフォルダ名でもOKだが、path from SFTP-Root to cachedfilesで指定したフォルダ名と合わせること)

・Url to the templatefolder
http://127.0.0.1/wordpress/wp-content/themes/twentytwelve/とかhttp://127.0.0.1/wordpress/wp-content/themes/mytheme/とか

Settingsタブの設定

settings上から3つ目の「Rewrite every http://127.0.0.1/wordpress/ with http://www.example.com/wp/ (high security)」にチェックを入れましょう。

[任意]DreamWeaverとかもFtp設定しておこう

Really-Staticプラグインによって静的HTMLが生成・FTPアップロードされるのは、PHPファイル等々の動的なファイルのみです。まぁあたりまえだけど。
で、CSSとかJSは自動アップできません。
といっても別に手間が増えるわけではありません。CSSやJSをいじるときはだいたいDreamweaverとか色々なオーサリングツールというか統合開発環境(IDE)を使いますよね。
なので、そこにFTPの設定をしておけば問題なしです。

「おれはCSSもJSもWordpressの”外観の編集”からやるぜ!IDEなんて手間だぜ!」という剛の者がいれば手間は増えたと言われてもアレですけど……。ちがう、よね?

私はTwentytwelveの子テーマを作って実験していたので、最初に手動で以下の構造をS3に作っておきました。/wp/wp-content/themes/twentytwelve/jsと/wp/wp-content/themes/mytheme/。
そしてtwentytwelveのstyle.cssとjsフォルダ内のhtml5.jsとnavigation.js、mythemeのstyle.cssだけアップしておきました。

ということで(?)DreamweaberのFTPの設定方法はバッサリ割愛です。

テストして仕上げよう

[任意]Really-staticの設定をテスト用にする

ではテスト用に全体をHTML化するための流れを見てみましょう。

Destinationタブの設定

・work with local filesystemをチェック

・internal filepath from to cachedfiles
C:\Program Files\BitNami WordPress Stack\apps\wordpress\htdocs\wp-content\plugins\really-static\static\wp\
こんな感じでローカルのパスを書こう。最後のwpフォルダは手動で作らないとエラーがでるかもしれないので、作っておこう。

ここに面白いバグがあった。work with local filesystemにチェックがある状態でsaveボタンを押すと、円マーク(¥)がエスケープされて2つ(¥¥)になるのだが、その状態でもう一回save押すと¥が4つくらいになる(¥¥¥¥)。やめてー(/_;)

Settingsタブの設定

settings2デフォルトのままだと投稿と固定ページのみならず、タグやカテゴリーやユーザーページなんかも静的化されますので、手巣用に投稿と固定ページとindexだけ静的化されるように設定をいじります。

「Also make static」以下のチェックを外します。
外す: make tag-pages static
外す: make category-pages static
外す: make author-pages static
外す: make date-pages static
外す:dayly-pages
外す:monthly-pages
外す:yearly-pages

残す: make index-pages static

[任意]手動でHTML化してみよう(手動アップ)

Manually RefreshタブからHTML化

write all filesボタンをクリックしてしばし待ちます。

たまにバグります。そのさいLogfileタブにエラーログが吐かれますが、いったんWordpress管理画面メニューのSettings>ReallyStaticから離れないとログが出力されません!
あと、上手くいってたのに突然うんともすんとも言わなくなったら一度プラグインを止めて再有効化したら直りました。設定は消えたけど。

どうでしょう。HTMLできましたか?このプラグインは設定がちとずれると上手くいかないのでいろいろデバッグしてみてください。ただ、S3にアップする設定でデバッグすると多少とはいえお金がかかるので、ローカルに出力するように上述の方法で準備してからの方がいいと思う。

ローカルで上手くいったらさっきのSFTPの設定で動かすようにDestinationタブで設定して、手動でHTML出力してみよう!

S3のリダイレクト設定を使おう

S3にHTMLを出力できました。できました。きっとあなたもできている、という方向で進みます。

上述の通りであれば、S3には下記のようなツリー構造ができているかと。

/
┗index.html
┗wp
 ┗index.html
 ┗wp-content
  ┗themes
   ┗mytheme
   ┗twentytwelve
    ┗js

あといくつかの投稿と固定ページのフォルダもできてるかもしれませんね。

じゃあS3のルートドキュメントの設定を/wp/index.htmlに合わせよう!

と思ってS3のバケツのプロパティからStatic Web Hostingを選び、Index Documentに「/wp/index.html」を入れたら「The IndexDocument Suffix is not well formed」
と怒られました。

え?直下しかダメなの?
他に方法があるのかもしれないけど、とりあえず安易にリダイレクト掛けましたYO。
redirect
・S3の/index.htmlを選択します。
・Propertiesを表示します。
・Metadataを選択して展開します。
・Add more metadataをクリックします。
・Keyは、Website Redirect Locationを選択します。
・Valueは、http://www.example.com/wp/index.htmlを指定します。

これでトップページが擬似的に/wp/index.htmlになりました。ほっ。

投稿してみよう(自動アップ)

さて、それでは何か適当に記事をアップしてみてください。普通にWPの投稿から。

それでS3に反映されるはずです。

難点は、記事を投稿するとアップ処理が走るので、ちと記事の公開に時間がかかります。

最後に、テスト用にカテゴリーやタグの出力を制御していた人はこれを解除しておきましょう。

以上です。
このプラグインにはAdvancedっていうタブもあるのですが、いまいち設定が分からない。
ソースコードを見てもドイツ語が混ざっててなんか萎えたのでAdvancedは使ってません。
使い方がわかればもっと楽に色々できるかも?

一応フックは豊富に用意されているので、そのあたりはソースコードを覗いてみてください。

以下に3つほど使えそうなフィルターを紹介。

https://gist.github.com/soylatte/5028418.js

グッドラック!

–追記:2013-02-26–
ちなみにreally staticの作者さんがs3用のプラグインも作ってくれていますね。寄付すれば使えるようになるらしい。http://really-static-support.php-welt.net/amazon-s3-plugin-t7.html
–追記:2013-02-27–
サイトマップがアップされないじゃないか、、、と思ってオッカナビックリ作者のErikさんに聞いてみたら、丁寧に答えてくれた。ハッピーだ。どうやら最新版のスナップショットならできるようになっているらしい。うんうん、成長途中のプラグインって素敵だね。ありがとうErik。私もこんなところでバグ見つけて喜んでないでちゃんとレポートだそう。
サイトマップをアップする方法はこちら
ちなみに私はsitemapの生成にGoogle XML Sitemapsプラグインを使っているので、上記のリンク通りにsitemap.xmlをアップしても足りない。ちゃんと今回はS3を使っているのでgoogle-sitemap-generator直下のsitemap.xslもS3にアップしてあげないと真っ白な画面になります。
–追記:2013-02-28–
コメントはdisqus、問合せフォームはGoogle Driveのフォーム。
このエントリーをはてなブックマークに追加