Edited at

【JAWS-UG関西女子会】#1 Amazon S3+CloudFrontで静的WEBサイトを高速化させよう

More than 3 years have passed since last update.


はじめに

この記事はJAWS-UG関西女子会「はじめて女子応援企画!事例から学ぶもくもく&もぐもぐ会」で

もぐもぐ 1 もくもくする際のテキストとなります。


本記事での目標


  • Amazon S3にWEBサイト表示用のファイル置き場をつくること

  • S3とCloudFrontを連携させてサイトアクセスの高速化すること

以下のような構成となります。

ELB000300.JPG


Amazon S3にWEBサイト表示用のファイル置き場をつくること


S3にWEBサイト表示用のファイル置き場を作るまでのながれ


  1. WEBサイト用にS3のバケットを作る

  2. バケットにファイルをアップロードする

  3. 設定確認をする


S3の用語について


S3:

Simple Storage Serviceの略
略称だけどみんなS3って言ってる




バケット:

S3上に作るフォルダ的なもの
 
名前がユニークである必要あり
 
1アカウントあたり最大100個まで





オブジェクト:

ファイルのこと

URLによるアドレスが付与
バケット内に容量無制限で置くことができる
1オブジェクトのサイズは最大5TBまで






WEBサイトエンドポイント:

S3上のオブジェクトへアクセスするためのURLのこと

エンドポイントは自動的に割り当てられる
※本手順では独自ドメインとの割当て方は省いています。

独自ドメインをしたい場合はサポートメンバーに言ってください!!





Amazon S3での設定手順


1.WEBサイト用にS3のバケットを作る

WEBサイトのファイル置き場としてS3にバケットを作ります。

 

1.1.メニューからS3をクリックします

AWS000116.JPG

 

1.2.Create Bucketをクリックします。

なにか見えてるのは元々作ってたバケットなので気にしないでください

AWS000117.JPG

 



1.3.Bucket Nameに好きなバケット名を入れて下さい。

世界中でユニークである必要があるので、他とかぶらなさそうなものにしてください

例では「mokumokugirls」としています

AWS000118.JPG

 



1.4.バケット名を入れたらCreateボタンをクリックします

AWS000119.JPG

 

1.5.バケットが出来上がりました

AWS000120.JPG


2.バケットにファイルをアップロードする

実際に表示させるファイルをS3のバケットにアップロードします。

 

2.1.アップロード用のファイルを3つ用意します。


  • index.html(サイトのトップページ)

  • error.html(ファイルがないURLを指定された場合のエラーページ)

  • index.htmlに貼る画像ファイル(てきとーな画像を用意して下さい)

index.htmlの中身は以下の様な感じにしました。

メモ帳等で作って下さい。

自分のだとわかりやすいように「Hello World!!」の文字列の部分を変えてみましょう。

画像ファイルの名前も合わせて下さい。


index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>JAWS-UG関西女子会もくもく勉強会</title>
</head>

<body>
<!--文字列をオリジナルなものに変えてみましょう-->
<span style="font-size : 100pt">Hello World!!</span></br>

<!--画像ファイル名を自分で用意した画像ファイル名と合わせましょう-->
<img src="./kansaigirls.jpg" width="500" height="500">
</body>

</html>


存在しないファイル名を指定された時に表示するerror.htmlの内容は以下の様な感じにしました。

こちらも内容をわかりやすいように変えてみましょう。

画像ファイルの名前も合わせて下さい。


error.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>JAWS-UG関西女子会もくもく勉強会</title>
</head>

<body>
<!--文字列をオリジナルなものに変えてみましょう-->
<span style="font-size : 50pt">Sorry!! Forbidden!!</span></br>

<!--画像ファイル名を自分で用意した画像ファイル名と合わせましょう-->
<img src="./kansaigirls.jpg" width="500" height="500">
</body>

</html>


 

2.2.できあがったバケット名のリンクをクリックします。

AWS000121.JPG

 

2.3.「Upload」ボタンをクリックします。

AWS000122.JPG

 

2.4.アップロードするファイルを選んで・・・

AWS000123.JPG

 

2.5.「Drag and drop files and folders to upload here」の枠内にドラッグアンドドロップして

「Start Upload」ボタンをクリックします。

AWS000124.JPG

 

