20170204 WrodBench倉敷 第一回勉強会 StaticPress+S3で安全で落ちないサイトを作ろう

WrodBench倉敷 第一回勉強会のスライドです。

Transcript

1. StaticPress+S3で 安全で落ちないサイトを 作ろう WordBench倉敷 第１回勉強会 2017-02-04 ふるさとたけし takeshi.furusato@gmail.com
2. 自己紹介 • 名前：古里 武士(ふるさと たけし） • 倉敷出身 倉敷在住 • 株式会社イー・ネットワークス 所属 • 総務・人事、プログラマ、インフラエンジニア • WordBench倉敷 モデレーター • JAWS-UG岡山 副支部長 • 好きなWordPressプラグイン：StaticPress • 好きな食べ物：カレー
3. カレー好きです。
4. アジェンダ StaticPress+S3で安全で落ちないサイトを作ろう • WordPressのお悩み。 • StaticPressってなに？ • AmazonS3ってなに？ • ご利用パターン • 注意事項・制限事項 • 作ってみましょう。 • まとめ ※このスライドは後ほど公開いたします。
5. WordPressのお悩み。 • サイトが遅い！！重い！！ • サイトが攻撃を受けた！！改ざんされた！！ 主な原因の１つは 「閲覧の度にプログラムが動いているから」 →根本的に解決する方法の1つが 「StaticPressとAmazon S3」です。
6. StaticPressってなに？ StaticPress は、WordPress サイトを 静的HTMLに変換するためのプラグインです！！ http://ja.staticpress.net/ MADE IN JAPAN!! ※注意 静的HTML： プログラムが動作しない普通のHTML 動的HTML： プログラムが動作して生成されるHTML
7. AmazonS3ってなに？ • Amazon Web Servicesが提供するサービスの１つ • ２００６年から開始 • 複数のデータセンターで管理(3ヶ所以上で自動複製) • 99.99 % の可用性 ※ほぼダウンすることはなし • 99.999999999 % の堅牢性 ※ほぼデータ消失なし • お安い（$0.0330 /GB ※月額） • ファイル置き場やウェブ公開領域として利用可能 詳しくはhttp://www.awsmicrosite.jp/s3-hosting/ 第4回 JawsUG okayama 月額3.3円〜でレンタルサーバーを始める方法 http://www.slideshare.net/tfurusato/33-33701158
8. 通常のWordPressとの比較 • 通常のWordPressのサイト の場合 • StaticPress + AmazonS3 の場合 リクエストに応じてプログラムが動作、 HTMLを都度動的に生成し、サイト表示 予めStaticPressで静 的HTML化して、S3 に登録しておく。 リクエストに応じて、 AmazonS3からHTML を答え、サイト表示 AmazonS3 サーバー サイト閲覧者 サイト閲覧者 サーバー
9. ご利用パターン 1. サイト表示が遅い、急にアクセス増えた 2. セキュリティ、メンテナンスがわからない 3. もうサイト更新しないんですけどぉ。
10. ご利用パターン • データが増えたり、サーバのスペックが悪い。 • 短期的、突発的にアクセスが急増 • ガイ◯の夜明け、トレたまなど、TVで紹介される。 • Twitterやfacebookとかで炎上。 • どのくらいアクセス来るか予想不可能。 結果、サイトが表示されない。機会損失！！ 1. サイト表示が遅い、急にアクセス増えた StaticPress＋AmazonS3で公開するなら 秒間80万リクエスト処理できるので安心です！！
11. 補足：性能について 実際に、性能を確認してみました。 対象： 某求人情報サイト(WordPress) 投稿数:3,000件程度 検証： 対象に同時に100人がアクセスしたとき、1秒間に何件処理できるかを比較 A社VPS A社VPS A社VPS B社VPS B社VPS KUSANAGI 今回の構成 ディスク Magnetic Magnetic Magnetic SSD SSD ーー メモリ 1GB 4GB 4GB 4GB 4GB ーー サーバー Apache Apache Nginx Nginx Nginx ーー 結果 (リクエスト/s) None 0.45 1.25 8.21 41.26 286.67 ※この比較は根本的に仕組みが異なるので、あまり意味がありませんが・・・・。
12. • WordPressのセキュリティってなに？？ • WordPressのアップデートってなに？？ StaticPress＋AmazonS3で公開するなら WordPress本体やデータベースを 一般には公開しないので安心です！！ ご利用パターン ２．セキュリティ、メンテナンスがわからない ※注意 とはいえ、ちゃんとアップデートはしてくださいね。。。
13. • 例えば、イベントサイトなど http://kobe2011.wordcamp.jp/ ※イベントが終わればコンテンツは更新しない • 「ホームページリニュアルしました」から更新がない コーポレートサイト ※管理者不在による将来的な不安、脆弱性問題 ご利用パターン ３．もうサイト更新しないんだけど。。。 StaticPress＋AmazonS3で公開するなら 永代供養できるのでサーバー代が節約できます。
14. 注意事項・制限事項 • データベース・PHPは動いていません。 → 動的コンテンツ(スケジュール公開とか)できません。 • コメントは使えません。 → Facebookコメントなどで代用 • サイト内検索も使えません。 → Googleカスタムサーチで代用 • コンタクトフォームも使えません。 → Googleフォームやセキュアフォームで代用 • UAでの切り替えプラグインも使えません → レスポンシブで対応
15. 作ってみましょう 今回の構成 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者
16. 作ってみましょう • 材料 • ドメイン(お名前とかで取得) • AmazonWebServicesのアカウント ※以下に流れが説明されています。 https://aws.amazon.com/jp/register-flow/ • 作り方 1. 独自ドメインでアクセスできるようにする ※AWS R53の設定 2. StaticPressが出力する公開領域を作成 ※AWS S3とCloudFrontを作成 3. 公開領域と独自ドメインを紐付け ※AWS R53とCloudFrontを連携 4. StaticPressが出力するための権限を作成 ※AWS IAMを作成 5. WordPressサーバー作成 ※AWS Lightsailでサーバー作成 6. StaticPress、StaticPress S3インストール・設定
17. 作ってみましょう 1.独自ドメインでアクセスできるようにする ※AWS R53設定 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者
18. 1.AWS R53の設定 サービス → Route53 を選択
19. 1.AWS R53の設定 DNS managementの 「Get started now」を選択
20. 1.AWS R53の設定 「Create Hosted Zone」を選択し ドメイン名を入力します。
21. 1.AWS R53の設定 こちらをお名前.comなどのレジストラの管 理画面からネームサーバーとして登録してく ださい。 ※お名前.comの場合は [ドメイン設定]→[ネームサーバー変更] より選択可能 ドメイン名 ドメイン名
22. 作ってみましょう 2. StaticPressが出力する公開領域を作成 ※AWS S3,CloudFrontを作成 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 AWSでは、ソリューションの構築「静的ウェブサイトホス ティング」というメニューがあり、これらを容易に作成す るツールがあります。
23. 2.AWS S3,CloudFrontを作成 「静的ウェブサイトのホスティング」を選択
24. ドメイン名を入力し 「Create your website」を選択 2.AWS S3,CloudFrontを作成 ドメイン名
25. 2.AWS S3,CloudFrontを作成 StaticPress用のS3を作成できました。 ドメイン名
26. 2.AWS S3,CloudFrontを作成 後ほど、コンテンツを設置するので、サンプ ルファイルを削除しておく 「Manage files in Amazon S3」を選択 ドメイン名
27. 2.AWS S3,CloudFrontを作成 ファイル・ディレクトリを選択し、 「アクション」から「削除」を選択
28. 作ってみましょう 3.公開領域と独自ドメインを紐付け ※AWS R53とS3を連携 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 設定した独自ドメインで、用意した静的ウエブサイトにア クセスできるように、紐付けを行います。
29. 3.公開領域と独自ドメインを紐付け 「Buy domain」を選択 ドメイン名
30. 「Choose existing domain」を選択 該当のドメインをリストより選択 サブドメインが必要ならそちらを入力 Associate domainを選択 3.公開領域と独自ドメインを紐付け ドメイン名 ドメイン名
31. ドメインを紐付けできました。 3.公開領域と独自ドメインを紐付け ドメイン名 ドメイン名
32. 作ってみましょう 4.StaticPressが出力するための権限を作成 ※AWS IAMを作成 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 この後で作るWordPressサーバーがS3にファイルを書き込みするため の権限を作成します。
33. 4.AWS IAMを作成 「IAM」を選択
34. 4.AWS IAMを作成 「ユーザー」を選択 Key
35. 4.AWS IAMを作成 「ユーザー追加」を選択
36. 4.AWS IAMを作成 「ユーザー」を入力 「プログラムによるアクセス」を入力 「次のステップ：アクセス権限」を選択
37. 4.AWS IAMを作成 「既存のポリシーを直接アタッチ」を選択 フィルターに「S3」と入力 「AmazonS3FullAccess」選択 「次のステップ:確認」を選択
38. 4.AWS IAMを作成 「ユーザーの作成」を選択
39. 4.AWS IAMを作成 アクセスキーID シークレットアクセスキー (表示リンクをクリックすると、表示されます。) をメモする。 ※あとで必要になります。 ※シークレットアクセスキーは後で取れないので、必ずこちらでメモしてく ださい。 Key
40. 作ってみましょう 5.WordPressサーバー作成 ※AWS Lightsailでサーバー作成する DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 AWS Lightsailを利用して、サーバーを作成します。 https://amazonlightsail.com/
41. 5.WordPressサーバー作成 「Lightsail」を選択
42. 5.WordPressサーバー作成 「Let’s get started」を選択
43. 5.WordPressサーバー作成 「WordPress」を選択
44. 5.WordPressサーバー作成 「$5」を選択 ※CloudFront、S3で公開するので スペックは最小限でOK
45. 5.WordPressサーバー作成 WordPressサーバー完成しました。 IP
46. 作ってみましょう 6. WordPressの設定 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 作成したサーバーにアクセスして、 StaticPress、StaticPressS3をインストール、公開してみる。
47. 6.WordPressの設定 パスワードを調べるために 「Manage」を選択 パスワードを取得する(サーバー管理画面表示)
48. 6.WordPressの設定 「Connect using SSH」を選択 パスワードを取得する(コンソール起動) IP IP IP
49. 6.WordPressの設定 PASSWORD 黒い画面で以下を入力 「cat bitnami_application_password 」 WordPress管理画面のパスワードが表示されます。 パスワードを取得する(パスワード表示) IP
50. 6.WordPressの設定 黒い画面で以下を入力 sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1 sudo /opt/bitnami/ctlscript.sh restart apache Bitnamiアイコンの非表示設定 IP IP IP
51. 6.WordPressの設定 URL：http://[IPアドレス]/wp-admin/ ユーザー名：user パスワード：さきほど表示された値 管理画面からログインする IP
52. 6.WordPressの設定 Plugins → Add New を選択 StaticPressをインストール
53. 検索キーワードに「StaticPress」と入力 StaticPressの「Install Now」を選択 6.WordPressの設定 StaticPressをインストール
54. 6.WordPressの設定 黒い画面で以下を入力 cd /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/staticpress/includes/ sudo cp class-static_press.php class-static_press.php.org sudo vim class-static_press.php 「画像つきの投稿が動かない」現象に対する対処 730行目あたり --- if (is_wp_error($permalink)) continue; --- の後に以下を追加 if (preg_match('/.*¥.html¥/.*/', $permalink, $m)) { continue; }
55. Lightsailの画面からSSHを起動。以下を入力。 sudo apt-get install git cd /home/bitnami/apps/wordpress/htdocs/wp-content/plugins/ git clone https://github.com/megumiteam/staticpress-s3.git sudo chown -R bitnami:daemon staticpress-s3 ※gitとStaticPressS3をインストールします。 6.WordPressの設定 StaticPressS3をインストール IP IP
56. WordPressの管理画面から、 「Instarlled Plugins」を選択 StaticPress、StaticPressS3 Pluginを Activateする。 6.WordPressの設定 StaticPressをインストール
57. WordPressの管理画面から、 「Settings」→「Permalinks」を選択 「CustomStructure」に「/%postname%.html」と入力 「Save Changes」を選択 6.WordPressの設定 パーマリンクの設定を変更する。 IP IP
58. Static URL：公開するサイトのURL Save DIR：保存先パス /opt/bitnami/apps/wordpress/htdocs/static/ 「Save Changes」を選択 6.WordPressの設定 StaticPressの設定をする。 ドメイン名
59. Key Key バケット名 AWS Access Key：作成したIAMのAccessKey AWS Secret Key：作成したIAMのSecretKey AWS Region：「US_EAST_1」を選択 S3 Bucket：「aws-website-****」を選択 「Save Changes」を選択 6.WordPressの設定 StaticPressS3の設定をする。
60. 「Rebuild」を選択 6.WordPressの設定 StaticPressでRebuildする
61. 数分で完了します。 こちらを行うことで、自動的にS3へファイルが 保存されます。 6.WordPressの設定 StaticPressでRebuildする
62. URL：http://[ドメイン名] 表示されました！！ 6.WordPressの設定 サイトを確認。
63. デモ
64. 補足：費用について 概算ですが、以下のような費用感となります。 ※1ヶ月分の料金とします。 ※1ページ1MB、100リクエスト、月間10,000PVと仮定。 項目 金額 Amazon CloudFront (リクエストに対する料金) $1.26 Amazon CloudFront (転送量に対する料金) $1.40 Amazon S3 (データ保存に対する料金) $0.04 Amazon Route53(DNS管理対する料金) $0.50 Amazon Lightsail(WordPressサーバー料金) $5.00 合計： $8.20 $1=120円で計算すると。。。。 約1,000円／月
65. まとめ StaticPress + S3を使うと。。。 ・WordPress本体はユーザーから隔離 →比較的安全 ・急なアクセス増加にも耐えれる。 →機会損失の軽減 ・検索・フォーム等の動的ページは動きません。 →ASPサービスやGoogleサイト内検索で対応 ・コンテンツ更新したら「再構築」！！
66. Q&A
67. httpsって重要!! 常時SSL!!
68. 作ってみましょう • 材料 • 先程の環境 ※本件のためにCloudFrontを利用しました。 • 作り方 1. 独自ドメインのメール受信環境を作る ※Amazon SESの設定 2. SSL/TLS証明書を取得する。 ※AWS CertificateManager設定 3. SSL/TLS証明書を設置する。 ※AWS CloudFrontに設置 4. StaticPressの設定変更、動作確認 • 補足 今回、ドメイン認証による証明書を取得し、設置します。 証明書を取得するためには、ドメイン所有者である証明が必要です。 この証明(認証)はメール受信にて行います。
69. 作ってみましょう 今回の構成を無料でSSL化する。 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 SSL SSL証明書発行 (CertificateManager) メール受信 (Amazon SES)
70. 作ってみましょう 1.独自ドメインのメール受信環境を作る ※Amazon SESの設定 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 SSL SSL証明書発行 (CertificateManager) メール受信 (Amazon SES)
71. 1.Amazon SESの設定 SESを選択 ※該当ドメインでメールを受信できるのであれば必要なし
72. 1.Amazon SESの設定 Rule Setsを選択
73. 1.Amazon SESの設定 Create a Receipt Ruleを選択
74. 1.Amazon SESの設定 ドメイン名を入力 「Add Recipients」を選択 「Verify domain」を選択 ドメイン所有者であることを認証する。 ドメイン名
75. 1.Amazon SESの設定 「Use Route 53」を選択 ドメイン所有者であることを認証する。 ドメイン名 ドメイン名
76. 1.Amazon SESの設定 「Email Receiving Record」を選択 「Create Record Sets」を選択 ドメイン所有者であることを認証する。 ドメイン名 ドメイン名
77. 1.Amazon SESの設定 「Next Step」を選択 ドメイン名
78. 1.Amazon SESの設定 「S3」を選択 ※S3にファイルとして保存するため。 メールを受信したときのActionを設定
79. 1.Amazon SESの設定 メールを受信したときのActionを設定 「Create S3 backet」を選択 ※保存先の領域を作ります。 作成するバケット名を入力、 「Create Backet」を選択 「Next Step」を選択
80. 1.Amazon SESの設定 「Rule name」に適当な名前を入力 「Next Step」を選択 メールを受信したときのActionを設定
81. 1.Amazon SESの設定 メールを受信したときのActionを選択 「Create Rule」を選択 ドメイン名 バケット名
82. 1.Amazon SESの設定 テストでメールを送信してみる。 メール受信できました。 バケット名 ドメイン名
83. 作ってみましょう 2.SSL/TLS証明書を取得する ※AWS CertificateManager設定 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 SSL SSL証明書発行 (CertificateManager) メール受信 (Amazon SES)
84. 2. AWS CertificateManager設定
85. 2. AWS CertificateManager設定 ドメイン名を入力 「確認とリクエスト」を選択 ドメイン名
86. 2. AWS CertificateManager設定 「確認とリクエスト」を選択 ドメイン名
87. メールを確認後 「続行」を選択 2. AWS CertificateManager設定 ドメイン名 ドメイン名 ドメイン名 ドメイン名 ドメイン名
88. 2. AWS CertificateManager設定 受信したメールの認証URLにアクセス ドメイン名 バケット名
89. 「I Approve」を選択 2. AWS CertificateManager設定 ドメイン名 ないしょ
90. 2. AWS CertificateManager設定 ドメイン名 ないしょ
91. 2. AWS CertificateManager設定 ドメイン名
92. 作ってみましょう 3.SSL/TLS証明書を設置する ※AWS CloudFrontに設置 DNS (Route53) S3 CDN (CloudFront) サーバー (WordPress) サイト閲覧者 SSL SSL証明書発行 (CertificateManager) メール受信 (Amazon SES)
93. 3. AWS CertificateManager設置 「CloudFront」を選択
94. 3. AWS CertificateManager設置
95. 3. AWS CertificateManager設置 「Edit」を選択 ドメイン名
96. SSL Certificateにて「CustomSSL」を選択 プルダウンより先程認証した証明書を選択 CustimSSL Client Supportは必ず「SNI」を選択すること 3. AWS CertificateManager設置 ドメイン名 ドメイン名
97. 15分位待つ 3. AWS CertificateManager設置
98. 4. StaticPress設定変更・動作確認 StaticURLを「https://ドメイン名/」にし、Rebuild ドメイン名 Key Key
99. 4. StaticPress設定変更・動作確認 ドメイン名 ドメイン名 ドメイン名
100. ご清聴ありがとうございました。