Amazon S3による静的Webサイトホスティング

Amazon S3による静的Webサイトホスティング

1

Who am I ?
堀内康弘 (ほりうちやすひろ)
• 1978年年⽣生まれ⼭山梨梨県出⾝身

AWS テクニカルエバンジェリスト

• 130回以上の講演
※2012年年の実績
• 35回以上のハンズオン
• 120本以上のブログ記事(AWSの最新情報を投稿)
Amazon Web Services ブログ
http://aws.typepad.com/aws_̲japan/

10+ years web engineer in startups
• Director of V-‐‑‒cube (perl), 2001 -‐‑‒ 2006
• CTO of FlipClip (perl), 2006 -‐‑‒ 2009
• CTO of gumi (python), 2009 -‐‑‒ 2012

@horiuchi
horiyasu

フォロー、友達申請歓迎!

Amazon S3はAWSが提供する
30以上のサービスのうちのひとつ
お客様のアプリケーション
ライブラリ & SDKs
Java, PHP, .NET,
Python, Ruby, node.js

IDEプラグイン
Eclipse
Visual Studio

メッセージ

Amazon SNS
Amazon SQS
Amazon SES

Web管理理画⾯面
Management
Console

認証
AWS IAM

モニタリング
Amazon
CloudWatch

検索索エンジン
Amazon Cloud Search

デプロイと⾃自動化

AWS Elastic Beanstalk
AWS Cloud Formation
AWS OpsWorks

ワークフロー管理理
Amazon SWF

コンテンツ配信
Amazon CloudFront

分散処理理
Elastic MapReduce

トランスコード
Amazon Elastic Transcoder

コンピュータ処理理
Amazon EC2

クラウドスト
レージサービス

ストレージ

アプリケーション
サービス

データベース

Auto Scale

Amazon S3

Amazon EBS
Amazon Glacier
AWS StorageGateway

Amazon RDS
Amazon DynamoDB
Amazon ElastiCache
Amazon Redshift

ネットワーク & ルーティング
Amazon VPC / Amazon Elastic Load Balancer / Amazon Route 53 /AWS Direct Connect

Region

デプロイ&管理理

AZ

AWS グローバルインフラ
リージョン、アベイラビリティゾーン、エッジロケーション

インフラストラク
チャサービス

クラウドストレージ Amazon S3の特徴は?
S3
データ置くだけ。イ
ンフラ、電源、気に
しない。
容量量無制限。

世界中の8拠点から選択

東京リージョン

データセンターA

バケット

保存するデータは、
⾃自動で暗号化する
ことも可能
データセンターB

データセンターC

3か所以上で
⾃自動複製

安価な従量量課⾦金金
ファイル(バイナリ、
テキスト、画像、動画)

例例：1GB/⽉月 – 約10円

⾼高い耐久性で
データ失わない:
99.999999999%

まず押さえるべきAmazon S3の⽤用語
バケット = フォルダ
• 1アカウントあたり最⼤大100
• 名前がユニークな必要あり

オブジェクト = ファイル
• URLによるアドレスが付与
• バケット内に無制限にオブジェクトを置くことが可能
• 1オブジェクトのサイズは5TBまで

Amazon S3のネームスペース
Amazon S3
バケット

オブジェクト

バケット

オブジェクト

オブジェクト

オブジェクト

バケット
オブジェクト

オブジェクト

Amazon S3 – 実例例にあてはめてみる -‐‑‒
Amazon S3
mculver-images
Beach.jpg

media.mydomain.com

2009/maui/sun.jpg

img1.jpg

img2.jpg

public.blueorigin.com
Installer.msi

img/pic1.jpg

Amazon S3のコンセプト
Durable(堅牢牢であること)
Available (いつでも利利⽤用可能であること)
Scalable (スケールすること)
Secure (安全であること)
Fast (⾼高速に動くこと)
Simple (シンプルに使えること)
Cost Eﬀective (低コストであること)

Durable(堅牢牢であること)
データを失わない設計
• データを3箇所以上にレプリケーション
• 障害検知とデータ修復復

99.999999999%の堅牢牢性
• 3つ以上同時にDCが消失しない限りデータを失わな
い

Available(常に利利⽤用可能なこと)
常に利利⽤用可能なように設計
• 99.9%可⽤用性SLA、実際はほぼ100%

