株式会社データクラフト大内 寛和

急なトラフィック増にも動じない、 Amazon S3 と CloudFront を活用した Web サイト構築

NetCOBOL による AWS 活用事例と AWS を活用した事例セミナー2013/02/22 （金）

大内 寛和

株式会社データクラフト 開発部・ソフトウェアエンジニア

・自社 Web サイトの開発・保守

・社内インフラ担当

fb: hirokazu.ouchi

コアメンバー

自己紹介

・写真素材の販売

株式会社 データクラフト

ロイヤリティーフリーの写真素材印刷、マルチメディア、 WEB デザイ

ンなど幅広い用途に利用可能な、ロイ

ヤリティーフリー・デジタルフォトコ

レクション。http://www.sozaijiten.com/

ストックフォトのダウンロード販売国内・海外のフォトブランドから 210

万点

以上の写真素材を提供するストック

フォ

トダウンロード販売サイト。http://imagenavi.jp/

・各種 IT ソリューションの企画提案・開発

株式会社 データクラフト

プロモーション Web サイト独立行政法人 宇宙航空研究開発機構（ JAXA ）様

食品通販 e コマースサイト株式会社えぞキッチン 様

地図通販 e コマースサイトマップショップ株式会社 様

食品通販 e コマースサイト佐藤水産株式会社 様

・ S3 でお手軽ホスティング

・動的 Web サイトにおける S3 の使いどころ

・ CloudFront で快適な Web サイトに

・まとめ

本日のお話

・ S3 でお手軽ホスティング

・動的サイトにおける S3 の使いどころ

・ CloudFront で快適なサイトに

・まとめ

本日のお話

・とあるコンテンツを紹介した Web サイト

格安レンタルサーバで運用

静的コンテンツで構成

・スマホアプリ公開後、トラフィック急増

アプリ内の広告欄から Web サイトへ頻繁にアクセス

事例 – 概要

WebServe

r

急なトラフィック増にやられました

株式会社データクラフト大内 寛和

急なトラフィック増にも動じない、 Amazon S3 と CloudFront を活用した Web サイト構築ができるようになりました！

NetCOBOL による AWS 活用事例と AWS を活用した事例セミナー2013/02/22 （金）

痛い経験のおかげで

✔ 大量のトラフィックを捌ける

✔安価

✔構築・保守が容易

事例 - 相談者のサーバに対する要望

この要望にお応えしてくれる

サービスは？

Amazon S3 ！

・インターネットストレージサービス

容量制限無し。ピーク時には、秒間 800,000 リクエストを処理。

・従量課金

ストレージ料金、リクエスト料金、データ転送料金

・ストレージタイプ

スタンダード（堅牢性： 99.999999999% ）、低冗長化（堅牢性：

99.99% ）の 2 種類。

低冗長化はスタンダードに比べ、ストレージ料金が 2 ～ 3 割ほど安い。

※オブジェクトをロストすると、 HTTP 405 が返される。

S3 の特徴

10,000GET で $0.01 1GB の送信で $0.201

・静的 Web サイトのホスティング

ファイル（オブジェクト）にユニークな URL が付与される。

・リダイレクト (HTTP 301) 機能

バケット、オブジェクト、それぞれに設定できる。

