【WordPress特別セミナー】StaticPress × S3 × Vagrant 勉強会 に参加してきた #staticwp

• 【WordPress特別セミナー】StaticPress × S3 × Vagrant 勉強会 : ATND
• 【WordPress特別セミナー】StaticPress × S3 × Vagrant 勉強会 #staticwp - Togetter

2013年8月末にWordPressとセキュリティに纏わる大きな騒ぎがあったのは記憶に新しいところです。今回はその騒動から起こしたアクションがあれよあれよという間に関係者に伝播し、気が付いてみると何とも豪華なラインナップの勉強会開催に至るまでに。3連休の中日でしたが会場も多くの参加者(定員200名)が駆け付けるという盛況振り。そんな勉強会に参加してきましたのでその雰囲気等をレポートして行きたいと思います。

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

目次

• はじめに
• 第1部　WordPressサイトを長期的にメンテナンスするために
• 第2部　Amazon S3でWordPressを動かす
• 第3部　現場視点で語るStaticPress開発の背景と事例
• 第4部　AWS S3について(仮)
• 第5部　仮想マシンざっくり解説と実践Vagrant
• さいごに

開催会場はグラントウキョウサウスタワー41F アカデミーホール＠東京丸の内。3連休の中日、とても天気の良い晴れの日の午後から夕方までみっちりセッションが詰まった形のイベントとなりました。

こちらのイベント、終了時点で全てのスライド資料が揃っているという素晴らしい状態でしたので、当レポートもメモベースにざっくり内容をなぞる程度のものにしようかと思います。あとスライドでは語られていない部分をちょろっと。

では、以下メモ＆レポート。

　

はじめに

• 川井健史さん (TwitterID:@siroi_mogutan)

まず初めに、このイベントが開催に至るまでの経緯を川井さんからご紹介。Facebookでコメント(10:47)してから数時間で開催が決まり(15:06)、数日後にはイベントとして公開(9/13)という何ともスピーディーな流れだったそうです。

　

第1部　WordPressサイトを長期的にメンテナンスするために

• 発表：高野直子さん (TwitterID:@naokomc)

WordPressの特徴として「PHPとMySQLを使った動的生成」「頻繁なコア・プラグインアップグレード」が挙げられます。その上で、便利さと運用のしやすさを両立させるための方法は数多くありますが、どれを選ぶのがベストなのかは状況によって異なってくるといえるでしょう。今回は、静的生成・マルチサイト化・マネージドホスティング・管理用プラグイン利用など幅広いアプローチを紹介し、それぞれの長所と短所を踏まえた使いどころを提案します。

スライド資料はこちら。

• まず前提を整理しましょう。何でアップグレードが必要なのか？
  • 新機能が使えるようになる
  • テーマ、プラグインとの互換性
  • セキュリティの向上(これが一番大きな理由かも知れない)。
  • WordPressのアップグレードは最新版で無いとセキュリティホールも公開されているし危険である。
  • ちなみに、WordPressのバージョンの付け方、意味合いが他とは若干異なる。メジャーバージョンは3.1、3.2...と小数点第1位までがメジャーバージョンとなる。

• WordPressインストールバージョン情報(全世界の情報分布)
  • 現状、最新Version3.6(latest)は16.5%。
  • 3.0が多いのは3系なら大丈夫という誤解？

• ではアップグレードしづらい理由は？
  • プラグイン、テーマが使えなくなる？
  • 独自カスタマイズが上書きされる
  • 環境が古く、最新版に対応していない(MySQLのバージョンが古い、等、お客様指定サーバ等)
  • メンテナンスしているサイトが多く面倒
  • たまにしかログインしないので忘れる

WordPressは頻繁に更新される。近いうち3.7、今年中に3.8に出る？バージョン更新はサイクルが早い。

• WordPressが頻繁に更新される理由
  • 変わりゆく色々な環境言語に適応・対応して行くというポリシー。
  • 更新頻度はuP、強化されていくだろう。利用者の我々も対応していく必要がある。
  • 

解決への段階的アプローチ

• Method:アップグレードしづらい原因をひとつずつ解決して行く
• Goal:運営、管理を楽にする！

1.自動化

• プラグインまたは3.7以降のコア機能を利用してアップグレードを自動化
• Automatic Updater...公式プラグイン。これを入れることで自動化対応可能。3.7以降はこれを含むコア機能の構成になる模様。テーマやプラグインも自動でアップデートしてくれるようになる。更新内容がメールで届くようになる。
• そもそも、アップグレードしても壊れないような構成にしておく事が大事。
• Custom CSS — Jetpack for WordPress
• Hybrid Core WordPress theme framework(テーマのフレームワーク)
• WordPress › フォーラム » 3.6 アップグレードに伴う問題とその解決方法

