急なトラフィック増にも動じない、amazon...
TRANSCRIPT
![Page 1: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/1.jpg)
株式会社データクラフト大内 寛和
急なトラフィック増にも動じない、 Amazon S3 と CloudFront を活用した Web サイト構築
NetCOBOL による AWS 活用事例と AWS を活用した事例セミナー2013/02/22 (金)
![Page 2: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/2.jpg)
大内 寛和
株式会社データクラフト 開発部・ソフトウェアエンジニア
・自社 Web サイトの開発・保守
・社内インフラ担当
fb: hirokazu.ouchi
コアメンバー
自己紹介
![Page 3: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/3.jpg)
・写真素材の販売
株式会社 データクラフト
ロイヤリティーフリーの写真素材印刷、マルチメディア、 WEB デザイ
ンなど幅広い用途に利用可能な、ロイ
ヤリティーフリー・デジタルフォトコ
レクション。http://www.sozaijiten.com/
ストックフォトのダウンロード販売国内・海外のフォトブランドから 210
万点
以上の写真素材を提供するストック
フォ
トダウンロード販売サイト。http://imagenavi.jp/
![Page 4: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/4.jpg)
・各種 IT ソリューションの企画提案・開発
株式会社 データクラフト
プロモーション Web サイト独立行政法人 宇宙航空研究開発機構( JAXA )様
食品通販 e コマースサイト株式会社えぞキッチン 様
地図通販 e コマースサイトマップショップ株式会社 様
食品通販 e コマースサイト佐藤水産株式会社 様
![Page 5: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/5.jpg)
・ S3 でお手軽ホスティング
・動的 Web サイトにおける S3 の使いどころ
・ CloudFront で快適な Web サイトに
・まとめ
本日のお話
![Page 6: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/6.jpg)
・ S3 でお手軽ホスティング
・動的サイトにおける S3 の使いどころ
・ CloudFront で快適なサイトに
・まとめ
本日のお話
![Page 7: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/7.jpg)
・とあるコンテンツを紹介した Web サイト
格安レンタルサーバで運用
静的コンテンツで構成
・スマホアプリ公開後、トラフィック急増
アプリ内の広告欄から Web サイトへ頻繁にアクセス
事例 – 概要
![Page 8: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/8.jpg)
WebServe
r
![Page 9: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/9.jpg)
急なトラフィック増にやられました
![Page 10: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/10.jpg)
株式会社データクラフト大内 寛和
急なトラフィック増にも動じない、 Amazon S3 と CloudFront を活用した Web サイト構築ができるようになりました!
NetCOBOL による AWS 活用事例と AWS を活用した事例セミナー2013/02/22 (金)
痛い経験のおかげで
![Page 11: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/11.jpg)
✔ 大量のトラフィックを捌ける
✔安価
✔構築・保守が容易
事例 - 相談者のサーバに対する要望
![Page 12: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/12.jpg)
この要望にお応えしてくれる
サービスは?
![Page 13: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/13.jpg)
Amazon S3 !
![Page 14: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/14.jpg)
・インターネットストレージサービス
容量制限無し。ピーク時には、秒間 800,000 リクエストを処理。
・従量課金
ストレージ料金、リクエスト料金、データ転送料金
・ストレージタイプ
スタンダード(堅牢性: 99.999999999% )、低冗長化(堅牢性:
99.99% )の 2 種類。
低冗長化はスタンダードに比べ、ストレージ料金が 2 ~ 3 割ほど安い。
※オブジェクトをロストすると、 HTTP 405 が返される。
S3 の特徴
10,000GET で $0.01 1GB の送信で $0.201
![Page 15: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/15.jpg)
・静的 Web サイトのホスティング
ファイル(オブジェクト)にユニークな URL が付与される。
・リダイレクト (HTTP 301) 機能
バケット、オブジェクト、それぞれに設定できる。
・ルートドメイン ( 例 .http://mysite.com) をホスト
以前は構築手順が複雑だったが、最近、簡単にできるように。
( DNS は、 Route53 を使う必要あり)
S3 の特徴(ホスティング)
![Page 16: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/16.jpg)
全コンテンツを S3 に配置 作業時間は、 10分程度!
![Page 17: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/17.jpg)
びくともしない
![Page 18: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/18.jpg)
・ S3 でお手軽ホスティング
・動的 Web サイトにおける S3 の使いどころ
・ CloudFront で快適な Web サイトに
・まとめ
本日のお話
![Page 19: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/19.jpg)
Web サーバへのトラフィックが増えた場合の一般的な対処
スケールアップ
WebServer
WebServer
WebServer
WebServer
WebServer
WebServer
Load Balancer
スケールアウト
$$$$$$
![Page 20: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/20.jpg)
サーバ費用を抑えた負荷対策
・ Web サーバへのアクセスは、静的コンテンツへの
リクエストが多い。
・変化が少ない動的コンテンツは、静的コンテンツ
化しやすい。
負荷を S3 に分散させ、 Web サーバの費用を抑え
る!
![Page 21: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/21.jpg)
S3 適用例
![Page 22: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/22.jpg)
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 ファイルを配置する
![Page 23: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/23.jpg)
全コンテンツを静的化して S3 から配信
全コンテンツを静的化して、 s3cmd等を使い S3 に転送する
EC2 を利用する場合は、コンテンツの更新時のみ、インスタンスを立ち上げる
http://admin.mysite.com
WebServer
Users
http://mysite.com
S3
ブログサイト、コーポレートサイト、キャンペーンサイトに適用しやすい。
全コンテンツを配置する
![Page 24: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/24.jpg)
期間限定で、動的コンテンツを静的化して S3 から配信
http://mysite.com WebServer
Users
http://event.mysite.com
動的コンテンツを静的化して S3 に転送する
TV 紹介される等、トラフィック増が予想される期間、頻繁にアクセスされる
動的コンテンツが分かっている場合、動的コンテンツを静的化して S3 に配置
する。
S3
静的コンテンツ化した動的コンテンツを配置する
S3 に配置したコンテンツへのアクセスは、 S3 にリダイレクトする
![Page 25: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/25.jpg)
期間限定で、動的コンテンツを静的化して S3 から配信(後始末)
http://mysite.com WebServer
Users
http://event.mysite.com Web サーバへリダイレクトさせる
S3
期間終了後、 S3 のリダイレクト機能を使って、 S3 のアクセスを Web サーバ
に戻すこと。
![Page 26: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/26.jpg)
・ S3 でお手軽ホスティング
・動的 Web サイトにおける S3 の使いどころ
・ CloudFront で快適な Web サイトに
・まとめ
本日のお話
![Page 27: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/27.jpg)
S3 は、素晴らしいサービス
しかし、コンテンツの転送速度は・・・
![Page 28: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/28.jpg)
コンテンツの転送速度を高速にして
UX を高めたい!
![Page 29: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/29.jpg)
この要望にお応えしてくれる
サービスは?
![Page 30: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/30.jpg)
CloudFront !
![Page 31: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/31.jpg)
・高速で信頼性の高い CDN サービス
世界中のエッジサーバからコンテンツを高速配信
・従量課金制
リクエスト料金、データ転送料金、無効リクエスト料金
・自由度の高いオリジン指定
EC2 や S3 の他に、 AWS 以外のサーバからも利用できる
CloudFront の特徴
10,000件で$0.0095
1件で $0.005(最初の 1000件はタダ)1GB の送信で $0.201
![Page 32: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/32.jpg)
CloudFront 適用例
![Page 33: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/33.jpg)
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 の機能で、 動的に書き換えが可能
![Page 34: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/34.jpg)
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” />
![Page 35: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/35.jpg)
http://mysite.com
静的コンテンツは CloudFront から配信
WebServer
Usershttp://static.mysite.com
CloudFront
http://cdn.mysite.com
静的コンテンツ配信用のバーチャルホストを立てて、そのホストをオリジンサーバに指定する
![Page 36: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/36.jpg)
全コンテンツを静的化して S3 から配信
http://admin.mysite.com
WebServer
Users
http://mysite.com
S3
![Page 37: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/37.jpg)
http://admin.mysite.com
全コンテンツを CloudFront から配信
WebServer
Users
CloudFront
http://mysite.com
http://static.mysite.com
S3
このパターンは SEO 的に問題があるかもしれません。CDN から配信された Web サイトは、 Googleの検索結果で、サイトリンクが表示されなくなるという情報が・・・
SEO は気にしない!というケース(短期間の配信)であれば全く問題ないかと思います。
Google検索結果より
サイトリンク
![Page 38: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/38.jpg)
・キャッシュコンテンツを早急に更新したい場合
・コンテンツの 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 ( バージョン指定を無しに変換)
![Page 39: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/39.jpg)
・ S3 でお手軽ホスティング
・動的 Web サイトにおける S3 の使いどころ
・ CloudFront で快適な Web サイトに
・まとめ
本日のお話
![Page 40: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/40.jpg)
まとめ
✔ S3 と CloudFront を利用すれば、高負荷に耐え、
UX の高い Web サイトを安価に構築できる。
✔ 今後、 Web サイトの構築および改善の際は、
S3
と CloudFront の利用を検討すべき。
✔ AWS を用いることで、圧倒的なスピードでサー
ビ
ス構築・問題解決できることを常識とする。
![Page 41: 急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築](https://reader036.vdocuments.site/reader036/viewer/2022062313/5585af66d8b42ae3228b51ae/html5/thumbnails/41.jpg)
JAWS-UG 札幌