・ルートドメイン ( 例 .http://mysite.com) をホスト

以前は構築手順が複雑だったが、最近、簡単にできるように。

（ DNS は、 Route53 を使う必要あり）

S3 の特徴（ホスティング）

全コンテンツを S3 に配置 作業時間は、 10分程度！

びくともしない

・ S3 でお手軽ホスティング

・動的 Web サイトにおける S3 の使いどころ

・ CloudFront で快適な Web サイトに

・まとめ

本日のお話

Web サーバへのトラフィックが増えた場合の一般的な対処

スケールアップ

WebServer

WebServer

WebServer

WebServer

WebServer

WebServer

Load Balancer

スケールアウト

＄＄＄＄＄＄

サーバ費用を抑えた負荷対策

・ Web サーバへのアクセスは、静的コンテンツへの

リクエストが多い。

・変化が少ない動的コンテンツは、静的コンテンツ

化しやすい。

負荷を S3 に分散させ、 Web サーバの費用を抑え

る！

S3 適用例

http://mysite.com

静的コンテンツは S3 から配信

WebServer

Users

http://static.mysite.com

S3

<img src=“/img/top.jpg” /> ↓ ↓静的コンテンツの URL を S3 の URL に書き換える ↓<img src=“http://static.mysite.com/img/top.jpg” />

※ Apache の場合、 mod_ext_filter/mod_sed の機能で、 動的に書き換えが可能

画像ファイル、 js 、 css ファイルを配置する

全コンテンツを静的化して S3 から配信

全コンテンツを静的化して、 s3cmd等を使い S3 に転送する

EC2 を利用する場合は、コンテンツの更新時のみ、インスタンスを立ち上げる

http://admin.mysite.com

WebServer

Users

http://mysite.com

S3

ブログサイト、コーポレートサイト、キャンペーンサイトに適用しやすい。

全コンテンツを配置する

期間限定で、動的コンテンツを静的化して S3 から配信

http://mysite.com WebServer

Users

http://event.mysite.com

動的コンテンツを静的化して S3 に転送する

TV 紹介される等、トラフィック増が予想される期間、頻繁にアクセスされる

動的コンテンツが分かっている場合、動的コンテンツを静的化して S3 に配置

する。

S3

静的コンテンツ化した動的コンテンツを配置する

S3 に配置したコンテンツへのアクセスは、 S3 にリダイレクトする

期間限定で、動的コンテンツを静的化して S3 から配信（後始末）

http://mysite.com WebServer

Users

http://event.mysite.com Web サーバへリダイレクトさせる

S3

期間終了後、 S3 のリダイレクト機能を使って、 S3 のアクセスを Web サーバ

に戻すこと。

・ S3 でお手軽ホスティング

・動的 Web サイトにおける S3 の使いどころ

・ CloudFront で快適な Web サイトに

・まとめ

本日のお話

S3 は、素晴らしいサービス

しかし、コンテンツの転送速度は・・・

コンテンツの転送速度を高速にして

UX を高めたい！

この要望にお応えしてくれる

サービスは？

CloudFront ！

・高速で信頼性の高い CDN サービス

世界中のエッジサーバからコンテンツを高速配信

・従量課金制

リクエスト料金、データ転送料金、無効リクエスト料金

・自由度の高いオリジン指定

EC2 や S3 の他に、 AWS 以外のサーバからも利用できる

CloudFront の特徴

10,000件で$0.0095

1件で $0.005（最初の 1000件はタダ）1GB の送信で $0.201

CloudFront 適用例

http://mysite.com

静的コンテンツは S3 から配信

WebServer

Users

http://static.mysite.com

S3

<img src=“/img/top.jpg” /> ↓ ↓静的コンテンツの URL を S3 の URL に書き換える ↓<img src=“http://static.mysite.com/img/top.jpg” />

※ Apache の場合、 mod_ext_filter/mod_sed の機能で、 動的に書き換えが可能

http://mysite.com

静的コンテンツは CloudFront から配信

WebServer

Users

http://static.mysite.com

S3

CloudFront

http://cdn.mysite.com

<img src=“/img/top.jpg” /> ↓ ↓静的コンテンツの URL を CloudFront の URL に書き換える ↓<img src=“http://cdn.mysite.com/img/top.jpg” />

http://mysite.com

静的コンテンツは CloudFront から配信

WebServer

Usershttp://static.mysite.com

CloudFront

http://cdn.mysite.com

静的コンテンツ配信用のバーチャルホストを立てて、そのホストをオリジンサーバに指定する

全コンテンツを静的化して S3 から配信

http://admin.mysite.com

WebServer

Users

http://mysite.com

S3

http://admin.mysite.com

全コンテンツを CloudFront から配信

WebServer

Users

CloudFront

http://mysite.com

http://static.mysite.com

S3

このパターンは SEO 的に問題があるかもしれません。CDN から配信された Web サイトは、 Googleの検索結果で、サイトリンクが表示されなくなるという情報が・・・

SEO は気にしない！というケース（短期間の配信）であれば全く問題ないかと思います。

Google検索結果より

サイトリンク

・キャッシュコンテンツを早急に更新したい場合

・コンテンツの URL を変更

・キャッシュを無効化

AWS管理コンソールで、一つづつ URL を指定して無効化する。

完了までに 10分くらいかかる。

CloudFront導入時の注意点

<img src=“http://cdn.mysite.com/img/top.jpg” /> ↓<img src=“http://cdn.mysite.com/img/top2.jpg” />

<img src=“http://cdn.mysite.com/img/top.jpg” /> ↓<img src=“http://cdn.mysite.com/img/top.jpg?20130222” />

<img src=“http://cdn.mysite.com/img/top.jpg” /> ↓<img src=“http://cdn.mysite.com/img/20130222/top.jpg” />

✔ コンテンツのファイル名を変更

✔ コンテンツのファイル名を変更クライアントの環境によっては、意図通り動作しないのでオススメしません

✔ コンテンツのファイル名を変更要 rewrite ( バージョン指定を無しに変換）

・ S3 でお手軽ホスティング

・動的 Web サイトにおける S3 の使いどころ

・ CloudFront で快適な Web サイトに

・まとめ

本日のお話

まとめ

✔ S3 と CloudFront を利用すれば、高負荷に耐え、

UX の高い Web サイトを安価に構築できる。

✔ 今後、 Web サイトの構築および改善の際は、

S3

と CloudFront の利用を検討すべき。

✔ AWS を用いることで、圧倒的なスピードでサー

ビ　　

　 ス構築・問題解決できることを常識とする。　

JAWS-UG 札幌