2.事前確認

• WordPressの事前確認：アップグレードする前の確認。開発環境をきちんと作る。テストする。
• 開発環境でデプロイし、そのままデプロイ出来る設定を行っておく。
• こちらの資料も参考になる。：Confident Commits, Delightful Deploys
  • Confident Commits, Delightful Deploys from Mark Jaquith
• smartrelease サーバのオプション
• 新バージョンのベータテストに参加するというのも手。

3.複数サイトの統合

• マルチサイト機能またはタクソノミーなどを利用して複数サイトを統合
• 複数のブログをマルチサイトに移行する - WordPress Codex 日本語版

4.バックアップ

• 個人ブログ等の場合は最悪この手法も。
• 自動アップグレードに頼る場合等のロールバック方法を準備しておく
• 【WP-DB-Backup】手軽にWordPressをバックアップできるプラグイン - ひなログ
• VaultPress - WordPress Backup and Security

5.外部委託

• メンテナンスを外部に委託。
• WordPress管理専門の外部サービスに自動作業を行ってもらう。
• Manage WordPress Sites from One Dashboard – ManageWP.com
• Flywheel – Managed WordPress hosting – Built for designers：デザイナ向け。

6.その他

• StaticPressなど、その他のアプローチも様々。
• 勿論、完璧にあったソリューションが無ければ作る事も可能。

結論

• 手法を選択する際の検討材料はコスト、使いやすさ、サイト管理者の技術的知識、サイトオーナーのニーズ。
• Happy Upgrading!

　

第2部　Amazon S3でWordPressを動かす

• 発表：増井雄一郎さん (TwitterID:@masuidrive)

WordPressの大量のっとりでセキュリティが問題になったこともあり、ブログをS3に移行。VagrantでローカルにWordPress立てて、そこで静的なHTML生成してアップするようにしました。これでハッキングも怖くないし、どんだけアクセスが来ても大丈夫。ここに至った経緯や取り組み、またメリット・デメリットなどについてお話します。

スライド資料はこちら。

今回のセッション・イベントのきっかけともなったブログエントリはこちら。

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

• 自己紹介：
  • 最近ブログのハッキングが多い。対応してたらこのような展開になった。
  • Pukiwikiのエンジンを作っていたりもした。
  • 暇さえあればプログラミングをしている。長風呂が趣味。最近は風呂でPCをするようにもなったw
  • 
  • さくらでWordPressがハッキングされた件、自分のサイトはどうだろう？不安。→簡単にするためにページを全部静的にしてS3にアップしてしまおう。
  • ブログに10行程度箇条書きで済ますつもりがなぜがイベント開催に。セミナーまでやる事になった。後半続き書きます！

• @masuidrive blog - Life with open source
  • 書くのは私(増井さん)一人。コメント機能ははそれほど使ってない。
  • WordPress等のバージョンは年1くらいで気が向いた時にバージョンアップ。

• ミイルブログ » 食べたい！コラム
  • このブログもWordPressで作成している。簡単なCMSとしてのみ、簡単に使っている。
  • バージョンアップの際、全てちゃんと動くか、観れているかのチェックは必要。

• サーバの運用は大変
  • アプリ、ミドルウェア、OSのバージョンアップ
  • ディスクなどの障害
  • サーバの状態や書き込みの監視
  • バックアップ自動化の設定していても、何らかの不都合で動いてない、リストアも出来ない。バックアップを適切に行う事は難しい。

• 手間を減らしたい
  • レンタルブログ
  • PaaS

• 動的の必要性は？
  • 記事は静的なHTMLでいいのでは？
  • コメントはあまりつかないし
  • トラックバックはスパム多い

• WordPressをHTML化
  • wgetとかcurlを使ったらwpからhtml生成出来る
  • ブログ本体はパスワード等を掛けて生成したHTMLだけユーザーに公開

• 生成したHTMLを公開
  • 同じサイト上で公開するとミドルウェアの管理を行わなければならない
  • Webのホスティングサービスに置こう...そうなればAmazon S3。

• Amazon S3
  • 世界最高品質のWebサーバ
  • 稼働率イレブンナイン
  • 自分のドメインを使用可能
  • アップロードは専用プロトコル(増井さんはcyberduckを使っているらしいです)
  • 容量＋転送量課金容量＋転送量課金