計画停⽌止無し
全世界からどの地域でもインターネット経由で
利利⽤用可能
• 異異なる8つのリージョンから選択

Scalable(スケールすること)
論論理理的には無限にスケールする
どれだけのファイルでも保存可能
• 1バイトから、いくらでも保存可能
• 1つのファイルサイズは最⼤大5TBまで

Secure(安全であること)
全ての通信はSSL暗号化
認証・認可機能を持つ
• ACL/バケットポリシー/IAMポリシー
• ユーザアクセスコントロール

暗号化機能を持つ
• サーバサイド/クライアントサイド暗号化

ログ機能
認定・認証の取得
• ISO27001/PCI-‐‑‒DSS/SOC1など

Fast(⾼高速であること)
ピーク時最⼤大85万リクエスト/秒
常に安定したレイテンシ
世界8か所にリージョン展開
• 最も近い場所を利利⽤用可能

専⽤用線で直結も可能

Simple(シンプルに使えること)
ファイルのPUT/GET/DELETE/LIST
• これだけ。とってもシンプル
Plug & Play: クラウドストレージを簡
単に使うための3rdパーティーソリュー
ションが豊富に存在。ソリューション
を使う事で簡単に利利⽤用する事が可能

SDK: アプリケーションデベロッパー
は、S3 SDKを使ってアプリケーション
を開発することが可能
Internet Web
Services API
HTTP(S)

S3

&
/or

Glacier

S3

AWS
Storage
Gateway

Cost Eﬀective(低コストなこと)
従量量課⾦金金で使った分だけお⽀支払い
初期費⽤用もいらない

Amazon S3の価格
ストレージ料料⾦金金

リクエスト料料⾦金金

スタンダード

低冗⻑⾧長化※

リクエストタイプ

最初の1TB/⽉月

$0.100/GB
$0.085/GB

$0.068/GB

次の450TB/⽉月

$0.075/GB
$0.070/GB

$0.056/GB

次の4PB/⽉月

$0.065/GB

$0.052/GB

次の5PB/⽉月

$0.060/GB

$0.044/GB

$0.005 1,000リクエストあたり

削除リクエスト

Free

GETおよびその他リクエスト

$0.004 10,000リクエストあた

$0.060/GB

次の500TB/⽉月

PUT,COPY,POST,LISTリクエスト

$0.080/GB

次の49TB/⽉月

価格

データ転送料料⾦金金

り

※低冗⻑⾧長化ストレージ(RRS)
　２拠点への複製により堅牢牢性が99.99%
転送⽅方向

価格

IN

全てのデータ転送「IN」

$0.000/GB

OUT

最初の1GB/⽉月

$0.000/GB

10TBまで/⽉月

$0.201/GB

次の40TB/⽉月

$0.158/GB

次の100TB/⽉月

$0.137/GB

次の350TB/⽉月

$0.127/GB

350TB/⽉月以上

お問い合わせ

同⼀一リージョン内でのデータ転送は無料料
別リージョンまたはCloudFrontへは$0.09/GB

2013年年9⽉月時点の東京リージョン価格表

S3を使って静的なウェブサイトを
ホスティングする

S3でウェブサイトをホスティングする理理由
運⽤用いらず
•
•
•
•
•

データがなくならないので、バックアップの必要なし
ハードウェア障害でサイトにアクセスできなくなる⼼心配なし
容量量無制限なのでディスクがあふれる⼼心配なし
⼤大量量トラフィックによりサイトが落落ちる⼼心配なし
操作はシンプルで簡単

安い

• 従量量課⾦金金で1ヶ⽉月10円からはじめられる

技術で料料⾦金金を下げることが可能

例例1: ⽉月間10000PVのサイトが⽉月157円
想定スペック
• ページ数100
• 1ページ当たりのファイル数 30
• 1ページ当たりの平均サイズ 1MB
• ⽉月間PV 10000
項⽬目

単価

ストレージ

10円/GB

リクエスト

0.4円/10000リクエスト

転送量量

15.7円/GB

合計

⾦金金額
1円
12円
144円

157円

例例2：⽉月間10000PVのサイトが⽉月76.5円
想定スペック
• ページ数100
• 1ページ当たりの平均サイズ 500KB
• ⽉月間PV 10000
項⽬目

