2017/02/04 WrodBench倉敷 第一回勉強会 StaticPress+S3で安全で落ちないサイトを作ろう
1 like1,325 views
WrodBench倉敷 第一回勉強会のスライドです。
![1.AWS R53の設定
こちらをお名前.comなどのレジストラの管
理画面からネームサーバーとして登録してく
ださい。
※お名前.comの場合は
[ドメイン設定]→[ネームサーバー変更]
より選択可能
ドメイン名
ドメイン名](https://image.slidesharecdn.com/20170203wbkurashikicf-s3-wp-170204135739/85/2017-02-04-WrodBench-StaticPress-S3-21-320.jpg)
![6.WordPressの設定
URL：http://[IPアドレス]/wp-admin/
ユーザー名：user
パスワード：さきほど表示された値
管理画面からログインする
IP](https://image.slidesharecdn.com/20170203wbkurashikicf-s3-wp-170204135739/85/2017-02-04-WrodBench-StaticPress-S3-51-320.jpg)
![URL：http://[ドメイン名]
表示されました！！
6.WordPressの設定
サイトを確認。](https://image.slidesharecdn.com/20170203wbkurashikicf-s3-wp-170204135739/85/2017-02-04-WrodBench-StaticPress-S3-62-320.jpg)
2017/02/04 WrodBench倉敷 第一回勉強会 StaticPress+S3で安全で落ちないサイトを作ろう
- 2. 自己紹介 • 名前：古里 武士(ふるさと たけし） • 倉敷出身 倉敷在住 • 株式会社イー・ネットワークス 所属 • 総務・人事、プログラマ、インフラエンジニア • WordBench倉敷 モデレーター • JAWS-UG岡山 副支部長 • 好きなWordPressプラグイン：StaticPress • 好きな食べ物：カレー
- 3. カレー好きです。
- 4. アジェンダ StaticPress+S3で安全で落ちないサイトを作ろう • WordPressのお悩み。 • StaticPressってなに？ • AmazonS3ってなに？ • ご利用パターン • 注意事項・制限事項 • 作ってみましょう。 • まとめ ※このスライドは後ほど公開いたします。
- 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 ※この比較は根本的に仕組みが異なるので、あまり意味がありませんが・・・・。
- 14. 注意事項・制限事項 • データベース・PHPは動いていません。 → 動的コンテンツ(スケジュール公開とか)できません。 • コメントは使えません。 → Facebookコメントなどで代用 • サイト内検索も使えません。 → Googleカスタムサーチで代用 • コンタクトフォームも使えません。 → Googleフォームやセキュアフォームで代用 • UAでの切り替えプラグインも使えません → レスポンシブで対応
- 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) S3CDN (CloudFront) サーバー (WordPress) サイト閲覧者
- 18. 1.AWS R53の設定 サービス → Route53 を選択
- 19. 1.AWS R53の設定 DNS managementの 「Get started now」を選択
- 20. 1.AWS R53の設定 「Create Hosted Zone」を選択し ドメイン名を入力します。
- 24. ドメイン名を入力し 「Create your website」を選択 2.AWS S3,CloudFrontを作成 ドメイン名
- 26. 2.AWS S3,CloudFrontを作成 後ほど、コンテンツを設置するので、サンプ ルファイルを削除しておく 「Manage files in Amazon S3」を選択 ドメイン名
- 30. 「Choose existing domain」を選択 該当のドメインをリストより選択 サブドメインが必要ならそちらを入力 Associate domainを選択 3.公開領域と独自ドメインを紐付け ドメイン名 ドメイン名
- 50. 6.WordPressの設定 黒い画面で以下を入力 sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1 sudo /opt/bitnami/ctlscript.sh restart apache Bitnamiアイコンの非表示設定 IP IP IP
- 52. 6.WordPressの設定 Plugins → Add New を選択 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をインストール IPIP
- 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の設定をする。
- 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円／月
- 66. Q&A
- 68. 作ってみましょう • 材料 • 先程の環境 ※本件のためにCloudFrontを利用しました。 • 作り方 1. 独自ドメインのメール受信環境を作る ※Amazon SESの設定 2. SSL/TLS証明書を取得する。 ※AWS CertificateManager設定 3. SSL/TLS証明書を設置する。 ※AWS CloudFrontに設置 4. StaticPressの設定変更、動作確認 • 補足 今回、ドメイン認証による証明書を取得し、設置します。 証明書を取得するためには、ドメイン所有者である証明が必要です。 この証明(認証)はメール受信にて行います。
- 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」を選択 ドメイン所有者であることを認証する。 ドメイン名 ドメイン名
- 79. 1.Amazon SESの設定 メールを受信したときのActionを設定 「Create S3 backet」を選択 ※保存先の領域を作ります。 作成するバケット名を入力、 「Create Backet」を選択 「Next Step」を選択
- 80. 1.Amazon SESの設定 「Rule name」に適当な名前を入力 「Next Step」を選択 メールを受信したときのActionを設定
- 89. 「I Approve」を選択 2. AWS CertificateManager設定 ドメイン名 ないしょ
- 96. SSL Certificateにて「CustomSSL」を選択 プルダウンより先程認証した証明書を選択 CustimSSL Client Supportは必ず「SNI」を選択すること 3. AWS CertificateManager設置 ドメイン名 ドメイン名
- 100. ご清聴ありがとうございました。