vagrant + wordpress + amazon s3でブログをセキュア&快適に運用する方法
TRANSCRIPT
![Page 1: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/1.jpg)
Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法
2015.02.08 WordPressもくもく勉強会 at コエド第4回Yusuke Takahashi
![Page 2: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/2.jpg)
自己紹介
運営サイト
Yusuke Takahashi(@youthkee)都内で働くWebデベロッパー。趣味でWordPressを使ったサイトの制作やWebサービスの運営をしています。
IG FaninstagramとiPhoneographyに関する総合情報サイト
castellaTwitterやFacebookなど、色んなSNSでプロフが作れるソーシャルプロフィールサイト
マインクラフトきっずこどものためのゲーム情報サイト(準備中)
http://igfan.jp http://twpr.jp http://minecraftkids.jp
![Page 3: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/3.jpg)
今回お話する内容 今回お話する内容
![Page 4: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/4.jpg)
Vagrant(ローカル仮想環境)+WordPress(プラグインで静的化)+Amazon S3(クラウドストレージ)で運用フローを構築してみた
昨年末に個人ブログを立ちあげ
littlebird: http://littlebird.mobi
![Page 5: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/5.jpg)
このプロジェクトのきっかけ このプロジェクトのきっかけ
![Page 6: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/6.jpg)
今回お話する内容
![Page 7: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/7.jpg)
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
![Page 8: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/8.jpg)
ローカル仮想環境の構築 ローカル仮想環境の構築
![Page 9: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/9.jpg)
Vagrant: https://www.vagrantup.com/
![Page 10: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/10.jpg)
VCCW: http://vccw.cc/
![Page 11: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/11.jpg)
https://www.virtualbox.org/wiki/Downloads
https://www.vagrantup.com/downloads.html
Virtual BoxとVagrantのインストール公式サイトからパッケージをダウンロードして、インストールを実行
![Page 12: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/12.jpg)
VCCWのインストールプロジェクト用フォルダの作成
VCCWのダウンロード
$ git clone [email protected]:miya0001/vccw.git
$ mkdir ~/prj/littlebird/$ cd ~/prj/littlebird/
![Page 13: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/13.jpg)
設定ファイルの編集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_...
![Page 14: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/14.jpg)
プロビジョニングの実行以下のコマンドを実行するだけ
初回の環境構築だけ7分ほどかかりますが、気長に待ちましょう。/wordpress/フォルダにファイルが入っていれば構築完了!
$ vagrant up
![Page 15: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/15.jpg)
仮想環境の動作確認
IPアドレス(192.168.33.10)にアクセスして表示されたらOK。管理画面は、http://192.168.33.10/wp-login.phpにアクセスして、admin/adminでログイン。
![Page 16: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/16.jpg)
ホストネームでアクセスするにはvagrant-hostsupdaterというプラグインを別途インストール
一度「vagrant halt」で仮想マシンを停止してから再度「vagrant up」で起動すれば有効化される。
$ vagrant plugin install vagrant-hostsupdater
![Page 17: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/17.jpg)
Vagrant Manager: http://vagrantmanager.com/
![Page 18: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/18.jpg)
ローカルでのテーマ制作 ローカルでのテーマ制作
![Page 19: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/19.jpg)
Underscores | A Starter Theme for WordPress: http://underscores.me/
![Page 20: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/20.jpg)
Bootstrap: http://getbootstrap.com/
![Page 21: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/21.jpg)
littlebird-theme: https://github.com/littlebirdjp/littlebird-theme
詳しくはGitHubで…
![Page 22: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/22.jpg)
WordPressコンテンツの静的化 WordPressコンテンツの静的化
![Page 23: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/23.jpg)
StaticPress: https://wordpress.org/plugins/staticpress/
![Page 24: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/24.jpg)
Really Static: https://wordpress.org/plugins/really-static/
![Page 25: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/25.jpg)
StaticPressとReally Staticの比較 StaticPressとReally Staticの比較
![Page 26: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/26.jpg)
StaticPress
Really Static
• 全てのアーカイブのHTMLを生成• テーマやプラグインのディレクトリ内にある画像、CSS、JSなども全て生成
• 指定したアーカイブのHTMLとアップロードしたメディア(画像)のみ生成
→アップ漏れの心配なし
→必要なファイルのみアップ可能
![Page 27: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/27.jpg)
Really Staticの使い方 Really Staticの使い方
![Page 28: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/28.jpg)
WordPress本体のURLとテーマディレクトリのパスを設定。ここはローカルのホストネームでOK!
![Page 29: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/29.jpg)
ローカルで静的ファイルを生成させる場所を設定。(/really-static/など)公開するサイトのURLとテーマディレクトリのパスを設定。
![Page 30: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/30.jpg)
生成するアーカイブの種類を選択。「indexページ」のみ選択すると、トップページと投稿ページしか生成されない。
![Page 31: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/31.jpg)
ページ単位、またはサイト全体を手動でリフレッシュ(再構築)。「すべてのファイルを書き込む」ボタンをクリックすると、サイト全体の再構築が可能。
![Page 32: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/32.jpg)
コンテンツのアップロード コンテンツのアップロード
![Page 33: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/33.jpg)
共通ファイルのアップロード!"" 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のうちサイトの表示・動作に必要な物だけをアップロード
![Page 34: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/34.jpg)
コンテンツのアップロード
!"" really-static #"" 2014 $ !"" 12 $ !"" firstpost $ !"" index.html #"" index.html !"" wp-content !"" uploads !"" 2014 !"" 12 #"" firstpost.jpg !"" littlebird_theme.jpg
/really-static/→ドキュメントルートなど、適宜階層を置き換えてアップロードする。初回以降は、差分のみアップする運用でOK!
![Page 35: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/35.jpg)
Amazon S3での静的サイト公開 Amazon S3での静的サイト公開
![Page 36: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/36.jpg)
Amazon S3: http://aws.amazon.com/jp/s3/
![Page 37: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/37.jpg)
堅牢性99.999999999%可用性99.9%
バックアップの必要がほぼいらない
サイトが落ちる心配もほぼいらない
![Page 38: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/38.jpg)
使った分だけ払えばOK1ヶ月辺り10円/1GB~
![Page 39: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/39.jpg)
Amazon S3設定のポイント• 独自ドメインで利用するには、ドメイン名と同じ名前でバケットを作成• ルートドメインの場合は「www」付きのドメイン名でもバケットを作成
• 閲覧できるようにバケットポリシーを変更• AWSで提供しているRoute 53というDNSサービスを利用する
littlebird.mobiwww.littlebird.mobi(リダイレクト用)
![Page 40: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/40.jpg)
littlebird-theme: https://github.com/littlebirdjp/littlebird-theme
詳しくはGitHubで…
![Page 41: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/41.jpg)
Really StaticとS3の連携 Really StaticとS3の連携
![Page 42: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/42.jpg)
「Really Static Amazon S3 Plugin」というプラグインを追加でインストール。配布されているzipファイルを解凍して、プラグインディレクトリに設置すると、プラグインが認識される。
※要アクセスコード
![Page 43: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/43.jpg)
AWSの「Security Credentials」で設定した『Access Key ID』と『Secret Access Key』を設定し、バケット名(例:littlebird.mobi)を入力。記事を投稿すると、自動的にS3にアップされるようになる。
![Page 44: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/44.jpg)
まとめ まとめ
![Page 45: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/45.jpg)
WordPressを静的化 + ローカルで運用すると
セキュリティのことを気にしなくていいので、とっても安心
![Page 46: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/46.jpg)
ロード時間も速くて快適!
![Page 47: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/47.jpg)
さらにReally Static + Amazon S3で連携すると
普段と全く変わらないフローで更新できる
![Page 48: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/48.jpg)
ツールの導入で困った時は… ツールの導入で困った時は…
![Page 49: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/49.jpg)
GitHubを活用しよう!
![Page 50: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/50.jpg)
① Issuesをチェック同じような不具合が報告されてないか?
![Page 51: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/51.jpg)
② Pull Requestsをチェック
同じような不具合に対する提案が上がってないか?
![Page 52: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/52.jpg)
③ Commitsをチェック
最近大きな仕様変更がなかったか?
![Page 53: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/53.jpg)
何はともあれ、まずはWatchしておく
メールで随時通知を受け取れる
![Page 54: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/54.jpg)
それでも分からなかったらIssueを投稿して聞いてみる
作者が忙しいこともあるけど、きっと誰かが助けてくれるはず…
![Page 55: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/55.jpg)
WordPressのことなら… WordPressのことなら…
![Page 56: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/56.jpg)
Slackも活用しよう
![Page 57: Vagrant + WordPress + Amazon S3でブログをセキュア&快適に運用する方法](https://reader031.vdocuments.net/reader031/viewer/2022020116/55ab55f91a28abf17e8b456f/html5/thumbnails/57.jpg)
参加方法はこちら: http://bit.ly/1LyAMjX