単価

ストレージ

10円/GB

リクエスト


12円

転送量量

15.7円/GB

64円

合計

⾦金金額
0.5円

76.5円

ファイルサイズを⼩小さくすると料料⾦金金が下がる!!

例例3: ⽉月間100万PVのサイトが⽉月15,601円
想定スペック
• ページ数100
• 1ページ当たりの平均サイズ 1MB
• ⽉月間PV 10000
項⽬目

単価

ストレージ

10円/GB

リクエスト


転送量量

15.7円/GB

合計

⾦金金額
1円
1,200円
14,400円

15,601円

100万PV 15,000円は⾼高いか?
⼀一般的な広告をサイトに設置した場合

100万PV x クリック率率率 1% x 単価 10円 = 10万円

広告PV単価 = 0.1円
S3 PV単価 = 0.015円

S3を使って静的Webサイトを公開する⼿手順
1. Webサイト⽤用にS3のバケットを設定する。
2. バケット内のファイルがアップロードした際、⾃自動的
に公開されるようバケットポリシーを追加する。
3. HTMLファイルをアップロードする。
4. S3のwebsite endpointにアクセスし、ウェブサイト
が表⽰示されることを確認する。

Webサイト⽤用にバケットを設定する
[All Buckets]をクリックしてバケット⼀一覧ページを表⽰示します。

1. [All Buckets]をクリック

⾍虫めがねボタンをクリックして右側にバケットのプロパティを表⽰示します

1. ⾍虫めがねボタンをクリック

[Static Website Hosting]をクリックし、静的ウェブサイト⽤用の設定項⽬目を
表⽰示します。

1. [Static Website Hosting]をクリック

[Enable website hosting]を選択し、Index 、Error Documentに
ファイル名を⼊入⼒力力したら、[Save]ボタンをクリックし設定を有効にします。
1. [Enable website hosting]をクリック

2. [index.html]と⼊入⼒力力
3. [error.html]と⼊入⼒力力

4. [Save]をクリック

Endpointを確認しておきます。
•

Endpoint経由でアクセスすることで、パス指定なしのURLでアクセスした場合に、Index
Documentに指定したファイル(index.html)が、ファイルが存在しないURLにアクセスした場
合にError Documentに指定したファイル(error.html)が表⽰示されるようになります。

Endpointを確認しておきます。

バケットポリシーを設定する
バケットポリシーを設定し、このバケットにアップロードされたファイルは
⾃自動的に公開されるように設定します。
プロパティから[Permissions]をクリックし、[Add bucket policy]をクリッ
クして、Bucket Policy Editorを起動します。
1. [Permissions]をクリック

2. [Add bucket policy]をクリック

Editorが表⽰示されたら、下側にある [Sample Bucket Policies]をクリック
し、サンプルページを表⽰示します。サンプルページは別ウィンドウで開きま
す。

1. [Sample Bucket Policies]をクリック

[Granting Permission to Anonymous User]を⾒見見つけて、その内容をコ
ピーします。

1. この部分をコピー

コピーしたポリシーをEditorに貼り付けます。

1. この部分に貼り付け

貼り付けた内容の[bucket]という部分を⾃自分のバケット名に書きかえます。
書きかえ終えたら、[Save]ボタンをクリックし設定を保存します。

1. この部分を⾃自分のバケット名に書きかえる

2. [Save]をクリック

バケットポリシーの保存が成城に完了了すると
[Add bucket policy]が[Edit bucket policy]に変わります。

Edit bucket policyに変わっている

HTMLファイルをアップロードする
バケットにインデックスページとエラーページ⽤用のファイルをアップロード
します。
バケット名をクリックし、バケット内に移動したら、Uploadボタンをクリッ
クしアップロードウィザードを開始します。
1. バケット名をクリック

2. [Upload]をクリック

[Add Files]ボタンをクリックし、サンプルファイルから、index.html、
error.htmlを選択します。

選択したファイルが表⽰示されていることを確認して、[Start Upload]ボタン
をクリックします。

選択したファイル名が表⽰示されている

1. [Start Upload]をクリック

ファイルのアップロードが完了了するのを待ちます。

ステータスが[Done]になったら保存完了了

