はじめに
この記事はJAWS-UG関西女子会「はじめて女子応援企画！事例から学ぶもくもく＆もぐもぐ会」で
もぐもぐ 1 もくもくする際のテキストとなります。
本記事での目標
- Amazon S3にWEBサイト表示用のファイル置き場をつくること
- S3とCloudFrontを連携させてサイトアクセスの高速化すること
以下のような構成となります。
Amazon S3にWEBサイト表示用のファイル置き場をつくること
S3にWEBサイト表示用のファイル置き場を作るまでのながれ
- WEBサイト用にS3のバケットを作る
- バケットにファイルをアップロードする
- 設定確認をする
S3の用語について
- S3：
- Simple Storage Serviceの略
- 略称だけどみんなS3って言ってる
- バケット：
- S3上に作るフォルダ的なもの
- 名前がユニークである必要あり
- 1アカウントあたり最大100個まで
- 名前がユニークである必要あり
- オブジェクト：
- ファイルのこと
- URLによるアドレスが付与
- バケット内に容量無制限で置くことができる
- 1オブジェクトのサイズは最大5TBまで
- URLによるアドレスが付与
- WEBサイトエンドポイント：
- S3上のオブジェクトへアクセスするためのURLのこと
- エンドポイントは自動的に割り当てられる
- ※本手順では独自ドメインとの割当て方は省いています。
- 独自ドメインをしたい場合はサポートメンバーに言ってください！！
- エンドポイントは自動的に割り当てられる
Amazon S3での設定手順
1.WEBサイト用にS3のバケットを作る
WEBサイトのファイル置き場としてS3にバケットを作ります。
1.1.メニューからS3をクリックします
1.2.Create Bucketをクリックします。
なにか見えてるのは元々作ってたバケットなので気にしないでください
1.3.Bucket Nameに好きなバケット名を入れて下さい。
世界中でユニークである必要があるので、他とかぶらなさそうなものにしてください
例では「mokumokugirls」としています
1.4.バケット名を入れたらCreateボタンをクリックします
1.5.バケットが出来上がりました
2.バケットにファイルをアップロードする
実際に表示させるファイルをS3のバケットにアップロードします。
2.1.アップロード用のファイルを3つ用意します。
- index.html(サイトのトップページ)
- error.html(ファイルがないURLを指定された場合のエラーページ)
- index.htmlに貼る画像ファイル(てきとーな画像を用意して下さい)
index.htmlの中身は以下の様な感じにしました。
メモ帳等で作って下さい。
自分のだとわかりやすいように「Hello World!!」の文字列の部分を変えてみましょう。
画像ファイルの名前も合わせて下さい。
<!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の内容は以下の様な感じにしました。
こちらも内容をわかりやすいように変えてみましょう。
画像ファイルの名前も合わせて下さい。
<!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.できあがったバケット名のリンクをクリックします。
2.3.「Upload」ボタンをクリックします。
2.4.アップロードするファイルを選んで・・・
2.5.「Drag and drop files and folders to upload here」の枠内にドラッグアンドドロップして
「Start Upload」ボタンをクリックします。
2.6. ファイル3つともTransfersタブ上で「Done」となったことを確認します。
3.設定確認をする
この状態ではまだWEBサイトを表示できないことを確認してみましょう。
3.1.index.htmlをクリックします。
3.2.Propertiesボタンをクリックして「Link」に表示されているURLに鍵マークが付いていることを確認します。
3.3.URLをクリックしてページがアクセス拒否され、表示できないことを確認します。
3.4.バケット名をクリックします。
3.5.Propertiesの「Static Website Hosting」を展開し「Endpoint」に表示されているURLをクリックしてみましょう。
3.6.ページに404 Not Foundが表示されていることを確認します。
お疲れ様です！ここまでで半分です！
S3とCloudFrontを連携させてサイトアクセス高速化すること
S3とCloudFrontを連携させるまでのながれ
- ディストリビューションの作成
- 設定確認
- デフォルトルートオブジェクトの設定
- カスタムエラーページの設定
CloudFrontの用語について
- CloudFront：
- AWSのCDNサービス名称のこと
- 配信するサイトのキャッシュを世界中のエッジロケーションに持たせることにより
- サイトの高速配信とアクセス集中時の負荷を減らす、地域指定によるアクセス制御等ができる
- 配信するサイトのキャッシュを世界中のエッジロケーションに持たせることにより
- エッジロケーション：
- CloudFrontで配信するキャッシュを保持するサーバが配置されている場所のこと
- ディストリビューション：
- CloudFrontの配信設定のこと
- デフォルトルートオブジェクト：
- CloudFrontに割り当てられたドメイン名のみでアクセスした際に表示するファイルを指定する
- 通常はindex.htmlを指定する
- オリジン：
- CloudFrontで配信するサイトの「元」のこと
- S3でもEC2インスタンスでも設定可
- オリジンアクセスアイデンティティ：
- オリジンへのアクセス制御のこと
- バケットポリシー：
- S3のバケットに対するアクセス制御のこと
- S3:GetObject：
- S3に対するアクセス制御で「オブジェクトの読み取りのみ」を意味する
CloudFrontでの設定手順
4.ディストリビューションの作成
WEBサイト用のバケットのなかみをCloudFrontで配信するように設定します。
4.1.左上のBOXマークをクリックしてメニューを表示させます。
4.2.メニューより「CloudFront」をクリックします。
4.3.ディストリビューションを作成します。
「Create Distribution」ボタンをクリックします。
4.4.「Web」と「RTMP 2 」のうち「Web」の「Get Started」ボタンをクリックします。
4.5.「Origin Domain Name」のテキストボックスをクリックするとバケット名がドロップボックス表示されるので
作成したS3バケット名が入っているものをクリックします。
4.6.デフォルトでは「Restrict Bucket Access」が「No」となっているので「Yes」をクリックします。
4.7.「Origin Access Identity」が「Create New Identity」となっていることを確認し
「Comment」に表示されている文字列を自分のわかりやすい文字列に変更して下さい。
4.8.「Grant Read Permissions on Bucket」を「Yes, Update Bucket Policy」に変更して下さい。
4.9.「Create Distribution」ボタンをクリックします。
4.10.ディストリビューションの作成が開始されます。
4.11.左メニューの「Distributions」をクリックします。
4.12.「Status」欄が「In Progress」となっている間は作成中です。
4.13.「Status」が「Deployed」となるとディストリビューションの作成完了です。
5.設定確認
CloudFrontでの配信設定が正しくできているか確認をします。
5.1.リンク表示されているIDをメモします。クリックします
Originsタブをクリックして「Origin Access Identity」欄に表示されている「origin-access-identity/cloudfront/E2IRLCVGYRGKFP」の「origin-access-identity/cloudfront/＜ここ＞」のIDをメモします。
5.2.S3バケットのPropertiesで「Permissions」クリックして展開します。
バケット作成直後は「Add bucket policy」となっているのが「Edit bucket policy」となっていることを確認します。
「Edit bucket policy」ボタンをクリックします。
5.3.ポリシーエディターでCloudFrontのOrigin Access Identityが先ほどメモをしたCloudFrontOrigin access IdentityのIDと同じであることを確認します。
また、許可されているActionが「S3:GetObject」となっており、リソースにS3バケット名が入っていることを確認します。
5.4.CloudFrontのページに戻り、左メニューで「Distributions」をクリックします。
5.5.リンク表示されているIDをクリックします。
5.6.「Domain Name」をコピーします。
5.7.ブラウザのURL欄にコピーしたドメイン名を貼り付け、その後ろに「/index.html」を追加してページが表示されるかを確認します。
6.デフォルトルートオブジェクトの設定
手順5の段階ではドメイン名でアクセスをしてもindex.htmlは自動的に表示されないので、デフォルトで表示させるファイルindex.htmlに指定する設定を行います。
6.1.先ほどのページに戻り「Edit」ボタンをクリックします。
6.2.「Default Root Object」に「index.html」と入力します。
6.3.「Yes, Edit」ボタンをクリックします。
6.4.「CloudFront Distributions」リンクをクリックします。
6.5.「Status」が「In Progress」の間は設定中のため「Deployed」になるまで待ちます。
6.6.「Deployed」になったらブラウザでドメイン名のみでアクセスしてページが表示されるかを確認します。
7.カスタムエラーページの設定
ファイルが無い場合等に表示するエラーページを、自分で用意したファイルとする設定を行います。
7.1.「Distributions」でIDリンクをクリックした後「Error Pages」タブをクリックします。
7.2.「Create Custom Error Response」ボタンをクリックします。
7.3.今回作成したerror.indexの内容はページがない旨を示す内容のため「HTTP Error Code」では「403 Forbidden」を選択します。
7.4.デフォルトでは「Customize Error Response」が「No」になっているため「Yes」にチェックを入れます。
7.5.「Response Page Path」に「/error.html」と入力します。
7.6.「HTTP Response Code」で「403 Forbidden」を選択します。
7.7.「Create」ボタンをクリックします。
7.8.作成が開始されます。
7.9.「CloudFront Distributions」リンクをクリックします。
7.10.「Status」が「In Progress」の間は設定中のため「Deployed」になるまで待ちます。
7.11.「Deployed」になったらブラウザでドメイン名の後ろに存在しないファイル名を付けてアクセスしてエラーページが表示されるかを確認します。
※今回の設定ではS3への直接アクセス不可としているせいなのか、通常存在しないページのアドレスを指定した場合は「404 Not Found」が返ってくるのが「403 Forbidden」が返ってきます。
7.12.今回は「403 Forbidden」用のみを設定しましたが、本番運用する場合はすべてのエラーコードに対応したページを用意し、各エラーコード分のカスタムエラーページを設定します。
以上で、CloudFrontでサイトアクセスを高速化させたS3静的WEBサイトの完成です。
サイトのURLを独自ドメインに付け替える作業はドメイン取得の都合上、割愛しています。
※もしも独自ドメイン割当てをしたい場合はサポートメンバーに言ってください！！