WordPress3.5.1で構築されたブログをS3で公開・運用する方法についてまとめておく!
あえてS3Syncは使いません。
従来のようにFTPで運用したい!という気持ちに応えます。
概要は「WPで投稿する度に静的HTMLが生成されてS3に自動でアップロードされる仕組み」になる。
ユースケースとしては、
・ローカル(自分のパソコン内)のワードプレスで記事を作成する
・公開、と同時に自動で記事が(phpから)HTML化される
・そのHTMLが自動で指定したS3にアップロードされる
というかんじです。
よく言われている「サイトの永代供養」としてS3を使うのではなく、アグレッシブに「サイトの分骨寿陵」するのだ……って分かりづらいか(笑)
まぁ、言葉はなんでもいいのだ。
永代供養としてWordpressをS3に移行する方法であれば比較的簡単にできる。
Wordpressを静的HTML化して手動でアップすれば終わりだ。
でもでもS3でWordpressを「運用したい」んだ!っていうニーズは多いと思う。だってS3なら巷のレンタルサーバよりも月額使用料が安くなる可能性高いもん。
まぁレンタルサーバの場合はホスティングだけでなくメールサーバも使えたり様々な特典があるので、一概にS3が安いとは言えないかもしれない。
でもでもホスティングだけでOK!という人も多いはず。メールなんてドメインがあれば無料メールサーバを使う方法がいくらでもある。
(そのうちその方法もまとめておく)
今回はそんな(やっぱり少ないかもしれない)ニーズのためにS3でWordpressを運用する方法をまとめておこうと思う。
何がいいって、この方法なら完全に無料で整えることが出来るということだろう。もちろんS3の料金はかかるし、独自ドメインを使うならその料金もかかる。
でも、S3にアップする仕組み周りには一切お金をかけずともOKという意味だ。
あ、そうそう。何を血迷ったか、日本語ドメインで試してみた……。日本語ドメインでもできたんだからもちろん普通の英語のドメインなら問題ないと思う。
WordPressをS3で運用する手順の目次
では目次ですねー。
S3の環境設定をする
- [任意]ドメイン取る
- S3でバケツ作る
- S3のバケツを公開設定する
- [任意]S3に独自ドメインを適用する
- cloudgatesを使ってs3にftpアップロードできるようにする
wordpressをローカルに用意しよう
- bitnamiをダウンロード・インストールする
- WPに静的HTML生成プラグインを入れる(Really-Static)
- Really-Staticの設定をしよう
- [任意]DreamWeaverとかもFtp設定しておこう
テストして仕上げよう
S3の環境設定をする
では一つずつ見ていく。けど、WEB上に有意義な情報が多い項目は割愛します。
[任意]ドメイン取る
いきなり割愛します(笑)
S3でバケツ作る・S3のバケツを公開設定する・S3に独自ドメインを適用する
こちらもsoftelメモさんのページ(※1)が分かりやすいです。
cloudgatesを使ってs3にftpアップロードできるようにする
こ、こちらもaws memoさんのページ(※2)が分かりやすいです。
wordpressをローカルに用意しよう
bitnamiをダウンロード・インストールする
xampp環境を自分で作ってもいいけど、あえてbitnamiを使ったことないので使ってみた。
xampp環境を構築する方法はWEB上にたくさんあるので、分からない場合は探してみてください。
で、恒例のリンク紹介ですm(__)m kachibito.netさんのページ(※3)が分かりやすいです。
WPに静的HTML生成プラグインを入れる(Really-Static)
やっと書ける内容になりました。
といってもここではWordpressでメニューのプラグインから新規追加を選択して、「Really Static」と検索してヒットしたプラグインをインストール・有効化するだけですね。
Really-Staticの設定をしよう
よし、書くぞー。
WordPress管理画面の「settings」>「Really Static」を選択。
いくつかタブがあると思います。現在の自分の画面には、
・Source
・Destination
・Manual Refresh
・Logfile
・Debug
・Donate
が表示されていますが、これだけだとちと足りませんので、下部にある「show Expertsettins」というチェックを入れます。
そうすると、
・Settings
・Reset
・Advanced
という3つのタブが追加されると思います。
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タブの設定
先ほど紹介したcloudgateから与えられたSFTPの情報を入力します。
・work with sftpにチェック
・各値を入力する
・path from SFTP-Root to cachedfiles
ここには、/wp/と入れておいてください。(wp以外のフォルダ名でもOK)
・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タブの設定
上から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の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フォルダは手動で作らないとエラーがでるかもしれないので、作っておこう。
Settingsタブの設定
デフォルトのままだと投稿と固定ページのみならず、タグやカテゴリーやユーザーページなんかも静的化されますので、手巣用に投稿と固定ページと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ボタンをクリックしてしばし待ちます。
あと、上手くいってたのに突然うんともすんとも言わなくなったら一度プラグインを止めて再有効化したら直りました。設定は消えたけど。
どうでしょう。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。
・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つほど使えそうなフィルターを紹介。
グッドラック!
ちなみにreally staticの作者さんがs3用のプラグインも作ってくれていますね。寄付すれば使えるようになるらしい。http://really-static-support.php-welt.net/amazon-s3-plugin-t7.html
サイトマップがアップされないじゃないか、、、と思ってオッカナビックリ作者のErikさんに聞いてみたら、丁寧に答えてくれた。ハッピーだ。どうやら最新版のスナップショットならできるようになっているらしい。うんうん、成長途中のプラグインって素敵だね。ありがとうErik。私もこんなところでバグ見つけて喜んでないでちゃんとレポートだそう。
サイトマップをアップする方法はこちら
ちなみに私はsitemapの生成にGoogle XML Sitemapsプラグインを使っているので、上記のリンク通りにsitemap.xmlをアップしても足りない。ちゃんと今回はS3を使っているのでgoogle-sitemap-generator直下のsitemap.xslもS3にアップしてあげないと真っ白な画面になります。
コメントはdisqus、問合せフォームはGoogle Driveのフォーム。