2.6. ファイル3つともTransfersタブ上で「Done」となったことを確認します。

AWS000125.JPG


3.設定確認をする

この状態ではまだWEBサイトを表示できないことを確認してみましょう。

 

3.1.index.htmlをクリックします。

AWS000146.JPG

 

3.2.Propertiesボタンをクリックして「Link」に表示されているURLに鍵マークが付いていることを確認します。

AWS000147.JPG

 

3.3.URLをクリックしてページがアクセス拒否され、表示できないことを確認します。

AWS000148.JPG

 

3.4.バケット名をクリックします。

AWS000149.JPG

 

3.5.Propertiesの「Static Website Hosting」を展開し「Endpoint」に表示されているURLをクリックしてみましょう。

AWS000150.JPG

 

3.6.ページに404 Not Foundが表示されていることを確認します。

AWS000151.JPG

 

お疲れ様です!ここまでで半分です!


S3とCloudFrontを連携させてサイトアクセス高速化すること


S3とCloudFrontを連携させるまでのながれ


  1. ディストリビューションの作成

  2. 設定確認

  3. デフォルトルートオブジェクトの設定

  4. カスタムエラーページの設定


CloudFrontの用語について


CloudFront:

AWSのCDNサービス名称のこと

配信するサイトのキャッシュを世界中のエッジロケーションに持たせることにより

サイトの高速配信とアクセス集中時の負荷を減らす、地域指定によるアクセス制御等ができる





エッジロケーション:

CloudFrontで配信するキャッシュを保持するサーバが配置されている場所のこと



ディストリビューション:

CloudFrontの配信設定のこと



デフォルトルートオブジェクト:

CloudFrontに割り当てられたドメイン名のみでアクセスした際に表示するファイルを指定する

通常はindex.htmlを指定する




オリジン:

CloudFrontで配信するサイトの「元」のこと

S3でもEC2インスタンスでも設定可




オリジンアクセスアイデンティティ:

オリジンへのアクセス制御のこと



バケットポリシー:

S3のバケットに対するアクセス制御のこと



S3:GetObject:

S3に対するアクセス制御で「オブジェクトの読み取りのみ」を意味する


CloudFrontでの設定手順


4.ディストリビューションの作成

WEBサイト用のバケットのなかみをCloudFrontで配信するように設定します。

 

4.1.左上のBOXマークをクリックしてメニューを表示させます。

AWS000152.JPG

 

4.2.メニューより「CloudFront」をクリックします。

AWS000153.JPG

 

4.3.ディストリビューションを作成します。

「Create Distribution」ボタンをクリックします。

AWS000154.JPG

 

4.4.「Web」と「RTMP 2 」のうち「Web」の「Get Started」ボタンをクリックします。

AWS000155.JPG

 

4.5.「Origin Domain Name」のテキストボックスをクリックするとバケット名がドロップボックス表示されるので

作成したS3バケット名が入っているものをクリックします。

AWS000156.JPG

 

4.6.デフォルトでは「Restrict Bucket Access」が「No」となっているので「Yes」をクリックします。

AWS000157.JPG

 

4.7.「Origin Access Identity」が「Create New Identity」となっていることを確認し

「Comment」に表示されている文字列を自分のわかりやすい文字列に変更して下さい。

AWS000158.JPG

 

4.8.「Grant Read Permissions on Bucket」を「Yes, Update Bucket Policy」に変更して下さい。

AWS000159.JPG

 

4.9.「Create Distribution」ボタンをクリックします。

AWS000160.JPG

 

4.10.ディストリビューションの作成が開始されます。

AWS000161.JPG

 

4.11.左メニューの「Distributions」をクリックします。

AWS000162.JPG

 

4.12.「Status」欄が「In Progress」となっている間は作成中です。

AWS000167.JPG

 

4.13.「Status」が「Deployed」となるとディストリビューションの作成完了です。

AWS000168.JPG

 


5.設定確認

CloudFrontでの配信設定が正しくできているか確認をします。

 

5.1.リンク表示されているIDをメモします。クリックします

Originsタブをクリックして「Origin Access Identity」欄に表示されている「origin-access-identity/cloudfront/E2IRLCVGYRGKFP」の「origin-access-identity/cloudfront/<ここ>」のIDをメモします。

AWS000169.JPG

 

