Vagrant + WordPress + Amazon S3でブログをセキュア＆快適に運用する方法

2015.02.08 WordPressもくもく勉強会 at コエド第4回Yusuke Takahashi

自己紹介

運営サイト

Yusuke Takahashi（@youthkee）都内で働くWebデベロッパー。趣味でWordPressを使ったサイトの制作やWebサービスの運営をしています。

IG FaninstagramとiPhoneographyに関する総合情報サイト

castellaTwitterやFacebookなど、色んなSNSでプロフが作れるソーシャルプロフィールサイト

マインクラフトきっずこどものためのゲーム情報サイト（準備中）

http://igfan.jp http://twpr.jp http://minecraftkids.jp

今回お話する内容 今回お話する内容

Vagrant（ローカル仮想環境）+WordPress（プラグインで静的化）+Amazon S3（クラウドストレージ）で運用フローを構築してみた

昨年末に個人ブログを立ちあげ

littlebird: http://littlebird.mobi

このプロジェクトのきっかけ このプロジェクトのきっかけ

今回お話する内容

http://www.slideshare.net/naokomc/wordpress-27138322

http://www.slideshare.net/megumithemes/staticpress-27139158

http://www.slideshare.net/horiyasu/amazon-s3web-27138902

https://speakerdeck.com/masuidrive/amazon-s3dewordpresswodong-kasu

ローカル仮想環境の構築 ローカル仮想環境の構築

Vagrant: https://www.vagrantup.com/

VCCW: http://vccw.cc/

https://www.virtualbox.org/wiki/Downloads

https://www.vagrantup.com/downloads.html

Virtual BoxとVagrantのインストール公式サイトからパッケージをダウンロードして、インストールを実行

VCCWのインストールプロジェクト用フォルダの作成

VCCWのダウンロード

$ git clone git@github.com:miya0001/vccw.git

$ mkdir ~/prj/littlebird/$ cd ~/prj/littlebird/

設定ファイルの編集VCCWディレクトリへ移動して、設定ファイルをコピー

site.ymlを編集

$ cd vccw$ cp provision/default.yml site.yml

hostname: littlebird.localip: 192.168.33.10version: latestlang: jatitle: littlebirdwp_home: '' wp_siteurl: ''db_prefix: lb_...

プロビジョニングの実行以下のコマンドを実行するだけ

初回の環境構築だけ7分ほどかかりますが、気長に待ちましょう。/wordpress/フォルダにファイルが入っていれば構築完了！

$ vagrant up

仮想環境の動作確認

IPアドレス（192.168.33.10）にアクセスして表示されたらOK。管理画面は、http://192.168.33.10/wp-login.phpにアクセスして、admin/adminでログイン。

ホストネームでアクセスするにはvagrant-hostsupdaterというプラグインを別途インストール

一度「vagrant halt」で仮想マシンを停止してから再度「vagrant up」で起動すれば有効化される。

$ vagrant plugin install vagrant-hostsupdater

Vagrant Manager: http://vagrantmanager.com/

ローカルでのテーマ制作 ローカルでのテーマ制作

Underscores | A Starter Theme for WordPress: http://underscores.me/

Bootstrap: http://getbootstrap.com/

littlebird-theme: https://github.com/littlebirdjp/littlebird-theme

詳しくはGitHubで…

WordPressコンテンツの静的化 WordPressコンテンツの静的化

StaticPress: https://wordpress.org/plugins/staticpress/

Really Static: https://wordpress.org/plugins/really-static/

StaticPressとReally Staticの比較 StaticPressとReally Staticの比較

StaticPress

Really Static

• 全てのアーカイブのHTMLを生成• テーマやプラグインのディレクトリ内にある画像、CSS、JSなども全て生成

• 指定したアーカイブのHTMLとアップロードしたメディア（画像）のみ生成

→アップ漏れの心配なし

→必要なファイルのみアップ可能

Really Staticの使い方 Really Staticの使い方

WordPress本体のURLとテーマディレクトリのパスを設定。ここはローカルのホストネームでOK！

ローカルで静的ファイルを生成させる場所を設定。（/really-static/など）公開するサイトのURLとテーマディレクトリのパスを設定。

生成するアーカイブの種類を選択。「indexページ」のみ選択すると、トップページと投稿ページしか生成されない。

ページ単位、またはサイト全体を手動でリフレッシュ（再構築）。「すべてのファイルを書き込む」ボタンをクリックすると、サイト全体の再構築が可能。

コンテンツのアップロード コンテンツのアップロード

