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

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社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
※この比較は根本的に仕組みが異なるので、あまり意味がありませんが・・・・。

• WordPressのセキュリティってなに？？
• WordPressのアップデートってなに？？
WordPress本体やデータベースを
一般には公開しないので安心です！！
２．セキュリティ、メンテナンスがわからない
※注意
とはいえ、ちゃんとアップデートはしてくださいね。。。

• 例えば、イベントサイトなど
http://kobe2011.wordcamp.jp/
※イベントが終わればコンテンツは更新しない
• 「ホームページリニュアルしました」から更新がない
コーポレートサイト
※管理者不在による将来的な不安、脆弱性問題
３．もうサイト更新しないんだけど。。。
永代供養できるのでサーバー代が節約できます。

注意事項・制限事項
• データベース・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」を選択
ドメイン名

StaticPress用のS3を作成できました。
ドメイン名

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

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

3.公開領域と独自ドメインを紐付け
※AWS R53とS3を連携
DNS
(Route53)
S3CDN
(CloudFront)
サーバー
(WordPress)
サイト閲覧者
設定した独自ドメインで、用意した静的ウエブサイトにア
クセスできるように、紐付けを行います。

「Buy domain」を選択
ドメイン名

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

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

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/

「Lightsail」を選択

「Let’s get started」を選択

「WordPress」を選択

「$5」を選択
※CloudFront、S3で公開するので
スペックは最小限でOK

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

6. WordPressの設定
DNS
(Route53)
S3CDN
(CloudFront)
サーバー
(WordPress)
サイト閲覧者
作成したサーバーにアクセスして、
StaticPress、StaticPressS3をインストール、公開してみる。

6.WordPressの設定
パスワードを調べるために
「Manage」を選択
パスワードを取得する(サーバー管理画面表示)

「Connect using SSH」を選択
パスワードを取得する(コンソール起動)
IP
IP IP

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

sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
sudo /opt/bitnami/ctlscript.sh restart apache
Bitnamiアイコンの非表示設定
IP
IP
IP

URL：http://[IPアドレス]/wp-admin/
ユーザー名：user
パスワード：さきほど表示された値
管理画面からログインする
IP

Plugins → Add New
を選択
StaticPressをインストール

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

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;
}

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をインストールします。
StaticPressS3をインストール
IPIP

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

WordPressの管理画面から、
「Settings」→「Permalinks」を選択
「CustomStructure」に「/%postname%.html」と入力
「Save Changes」を選択
パーマリンクの設定を変更する。
IP
IP

Static URL：公開するサイトのURL
Save DIR：保存先パス
/opt/bitnami/apps/wordpress/htdocs/static/
StaticPressの設定をする。
ドメイン名

Key
Key
バケット名
AWS Access Key：作成したIAMのAccessKey
AWS Secret Key：作成したIAMのSecretKey
AWS Region：「US_EAST_1」を選択
S3 Bucket：「aws-website-****」を選択
StaticPressS3の設定をする。

「Rebuild」を選択
StaticPressでRebuildする

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

URL：http://[ドメイン名]
表示されました！！
サイトを確認。

補足：費用について
概算ですが、以下のような費用感となります。
※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サイト内検索で対応
・コンテンツ更新したら「再構築」！！

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証明書発行
メール受信
(Amazon SES)

1.Amazon SESの設定
SESを選択
※該当ドメインでメールを受信できるのであれば必要なし

Rule Setsを選択

Create a Receipt Ruleを選択

ドメイン名を入力
「Add Recipients」を選択
「Verify domain」を選択
ドメイン所有者であることを認証する。
ドメイン名

「Use Route 53」を選択
ドメイン名
ドメイン名

「Email Receiving Record」を選択
「Create Record Sets」を選択
ドメイン名
ドメイン名

「Next Step」を選択
ドメイン名

「S3」を選択
※S3にファイルとして保存するため。
メールを受信したときのActionを設定

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

「Rule name」に適当な名前を入力

メールを受信したときのActionを選択
「Create Rule」を選択
ドメイン名
バケット名

テストでメールを送信してみる。
メール受信できました。
バケット名
ドメイン名

2.SSL/TLS証明書を取得する
※AWS CertificateManager設定
DNS
(Route53)
S3CDN
(CloudFront)
サーバー
(WordPress)
サイト閲覧者
SSL
SSL証明書発行
メール受信
(Amazon SES)

2. AWS CertificateManager設定

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

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

メールを確認後
「続行」を選択
ドメイン名
ドメイン名
ドメイン名
ドメイン名
ドメイン名

受信したメールの認証URLにアクセス
ドメイン名
バケット名

「I Approve」を選択
ドメイン名
ないしょ

ドメイン名
ないしょ

ドメイン名

3.SSL/TLS証明書を設置する
※AWS CloudFrontに設置
DNS
(Route53)
S3CDN
(CloudFront)
サーバー
(WordPress)
サイト閲覧者
SSL
SSL証明書発行
メール受信
(Amazon SES)

3. AWS CertificateManager設置
「CloudFront」を選択

「Edit」を選択
ドメイン名

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

15分位待つ

4. StaticPress設定変更・動作確認
StaticURLを「https://ドメイン名/」にし、Rebuild
ドメイン名
Key
Key

4. StaticPress設定変更・動作確認
ドメイン名
ドメイン名
ドメイン名

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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a 2017/02/04 WrodBench倉敷第一回勉強会 StaticPress+S3で安全で落ちないサイトを作ろう

Similar a 2017/02/04 WrodBench倉敷第一回勉強会 StaticPress+S3で安全で落ちないサイトを作ろう (20)

Más de Takeshi Furusato

Más de Takeshi Furusato (17)