5.2.S3バケットのPropertiesで「Permissions」クリックして展開します。

バケット作成直後は「Add bucket policy」となっているのが「Edit bucket policy」となっていることを確認します。

「Edit bucket policy」ボタンをクリックします。

AWS000165.JPG

 

5.3.ポリシーエディターでCloudFrontのOrigin Access Identityが先ほどメモをしたCloudFrontOrigin access IdentityのIDと同じであることを確認します。

また、許可されているActionが「S3:GetObject」となっており、リソースにS3バケット名が入っていることを確認します。

AWS000166.JPG

 

5.4.CloudFrontのページに戻り、左メニューで「Distributions」をクリックします。

AWS000162.JPG

 

5.5.リンク表示されているIDをクリックします。

AWS000169.JPG

 

5.6.「Domain Name」をコピーします。

AWS000176.JPG

 

5.7.ブラウザのURL欄にコピーしたドメイン名を貼り付け、その後ろに「/index.html」を追加してページが表示されるかを確認します。

AWS000171.JPG

 


6.デフォルトルートオブジェクトの設定

手順5の段階ではドメイン名でアクセスをしてもindex.htmlは自動的に表示されないので、デフォルトで表示させるファイルindex.htmlに指定する設定を行います。

 

6.1.先ほどのページに戻り「Edit」ボタンをクリックします。

AWS000170.JPG

 

6.2.「Default Root Object」に「index.html」と入力します。

AWS000173.JPG

 

6.3.「Yes, Edit」ボタンをクリックします。

AWS000173_1.jpg

 

6.4.「CloudFront Distributions」リンクをクリックします。

AWS000175.JPG

 

6.5.「Status」が「In Progress」の間は設定中のため「Deployed」になるまで待ちます。

AWS000168.JPG

 

6.6.「Deployed」になったらブラウザでドメイン名のみでアクセスしてページが表示されるかを確認します。

AWS000177.JPG

 


7.カスタムエラーページの設定

ファイルが無い場合等に表示するエラーページを、自分で用意したファイルとする設定を行います。

 

7.1.「Distributions」でIDリンクをクリックした後「Error Pages」タブをクリックします。

AWS000178.JPG

 

7.2.「Create Custom Error Response」ボタンをクリックします。

AWS000179.JPG

 

7.3.今回作成したerror.indexの内容はページがない旨を示す内容のため「HTTP Error Code」では「403 Forbidden」を選択します。

AWS000189.JPG

 

7.4.デフォルトでは「Customize Error Response」が「No」になっているため「Yes」にチェックを入れます。

AWS000192.JPG

 

7.5.「Response Page Path」に「/error.html」と入力します。

AWS000193.JPG

 

7.6.「HTTP Response Code」で「403 Forbidden」を選択します。

AWS000190.JPG

 

7.7.「Create」ボタンをクリックします。

AWS000194.JPG

 

7.8.作成が開始されます。

AWS000185.JPG

 

7.9.「CloudFront Distributions」リンクをクリックします。

AWS000175.JPG

 

7.10.「Status」が「In Progress」の間は設定中のため「Deployed」になるまで待ちます。

AWS000168.JPG

 

7.11.「Deployed」になったらブラウザでドメイン名の後ろに存在しないファイル名を付けてアクセスしてエラーページが表示されるかを確認します。

※今回の設定ではS3への直接アクセス不可としているせいなのか、通常存在しないページのアドレスを指定した場合は「404 Not Found」が返ってくるのが「403 Forbidden」が返ってきます。

AWS000195.JPG

7.12.今回は「403 Forbidden」用のみを設定しましたが、本番運用する場合はすべてのエラーコードに対応したページを用意し、各エラーコード分のカスタムエラーページを設定します。

AWS000186.JPG

以上で、CloudFrontでサイトアクセスを高速化させたS3静的WEBサイトの完成です。

サイトのURLを独自ドメインに付け替える作業はドメイン取得の都合上、割愛しています。

※もしも独自ドメイン割当てをしたい場合はサポートメンバーに言ってください!!

 






  1. 節子!それは懇親会や!! 



  2. Real Time Messaging Protocolの略。Adobe Flashで音声や動画などのストリーミング再生を行うのに使われる通信プロトコル。ストリーミングメディアの高速配信を行いたい場合はRTMPのディストリビューションを作成する。