• WordPressはプラグインが充実
  • wgetとか使わなくてもプラグインでHTML生成出来るものがあるのでは？
  • タグの機能とか、関連するページを探したり…プラグインで全て揃う。
  • 増井さん『最近では、Twitterという便利な検索エンジンがあってですね、日本語で質問投げると答えを教えてくれるんです(笑)』
  • ReallyStaticとStaticPressというプラグインが候補に。
  • まずはReallyStaticに挑戦、しかしうまく行かず→StaticPressにチャレンジ。StaticPressのS3対応がなされていた。
    • StaticPress で書き出した html を S3 でホスティングする | StaticPress
    • 

• WordPressを静的にするとどんな問題が起こるだろう？考えうる問題点：
  • 動的な書き込み
    • トラックバック、コメント機能
    • (対応)jsで埋め込むコメント欄、閉じてしまう。
    • (対応)facebook comments/Disqusを使う。
    • (対応)トラックバックは使わない。
  • 動的なプラグイン
    • 投票、A/Bテスト、SEO、スマートフォン対応、問合せフォーム
    • (対応)諦める/jsベースに置き換える/対応出来るように頑張る
  • テーマ
    • User Agentを見て切り替えている
    • (対応)URLの変換を行う部分：正しく書き換える。
    • (対応)User Agent等で切り替える部分：js若しくはresponsiveに。
  • アクセス解析
    • プラグイン等で埋め込む方式
    • (対応)Google Analyticsとアクセスログで対応。

• Amazon s3は仕事で長年使っている。URL rewritingもサポート
  • リンクが外れてしまうのは痛い。そこを対応出来る。
  • S3の設定に追加されているのを確認。
  • IAMの仕組みを使うことで適切なユーザー制御も出来るように。

• 仕上げ
  • DNSを変更
  • 1〜2時間程待つと変更完了。
  • サーバはどうする？Basic認証を掛けておく/ローカルに移設する。

• ローカルに移設する
  • サーバを公開する必要はないのでローカルに移設する
  • 家サーバかラップトップ
  • 自分しか書かないのでラップトップに配置

• ラップトップでWordPress
  • OS Xには標準でapache +PHPが入っている
  • MySQLをローカルに導入
  • XAMPP等のパッケージ

• Vagrantを最近は使うようにしている。
  • Win/Mac/Linuxに対応している
  • VagrantでUbuntuを起動
  • Vagrant上に環境構築
  • WordPressを移設・起動
  • ブログを書いてpublish→公開
  • これから
    • StaticPressでbuildしたらMySQLのデータをdumpするようにしたい
    • Rebuildがもう少し早くなると嬉しい
    • 全体では無くパーシャル、1頁だけでもリビルド出来ると嬉しい。

　

第3部　現場視点で語るStaticPress開発の背景と事例

• 発表：小賀浩通さん (TwitterID:@digitalcube)
• 発表：岡本渉さん (TwitterID:@wokamoto)

StaticPressを開発するに至った背景、現場での実例などを交えながら、このプラグインが実際にどのように使われているかを具体的に説明します。WordPressを導入するにあたって、セキュリティやホスティングコストをはじめとする運用面の課題が発生する場合があります。そういった場合でもStaticPressを上手に組み合わせることで、これらを解決しつつもWordPressの開発や投稿のしやすさといった恩恵を受けることが可能です。

前半：小賀浩通さんさんのスライド資料はこちら。

Best practice / 活用方法

メンテナンスフリーパターン

• 更新頻度は低い
• バージョンアップ、保守運用の手間を無くしたい
• シンプルな公開フロー：法人サイト等が該当。

◎◎砲！迎撃パターン/Burst

• サイジングの予測不能
• 短期・突発的なバースト
• チャンスロスを防ぐ
  • AWSを活用して全国ネット番組(NHK)によるアクセス急増を乗り切った具体的手法 | Cerevo TechBlog

ケチケチホスティングパターン

• ランニングコストを徹底的に低減
• キャンペーン・ランディングサイト→StaticPress

永代供養パターン

• イベントサイトのアーカイブ
• 将来的な脆弱性対策/管理者不在
• 維持費を掛けない
• jaws-ug絡みのサイト等も順次EC2→S3に移行計画中。

• 要求(Requirement)：WordPress構築・運用に求められること。
  • セキュリティ/安全安心：情報セキュリティポリシー、公開フロー、バージョンアップ(staticにする事で確認、本番へup)
  • パフォーマンス：絶対落としてはいけない！予測不能な負荷/スパイク、チャンスロスを防ぐ
  • コスト：Infracost(利用料)、Dev(開発コスト)、Ops(運用保守コスト)

• 動的運用と静的運用で比較してみる
  • WordPress本来の構成図：見積額＝月12万円。まぁまぁ？諸々コスト等を考慮すれば許せる範囲か。
  • 
  • StaticPressにしてみると…バケツ1個しかないw お値段(月3.5万)の大半も転送量。
  • 