共通ファイルのアップロード!"" wp-content themes !"" littlebird #"" bower_components $ !"" jbootstrap $ !"" dist $ #"" css $ $ #"" bootstrap-theme.min.css $ $ #"" bootstrap.min.css $ $ !"" littlebird-site.min.css $ #"" fonts $ $ #"" glyphicons-halflings-regular.eot $ $ #"" glyphicons-halflings-regular.svg $ $ #"" glyphicons-halflings-regular.ttf $ $ !"" glyphicons-halflings-regular.woff $ !"" js $ !"" bootstrap.min.js #"" fonts $ #"" Marck_Script $ $ #"" MarckScript-Regular.ttf $ $ !"" OFL.txt $ !"" Source_Sans_Pro $ #"" OFL.txt $ #"" SourceSansPro-Black.ttf $ #"" SourceSansPro-BlackItalic.ttf $ #"" SourceSansPro-Bold.ttf $ #"" SourceSansPro-BoldItalic.ttf $ #"" SourceSansPro-ExtraLight.ttf $ #"" SourceSansPro-ExtraLightItalic.ttf $ #"" SourceSansPro-Italic.ttf $ #"" SourceSansPro-Light.ttf $ #"" SourceSansPro-LightItalic.ttf $ #"" SourceSansPro-Regular.ttf $ #"" SourceSansPro-Semibold.ttf $ !"" SourceSansPro-SemiboldItalic.ttf #"" img $ #"" bt_facebook@2x.png $ #"" bt_instagram@2x.png $ #"" bt_twitter@2x.png $ #"" logo@2x.png $ #"" ogimage.png $ #"" service01@2x.png $ #"" service02@2x.png $ #"" service03@2x.png $ !"" youthkee@2x.png #"" js $ #"" customizer.js $ #"" navigation.js $ !"" skip-link-focus-fix.js !"" style.css

テーマ側で使用している画像、CSS、JSのうちサイトの表示・動作に必要な物だけをアップロード

コンテンツのアップロード

!"" really-static #"" 2014 $ !"" 12 $ !"" firstpost $ !"" index.html #"" index.html !"" wp-content !"" uploads !"" 2014 !"" 12 #"" firstpost.jpg !"" littlebird_theme.jpg

/really-static/→ドキュメントルートなど、適宜階層を置き換えてアップロードする。初回以降は、差分のみアップする運用でOK！

Amazon S3での静的サイト公開 Amazon S3での静的サイト公開

Amazon S3: http://aws.amazon.com/jp/s3/

堅牢性99.999999999%可用性99.9%

バックアップの必要がほぼいらない

サイトが落ちる心配もほぼいらない

使った分だけ払えばOK1ヶ月辺り10円／1GB～

Amazon S3設定のポイント• 独自ドメインで利用するには、ドメイン名と同じ名前でバケットを作成• ルートドメインの場合は「www」付きのドメイン名でもバケットを作成

• 閲覧できるようにバケットポリシーを変更• AWSで提供しているRoute 53というDNSサービスを利用する

littlebird.mobiwww.littlebird.mobi（リダイレクト用）

littlebird-theme: https://github.com/littlebirdjp/littlebird-theme

詳しくはGitHubで…

Really StaticとS3の連携 Really StaticとS3の連携

「Really Static Amazon S3 Plugin」というプラグインを追加でインストール。配布されているzipファイルを解凍して、プラグインディレクトリに設置すると、プラグインが認識される。

※要アクセスコード

AWSの「Security Credentials」で設定した『Access Key ID』と『Secret Access Key』を設定し、バケット名（例：littlebird.mobi）を入力。記事を投稿すると、自動的にS3にアップされるようになる。

まとめ まとめ

WordPressを静的化 + ローカルで運用すると

セキュリティのことを気にしなくていいので、とっても安心

ロード時間も速くて快適！

さらにReally Static + Amazon S3で連携すると

普段と全く変わらないフローで更新できる

ツールの導入で困った時は… ツールの導入で困った時は…

GitHubを活用しよう！

① Issuesをチェック同じような不具合が報告されてないか？

② Pull Requestsをチェック

同じような不具合に対する提案が上がってないか？

③ Commitsをチェック

最近大きな仕様変更がなかったか？

何はともあれ、まずはWatchしておく

メールで随時通知を受け取れる

それでも分からなかったらIssueを投稿して聞いてみる

作者が忙しいこともあるけど、きっと誰かが助けてくれるはず…

WordPressのことなら… WordPressのことなら…

Slackも活用しよう

参加方法はこちら: http://bit.ly/1LyAMjX