2017/02/04 wrodbench倉敷 第一回勉強会...

StaticPress+S3で安全で落ちないサイトを

作ろう

WordBench倉敷 第１回勉強会

2017-02-04 ふるさとたけし

takeshi.furusato@gmail.com

自己紹介

• 名前：古里 武士(ふるさと たけし）

• 倉敷出身 倉敷在住

• 株式会社イー・ネットワークス 所属

• 総務・人事、プログラマ、インフラエンジニア

• WordBench倉敷 モデレーター

• JAWS-UG岡山 副支部長

• 好きなWordPressプラグイン：StaticPress

• 好きな食べ物：カレー

カレー好きです。

アジェンダStaticPress+S3で安全で落ちないサイトを作ろう

• WordPressのお悩み。

• StaticPressってなに？

• AmazonS3ってなに？

• ご利用パターン

• 注意事項・制限事項

• 作ってみましょう。

• まとめ

※このスライドは後ほど公開いたします。

WordPressのお悩み。

• サイトが遅い！！重い！！

• サイトが攻撃を受けた！！改ざんされた！！

主な原因の１つは

「閲覧の度にプログラムが動いているから」

→根本的に解決する方法の1つが

「StaticPressとAmazon S3」です。

StaticPressってなに？

StaticPress は、WordPress サイトを

静的HTMLに変換するためのプラグインです！！

http://ja.staticpress.net/

MADE IN JAPAN!!※注意

静的HTML：

プログラムが動作しない普通のHTML

動的HTML：

プログラムが動作して生成されるHTML

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

通常のWordPressとの比較• 通常のWordPressのサイト の場合

• StaticPress + AmazonS3 の場合

リクエストに応じてプログラムが動作、

HTMLを都度動的に生成し、サイト表示

予めStaticPressで静的HTML化して、S3に登録しておく。

リクエストに応じて、AmazonS3からHTMLを答え、サイト表示

AmazonS3

サーバーサイト閲覧者

サイト閲覧者 サーバー

ご利用パターン

1. サイト表示が遅い、急にアクセス増えた

2. セキュリティ、メンテナンスがわからない

3. もうサイト更新しないんですけどぉ。

ご利用パターン

• データが増えたり、サーバのスペックが悪い。

• 短期的、突発的にアクセスが急増• ガイ◯の夜明け、トレたまなど、TVで紹介される。

• Twitterやfacebookとかで炎上。

• どのくらいアクセス来るか予想不可能。

結果、サイトが表示されない。機会損失！！

1. サイト表示が遅い、急にアクセス増えた

StaticPress＋AmazonS3で公開するなら

秒間80万リクエスト処理できるので安心です！！

補足：性能について実際に、性能を確認してみました。

対象：

某求人情報サイト(WordPress) 投稿数:3,000件程度

検証：

対象に同時に100人がアクセスしたとき、1秒間に何件処理できるかを比較

A社VPS A社VPS A社VPS B社VPS B社VPSKUSANAGI

今回の構成

ディスク 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

※この比較は根本的に仕組みが異なるので、あまり意味がありませんが・・・・。

• WordPressのセキュリティってなに？？

• WordPressのアップデートってなに？？

StaticPress＋AmazonS3で公開するなら

WordPress本体やデータベースを

一般には公開しないので安心です！！

ご利用パターン２．セキュリティ、メンテナンスがわからない

※注意とはいえ、ちゃんとアップデートはしてくださいね。。。

• 例えば、イベントサイトなど

http://kobe2011.wordcamp.jp/

※イベントが終わればコンテンツは更新しない

• 「ホームページリニュアルしました」から更新がないコーポレートサイト

※管理者不在による将来的な不安、脆弱性問題

ご利用パターン３．もうサイト更新しないんだけど。。。

StaticPress＋AmazonS3で公開するなら

永代供養できるのでサーバー代が節約できます。

注意事項・制限事項

• データベース・PHPは動いていません。

→ 動的コンテンツ(スケジュール公開とか)できません。

• コメントは使えません。

→ Facebookコメントなどで代用

• サイト内検索も使えません。

→ Googleカスタムサーチで代用

• コンタクトフォームも使えません。

→ Googleフォームやセキュアフォームで代用

• UAでの切り替えプラグインも使えません

→ レスポンシブで対応

作ってみましょう

今回の構成

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

作ってみましょう

• 材料• ドメイン(お名前とかで取得)

• 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インストール・設定

作ってみましょう

1.独自ドメインでアクセスできるようにする※AWS R53設定

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

1.AWS R53の設定

サービス → Route53 を選択

1.AWS R53の設定

DNS managementの「Get started now」を選択

1.AWS R53の設定

「Create Hosted Zone」を選択しドメイン名を入力します。

1.AWS R53の設定

こちらをお名前.comなどのレジストラの管理画面からネームサーバーとして登録してください。

※お名前.comの場合は[ドメイン設定]→[ネームサーバー変更]より選択可能

ドメイン名

ドメイン名

作ってみましょう

2. StaticPressが出力する公開領域を作成※AWS S3,CloudFrontを作成

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

AWSでは、ソリューションの構築「静的ウェブサイトホスティング」というメニューがあり、これらを容易に作成するツールがあります。

2.AWS S3,CloudFrontを作成

「静的ウェブサイトのホスティング」を選択

ドメイン名を入力し「Create your website」を選択

2.AWS S3,CloudFrontを作成

ドメイン名

2.AWS S3,CloudFrontを作成

StaticPress用のS3を作成できました。

ドメイン名

2.AWS S3,CloudFrontを作成

後ほど、コンテンツを設置するので、サンプルファイルを削除しておく「Manage files in Amazon S3」を選択

ドメイン名

2.AWS S3,CloudFrontを作成

ファイル・ディレクトリを選択し、「アクション」から「削除」を選択

作ってみましょう

3.公開領域と独自ドメインを紐付け※AWS R53とS3を連携

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

設定した独自ドメインで、用意した静的ウエブサイトにアクセスできるように、紐付けを行います。

3.公開領域と独自ドメインを紐付け

「Buy domain」を選択

ドメイン名

「Choose existing domain」を選択該当のドメインをリストより選択サブドメインが必要ならそちらを入力Associate domainを選択

3.公開領域と独自ドメインを紐付け

ドメイン名

ドメイン名

ドメインを紐付けできました。

3.公開領域と独自ドメインを紐付け

ドメイン名

ドメイン名

作ってみましょう

4.StaticPressが出力するための権限を作成※AWS IAMを作成

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

この後で作るWordPressサーバーがS3にファイルを書き込みするための権限を作成します。

4.AWS IAMを作成

「IAM」を選択

4.AWS IAMを作成

「ユーザー」を選択

Key

4.AWS IAMを作成

「ユーザー追加」を選択

4.AWS IAMを作成

「ユーザー」を入力「プログラムによるアクセス」を入力「次のステップ：アクセス権限」を選択

4.AWS IAMを作成

「既存のポリシーを直接アタッチ」を選択フィルターに「S3」と入力「AmazonS3FullAccess」選択「次のステップ:確認」を選択

4.AWS IAMを作成

「ユーザーの作成」を選択

4.AWS IAMを作成

アクセスキーIDシークレットアクセスキー (表示リンクをクリックすると、表示されます。)をメモする。※あとで必要になります。※シークレットアクセスキーは後で取れないので、必ずこちらでメモしてください。

Key

作ってみましょう

5.WordPressサーバー作成※AWS Lightsailでサーバー作成する

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

AWS Lightsailを利用して、サーバーを作成します。https://amazonlightsail.com/

5.WordPressサーバー作成

「Lightsail」を選択

5.WordPressサーバー作成

「Let’s get started」を選択

5.WordPressサーバー作成

「WordPress」を選択

5.WordPressサーバー作成

「$5」を選択※CloudFront、S3で公開するので

スペックは最小限でOK

5.WordPressサーバー作成

WordPressサーバー完成しました。

IP

作ってみましょう

6. WordPressの設定

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

作成したサーバーにアクセスして、StaticPress、StaticPressS3をインストール、公開してみる。

6.WordPressの設定

パスワードを調べるために「Manage」を選択

パスワードを取得する(サーバー管理画面表示)

6.WordPressの設定

「Connect using SSH」を選択

パスワードを取得する(コンソール起動)

IP

IP IP

6.WordPressの設定

PASSWORD

黒い画面で以下を入力「cat bitnami_application_password 」WordPress管理画面のパスワードが表示されます。

パスワードを取得する(パスワード表示)

IP

6.WordPressの設定

黒い画面で以下を入力sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1sudo /opt/bitnami/ctlscript.sh restart apache

Bitnamiアイコンの非表示設定

IP

IP

IP

6.WordPressの設定

URL：http://[IPアドレス]/wp-admin/ユーザー名：userパスワード：さきほど表示された値

管理画面からログインする

IP

6.WordPressの設定

Plugins → Add Newを選択

StaticPressをインストール

検索キーワードに「StaticPress」と入力StaticPressの「Install Now」を選択

6.WordPressの設定StaticPressをインストール

6.WordPressの設定

黒い画面で以下を入力cd /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/staticpress/includes/sudo cp class-static_press.php class-static_press.php.orgsudo vim class-static_press.php

「画像つきの投稿が動かない」現象に対する対処

730行目あたり---if (is_wp_error($permalink))

continue;---の後に以下を追加

if (preg_match('/.*¥.html¥/.*/', $permalink, $m)) {continue;

}

Lightsailの画面からSSHを起動。以下を入力。

sudo apt-get install gitcd /home/bitnami/apps/wordpress/htdocs/wp-content/plugins/git clone https://github.com/megumiteam/staticpress-s3.gitsudo chown -R bitnami:daemon staticpress-s3

※gitとStaticPressS3をインストールします。

6.WordPressの設定StaticPressS3をインストール

IPIP

WordPressの管理画面から、「Instarlled Plugins」を選択StaticPress、StaticPressS3 PluginをActivateする。

6.WordPressの設定StaticPressをインストール

WordPressの管理画面から、「Settings」→「Permalinks」を選択「CustomStructure」に「/%postname%.html」と入力「Save Changes」を選択

6.WordPressの設定パーマリンクの設定を変更する。

IP

IP

Static URL：公開するサイトのURLSave DIR：保存先パス/opt/bitnami/apps/wordpress/htdocs/static/「Save Changes」を選択

6.WordPressの設定StaticPressの設定をする。

ドメイン名

Key

Key

バケット名

AWS Access Key：作成したIAMのAccessKeyAWS Secret Key：作成したIAMのSecretKeyAWS Region：「US_EAST_1」を選択S3 Bucket：「aws-website-****」を選択「Save Changes」を選択

6.WordPressの設定StaticPressS3の設定をする。

「Rebuild」を選択

6.WordPressの設定StaticPressでRebuildする

数分で完了します。こちらを行うことで、自動的にS3へファイルが保存されます。

6.WordPressの設定StaticPressでRebuildする

URL：http://[ドメイン名]表示されました！！

6.WordPressの設定サイトを確認。

デモ

補足：費用について概算ですが、以下のような費用感となります。

※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円／月

まとめ

StaticPress + S3を使うと。。。・WordPress本体はユーザーから隔離

→比較的安全

・急なアクセス増加にも耐えれる。

→機会損失の軽減

・検索・フォーム等の動的ページは動きません。

→ASPサービスやGoogleサイト内検索で対応

・コンテンツ更新したら「再構築」！！

Q&A

httpsって重要!!常時SSL!!

作ってみましょう• 材料

• 先程の環境※本件のためにCloudFrontを利用しました。

• 作り方1. 独自ドメインのメール受信環境を作る ※Amazon SESの設定

2. SSL/TLS証明書を取得する。 ※AWS CertificateManager設定

3. SSL/TLS証明書を設置する。 ※AWS CloudFrontに設置

4. StaticPressの設定変更、動作確認

• 補足今回、ドメイン認証による証明書を取得し、設置します。

証明書を取得するためには、ドメイン所有者である証明が必要です。

この証明(認証)はメール受信にて行います。

作ってみましょう今回の構成を無料でSSL化する。

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

SSL

SSL証明書発行(CertificateManager)

メール受信(Amazon SES)

作ってみましょう1.独自ドメインのメール受信環境を作る

※Amazon SESの設定

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

SSL

SSL証明書発行(CertificateManager)

メール受信(Amazon SES)

1.Amazon SESの設定

SESを選択

※該当ドメインでメールを受信できるのであれば必要なし

1.Amazon SESの設定

Rule Setsを選択

1.Amazon SESの設定

Create a Receipt Ruleを選択

1.Amazon SESの設定

ドメイン名を入力「Add Recipients」を選択「Verify domain」を選択

ドメイン所有者であることを認証する。

ドメイン名

1.Amazon SESの設定

「Use Route 53」を選択

ドメイン所有者であることを認証する。

ドメイン名

ドメイン名

1.Amazon SESの設定

「Email Receiving Record」を選択「Create Record Sets」を選択

ドメイン所有者であることを認証する。

ドメイン名

ドメイン名

1.Amazon SESの設定

「Next Step」を選択

ドメイン名

1.Amazon SESの設定

「S3」を選択※S3にファイルとして保存するため。

メールを受信したときのActionを設定

1.Amazon SESの設定メールを受信したときのActionを設定

「Create S3 backet」を選択※保存先の領域を作ります。作成するバケット名を入力、「Create Backet」を選択「Next Step」を選択

1.Amazon SESの設定

「Rule name」に適当な名前を入力「Next Step」を選択

メールを受信したときのActionを設定

1.Amazon SESの設定メールを受信したときのActionを選択

「Create Rule」を選択

ドメイン名

バケット名

1.Amazon SESの設定テストでメールを送信してみる。

メール受信できました。

バケット名

ドメイン名

作ってみましょう2.SSL/TLS証明書を取得する

※AWS CertificateManager設定

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

SSL

SSL証明書発行(CertificateManager)

メール受信(Amazon SES)

2. AWS CertificateManager設定

2. AWS CertificateManager設定

ドメイン名を入力「確認とリクエスト」を選択

ドメイン名

2. AWS CertificateManager設定

「確認とリクエスト」を選択

ドメイン名

メールを確認後「続行」を選択

2. AWS CertificateManager設定

ドメイン名ドメイン名

ドメイン名ドメイン名

ドメイン名

2. AWS CertificateManager設定

受信したメールの認証URLにアクセス

ドメイン名

バケット名

「I Approve」を選択

2. AWS CertificateManager設定

ドメイン名

ないしょ

2. AWS CertificateManager設定

ドメイン名

ないしょ

2. AWS CertificateManager設定

ドメイン名

作ってみましょう3.SSL/TLS証明書を設置する

※AWS CloudFrontに設置

DNS(Route53)

S3CDN(CloudFront)

サーバー(WordPress)

サイト閲覧者

SSL

SSL証明書発行(CertificateManager)

メール受信(Amazon SES)

3. AWS CertificateManager設置

「CloudFront」を選択

3. AWS CertificateManager設置

3. AWS CertificateManager設置

「Edit」を選択

ドメイン名

SSL Certificateにて「CustomSSL」を選択プルダウンより先程認証した証明書を選択CustimSSL Client Supportは必ず「SNI」を選択すること

3. AWS CertificateManager設置

ドメイン名

ドメイン名

15分位待つ

3. AWS CertificateManager設置

4. StaticPress設定変更・動作確認

StaticURLを「https://ドメイン名/」にし、Rebuild

ドメイン名

Key

Key

4. StaticPress設定変更・動作確認

ドメイン名

ドメイン名

ドメイン名

ご清聴ありがとうございました。