• また、Operation Managementに関するコストも諸々掛かる。見えないコストが色々掛かってくる。
  • インフラエンジニア
  • アプリケーション管理者
  • plugin/themeのメンテナンス

静的圧勝！のように見える。しかし問題点も幾つか。

• 問題点
  • サイト内検索：googleカスタム検索で対応
  • コメントフォーム：facebookコメントで対応
  • お問い合わせフォーム：google formを使う／男らしくmailto:を使う／ASPサービスを使う、等

• One More Thing
  • 動的な処理が必要
  • 複数人のエディタ
  • 記事更新頻度の多い
  • 再構築面倒くさい
  • wpのpowerを100%生かしたい

• 『動的朗報』
  • WordPress専用のマネージドホスティングという選択
    • WordPress AMI - 超高速 WordPress AMI 網元
    • 
  • WordPress専門のエンタープライズサポートという選択
    • WordPress.com VIP | WordPress Enterprise Hosting & Support
    • 
    • WordPressエンタープライズサポート｜め組用心棒
    • 

may the wordpress be with you.

後半：岡本渉さんさんのスライド資料はこちら。

Static Press Plugin、開発に至った経緯を。

• クライアントからの要望
  • 公開サーバには静的HTMLのみ
  • 公開前に記事内容を確認したい、承認フローを通したい。
• 社員10名、拠点は4つ。打合せの際に話題となっていたのがRainbowify。みんなこれに夢中w

• Movable Typeでいいんじゃない？でもwpで作った。
• Really Staticというプラグインもあった…が、検証していくと上手くいかない部分が。なのでstatic pressを作った。
• Really Static
  • 完全な静的HTML作成を目的にはしていない。既存WPサイトとの共存が主。
  • パーマリンクを書き換える→何かレイアウトが変わってしまう？事象が発生
  • テーマ・プラグインが利用しているファイルをコピーしない？
• Static press特徴
  • WordPressを静的サイトに書き換え
  • URLの書き換え
  • 動的処理不可
  • Basic認証もOK

と、ここいらで小休止。会場はビルの41Fという事もあり、快晴天気も相俟って絶景かな、な見晴らしでした。

　

第4部　Amazon S3による静的Webサイトホスティング

• 発表：堀内康弘さん (TwitterID:@horiuchi)

静的なWebサイトのホスティングにAmazon S3を活用する方が増えています。 簡単に設定でき、安くて、安全で、手間いらずな、Amazon S3によるウェブサイトの設定、および運用方法をデモを交えて具体的に説明します。またウェブサイトを運用する上で便利なS3の機能の紹介や、AWSのDNS権威サービス、Amazon Route53 を用いた独自ドメインによる運用、AWSのCDNサービス、CloudFrontを用いた高速にサイトを配信する方法もお話しいたします。

AWSからは堀内さんが登壇。

今回の勉強会にちなんだテーマという事で、Amazon S3をベースにしたデモ実演を中心とした解説セッションとなりました。時間の都合で全部詳細にまでとは行きませんでしたが、S3で静的Webサイトを公開、Route53連携、CloudFront連携までを解説。詳細な内容はスライド資料に記載されていますのでご参照を。

内容とは直接関係ありませんが、年代的に懐かしさを覚えたのが以下ショットw

　

第5部　仮想マシンざっくり解説と実践Vagrant

• 発表：澤登亨彦さん (TwitterID:@sawanoboly)

そもそも仮想マシンとは何か、Vagrantとは何かについて簡単に解説し、仮想マシンの起動やプロビジョニング、WordPress向け開発、本番へのDeployment,Publish、開発環境の更新とロールバック等(SnapShot)、Vagrantを実践する上で必要な点についてお話しします。

スライド資料は以下。

イベントも終盤となり、割と体力的にバテていた＆澤登さんの作成されたスライド及び説明がとても分かり易い内容のものでしたので、そのままスライドをご参照頂く形でこのセッションはメモも割愛したいと思います。

こちらもやや脱線しますが、途中まさかの『マリオ』被りに遭遇w

途中参考書籍として『Vagrant入門』の紹介も。ここは早速ポチりました。(epub形式版も技評から出ています)

• Vagrant Documentation
• Vagrant入門ガイド | Gihyo Digital Publishing

Amazonでチェックする

　

さいごに　

ひと通り発表が終わった後は、Web CAT Studio 長尾悠さん (TwitterID:@WebCATStudio)によるお話がなされてお開きとなりました。約5時間、みっちりWordPress/S3/Vagrantに関する貴重なノウハウを学べた有意義な一日でした。関係者の皆様、ありがとうございました！