2017/02/04 wrodbench倉敷 第一回勉強会...
TRANSCRIPT
自己紹介
• 名前:古里 武士(ふるさと たけし)
• 倉敷出身 倉敷在住
• 株式会社イー・ネットワークス 所属
• 総務・人事、プログラマ、インフラエンジニア
• WordBench倉敷 モデレーター
• JAWS-UG岡山 副支部長
• 好きなWordPressプラグイン:StaticPress
• 好きな食べ物:カレー
カレー好きです。
アジェンダStaticPress+S3で安全で落ちないサイトを作ろう
• WordPressのお悩み。
• StaticPressってなに?
• AmazonS3ってなに?
• ご利用パターン
• 注意事項・制限事項
• 作ってみましょう。
• まとめ
※このスライドは後ほど公開いたします。
WordPressのお悩み。
• サイトが遅い!!重い!!
• サイトが攻撃を受けた!!改ざんされた!!
主な原因の1つは
「閲覧の度にプログラムが動いているから」
→根本的に解決する方法の1つが
「StaticPressとAmazon S3」です。
StaticPressってなに?
StaticPress は、WordPress サイトを
静的HTMLに変換するためのプラグインです!!
http://ja.staticpress.net/
MADE IN JAPAN!!※注意
静的HTML:
プログラムが動作しない普通のHTML
動的HTML:
プログラムが動作して生成されるHTML
AmazonS3ってなに?
• Amazon Web Servicesが提供するサービスの1つ
• 2006年から開始
• 複数のデータセンターで管理(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本体やデータベースを
一般には公開しないので安心です!!
ご利用パターン2.セキュリティ、メンテナンスがわからない
※注意とはいえ、ちゃんとアップデートはしてくださいね。。。
• 例えば、イベントサイトなど
http://kobe2011.wordcamp.jp/
※イベントが終わればコンテンツは更新しない
• 「ホームページリニュアルしました」から更新がないコーポレートサイト
※管理者不在による将来的な不安、脆弱性問題
ご利用パターン3.もうサイト更新しないんだけど。。。
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設定変更・動作確認
ドメイン名
ドメイン名
ドメイン名
ご清聴ありがとうございました。