ウェブサイトが表⽰示されるか確認する
ファイルのアップロードが完了了したら、Webサイト⽤用のEndpointにブラウザ
からアクセスします。
Webサイト⽤用のEndpointはバケットの[Properties]の[Static Website
Hosting]から確認できます。

Endpointを確認

Webサイト⽤用のEndpointにブラウザからアクセスし、ウェブサイトが表⽰示さ
れることを確認します。

ファイルが存在しないURLにアクセスし、エラーページが表⽰示されることも
確認します。

Route53を使って
独⾃自ドメインで運⽤用する

What is Amazon Route 53?
AWSの提供するDNS権威サービス
DNSはドメイン名をIPアドレスに変換するイン
ターネット上の「電話帳」
DNSはTier-‐‑‒0サービスともよばれる
•

可⽤用性が最重要

⾼高い拡張性
“Route 53” はDNSサーバがポート53番で動作す
ることに由来
AWSでの柔軟、⾼高性能、⾼高可⽤用性を持つアーキテ
クチャを可能にするツール

Route

53

動作
www.example.com
はどこ?

知らないので権威サー
バに尋ねます

53
Users

DNS Resolver
1.2.3.4

Route 53
1.2.3.4

CloudFront and Route53
Global Network

Ashburn, VA

Amsterdam

Dallas/Fort Worth, TX

Dublin

Hayward, CA

Frankfurt

Jacksonville, FL

London

Los Angeles, CA
Miami, FL
New York, NY

Sao Paulo

Madrid
Milan

Newark, NJ

Paris

Palo Alto, CA

Stockholm

San Jose, CA
Seattle, WA
South Bend, IN

42 のエッジロケーション
(2013年年9⽉月末)

Chennai
Hong Kong
Mumbai
Osaka
Seoul
Singapore
Sydney
Tokyo

Route53を使⽤用しない時の動作

DNSサーバ

エンドユーザ

エンドユーザ

エンドユーザ

エンドユーザ

Route53使⽤用時の動作
Anycast IPアドレスが
使⽤用され,同じIPアドレスで
も近いサーバにつながる

エンドユーザ

エンドユーザ

エンドユーザ

エンドユーザ

Route 53 の設計原則
信頼性

⾼高速
AWS
サービスと
の統合

• 冗⻑⾧長化されたロケー
ション
• SLA設定

• 全世界で動作する
Anycastネットワーク
• 変更更の⾼高速伝播
• IAM
• エイリアス
• レイテンシベース
ルーティング
• DNSフェイルオーバー

使いやすさ

• コンソール
• プログラムできるAPI

経済性

• 安価
• つかった分だけの課⾦金金

柔軟性

• 重みづけ
ラウンドロビン

Route 53の特⻑⾧長的な機能
重みづけ
ラウンド
ロビン

• 異異なったレスポンスを
それぞれ頻度度を定義し
て利利⽤用可能

エイリアス
レコード

• ELB(Elastic Load
Balancer)、S3、
CloudFrontでのゾーン
名の利利⽤用

レイテンシ
ベース
ルーティング

• ユーザから、複数のAWS
リージョンで動作している
アプリケーションのうち、
最も近いところに誘導

DNS
フェイル
オーバー

• 訪問者のトラフィック
を⾃自動的に別の場所に
ルーティング

• ヘルスチェックの結果
CloudWatch をCloudWatchにパブ
メトリックスリッシュ
• グラフで表⽰示

• 可⽤用性、スケーラビリ
⾼高可⽤用性 DNS ティの⾼高いDNSサービ
ス

独⾃自ドメインで運⽤用するための事前準備
ドメインはご⾃自⾝身で取得しておいていただく必要があります。
お名前.comなどのドメインレジストラでドメインを取得してください。
Route53を使⽤用するには、ドメインのネームサーバの設定を⾏行行う必要があり
ますので、ドメインレジストラのページから設定を⾏行行えることを確認してお
いてください。

独⾃自ドメインで運⽤用するための事前準備
独⾃自ドメインで運⽤用する場合、バケット名をドメイン名と同じにする必要が
あります。例例えば、[horiuchi.hands-‐‑‒on.mobi]というホスト名を検討してい
る場合、バケット名も[horiuchi.hands-‐‑‒on.mobi]にする必要があります。
これ以降降の内容は[horiuchi.hands-‐‑‒on.mobi]というホスト名でS3を使っ
て、ウェブサイトを運⽤用する設定をしていきます。[horiuchi.hands-‐‑‒
on.mobi]というバケットはすでに作成し、Webサイト⽤用の設定も完了了して
いることを前提とします。

