vagrant + wordpress + amazon s3でブログをセキュア&快適に運用する方法
TRANSCRIPT
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 [email protected]: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 $ #"" [email protected] $ #"" [email protected] $ #"" [email protected] $ #"" [email protected] $ #"" ogimage.png $ #"" [email protected] $ #"" [email protected] $ #"" [email protected] $ !"" [email protected] #"" 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