Amazon Route53 管理理メニューを開く
Route53の管理理ページに移動します。
1. [Services]をクリック

2. [All AWS Services]を選択

3. [Route53]をクリック

ホストゾーンを作成する
[Create Hosted zone]をクリックします。

Domain Nameにドメインレジストラで取得したドメイン名を⼊入⼒力力します。
Commentは必要であれば⼊入⼒力力します。

[Create Hosted Zone]をクリックして作成を実⾏行行します。

作成されると、Delegation Setとしてネームサーバが4つ割り当てられま
す。これをドメインレジストラのページでドメインのネームサーバーとして
設定します。

ドメインのネームサーバーを設定する
ここではお名前.comでのネームサーバーの設定の例例を紹介します。
ドメインのネームサーバーの変更更ページに移動します。

他のネームサーバーを利利⽤用を選択します。

4つのネームサーバーを⼊入⼒力力し、設定を保存します。

DNSレコードを作成する
Route53のページに戻り、ドメインを選択してから、[Go to Record Sets]
をクリックします。

[Create Record Set]をクリックします。

Nameにサブドメインを⼊入⼒力力し、ValueにS3のWebサイト⽤用Endpointを⼊入⼒力力
後、⼀一番下の[Create Record Set]をクリックし設定を保存します。

独⾃自ドメインでアクセスできることを確認する
独⾃自ドメインでアクセスできることを確認します。

静的ウェブサイトホスティング時に
知っておくと役に⽴立立つAmazon S3の機能

静的ウェブサイトホスティング時に
知っておくと役に⽴立立つAmazon S3の機能
ルートドメイン設定
サイトのアクセスログの保存
古くなったアクセスログの⾃自動アーカイブ
Webページリダイレクト
アクセス許可の評価ロジック

ルートドメインでのアクセス
S3 + Route53を組み合わせるとwww等がつかないルートドメイン(例例:
example.com)で、S3でホストしているウェブサイトへのアクセスが可能

サイトのアクセスログの保存
S3でホストされたウェブサイトへのアクセスログをS3のバケットに保存す
ることが可能
バケットのPropertyの「Logging」の項⽬目で設定可能
アクセスログ⽤用のバケットを別に⽤用意するのがオススメ
• 例例えば、xxx.example.comのアクセスログ⽤用に、
accesslog.xxx.example.comというバケットを⽤用意

古くなったアクセスログの⾃自動アーカイブ
指定の時間が経過したファイルを⾃自動的にAmazon Glacier (1GB⽉月約1円で
保存できる超安価なストレージサービス)にアーカイブ可能
バケットのPropertyの「Lifecycle」の項⽬目で設定可能
対象はバケット内のオブジェクト全て or 特定のプレフィックスで指定
Glacierに送るタイミング、完全に削除するタイミングを指定可能

Webページリダイレクト (ページ単位)
オブジェクトのメタデータを編集することでページ単位でのリダイレクトを
設定可能
Keyに「Website Redirect Location」を、Valueにリダイレクト先のオブ
ジェクトを指定
設定したオブジェクトにアクセスするとHTTPステータスード301を返すよ
うに

Webページリダイレクト (条件指定)
指定した条件にマッチするオブジェクトをリダイレクトさせることも可能
バケットのPropertyの「Static Website Hosting」の項⽬目で、「Enable
website hosting」を選択時、「Edit Redirection Rules」で指定可能
以下のようなことが可能
• 別のディレクトリへのリダイレクト
• 削除したディレクトリから404ページへ
• 404ならリダイレクト

<RoutingRules>
<RoutingRule>
<Condition>
<KeyPrefixEquals>images/</KeyPrefixEquals>
</Condition>
<Redirect>
<ReplaceKeyWith>index.html</ReplaceKeyWith>
</Redirect>
</RoutingRule>
</RoutingRules>

指定にはXML⾵風の独⾃自記法を使⽤用。詳しくは下記のドキュメント参照
http://docs.aws.amazon.com/AmazonS3/latest/dev/HowDoIWebsiteConfiguration.html

Webページリダイレクト (バケット単位)
バケット単位でリダイレクト設定を⾏行行い、サイト丸ごとリダイレクトするよ
う設定することも可能
バケットのPropertyの「Static Website Hosting」の項⽬目で、「Redirect
all request to another host name」を選択し、リダイレクト先を指定可能

アクセス許可の評価ロジック
次の⼿手順でアクセスの可否を判定
1. デフォルトDenyからスタート
2. 当てはまる全てのポリシーを評価
3. 明確はDenyがあれば、最終結論論を
”Deny”とする。
4. Allowがあれば、最終結論論を
”Allow”とする。
5. どれも当てはまらなければ最終結論論
を ”Deny”とする。

ちょっと⾼高度度な使い⽅方

Amazon CloudFrontを使って、
世界中のユーザーに⾼高速に配信する

CDNを使用しないときの動作

エンドユーザ
エンドユーザ
Webサーバ

エンドユーザ
エンドユーザ

DNSとHTTP
local DNS

ユーザ

example.com DNS

2

1
3

www.example.comにどうアクセスする?
1. クライアントは使用しているDNS解決用サーバに、
www.example.comのアドレスを問いあわせる

2. www.example.comがCNAMEレコードならば、さらにIPア
ドレス(Aレコード)が得られるまで問いあわせる

3. IPアドレスに向けてHTTPでアクセスする

CloudFront使用時のHTTP配信
様々なIPアドレス
が使用される

エンドユーザ

エンドユーザ

エンドユーザ

エンドユーザ

DNSとHTTP(CloudFront使⽤用時)
example.com DNS
local DNS
ユーザ
2

1

cloudfront.net DNS
3

地理
情報

4
5
CloudFront

1. クライアントは使⽤用しているDNS解決⽤用サーバに、cloudfront.example.comのアドレスを問いあわ
2.
3.
4.
5.

せる

cloudfront.example.comはXXXX.cloudfront.netのCNAME
XXXX.cloudfront.netのIPアドレスを問いあわせ。
cloudfront.netのDNSが地理理情報に応じたCloudFrontのIPアドレスを返す
CloudFrontのIPアドレスに向けてHTTPでアクセスする

Amazon CloudFront 管理理メニューを開く
CloudFrontの管理理ページに移動します。
1. [Services]をクリック

2. [All AWS Services]を選択

3. [CloudFront]をクリック

ディストリビューションを作成する
S3に配置したウェブサイトをCDN (CloudFront)経由で⾼高速に配信する設定
を⾏行行います。

2. [Create Distribution]をクリック

Delivery methodは[Download]を選択し、[Continue]をクリックします。

1. [Download]をクリック

2. [Continue]をクリック

Origin Domain NameにWebサイトを設置したS3のバケットを選択しま
す。
1. S3のバケットを選択

Default Cache Behavior Settingsはデフォルトのままにします。

Distribution Settings もデフォルトのままにします。

[Create Distribution]をクリックしディストリビューションの作成を開始し
ます。
1. [Create Distribution]をクリック

ディストリビューション⼀一覧ページに⾃自動的に移動します。
[Status]が InProgress となっており、作成中であることが確認できます。

Status が InProgressとなっている

しばらくして、StatusがDeployedに変わったら、作成完了了です。

Status が Deployedに変わったら作成完了了

CloudFront経由でのアクセスを確認する
以下のURLにブラウザからアクセスし、表⽰示されるか確認します。
•
•

トップページ: http://[CloudFrontのDomain Name]/index.html
画像ファイル: http://[CloudFrontのDomain Name]/img.jpg

まとめ
静的なサイトのホスティングはAmazon S3で決まり!
サーバーの運⽤用・管理理にかけていた時間をもっと価値
のあることに使おう!

参考⽂文献
Amazon S3
• http://aws.amazon.com/jp/s3/

Amazon S3 Getting Started Guide
• http://docs.amazonwebservices.com/AmazonS3/latest/gsg/

Amazon S3 Developer Guide
• http://docs.amazonwebservices.com/AmazonS3/latest/dev/

Amazon Web Services Japan blog
• http://aws.typepad.com/aws_̲japan/

Amazon S3による静的Webサイトホスティング

More Related Content

Amazon S3による静的Webサイトホスティング