この構成をつくるぞ
なんでCloudFront をはさむの？
CloudFront はAmazon が提供しているCDN サービス (Contents Delivery Network)
HTMLページや画像などの静的コンテンツをキャッシュし、オリジンサーバーの代わりに配信してくれる。
アクセス元のユーザーから一番近いエッジから取得するため、レスポンスが速いメリットがある。
※ S3に直接コンテンツを置き、CloudFront をはさまずに公開することも可能
事前準備
- 画像 (著作権フリーのやつ)
※ ファイル名はなんでもOKですが、ここでは"cloudfront-test-image.png" にします
作業手順
1. AWSコンソール にログイン
2. [S3] と入力し、Enterキーを押す
------------- ▼ ここからS3 の作業 ▼ -------------
3. 事前準備で用意したバケットをクリック
4. [アップロード] をクリック
5. 事前準備で用意した画像をアップロードし、[次へ] をクリック
6. [このオブジェクトにパブリック読み取りアクセス権限を付与する] を選択し、[次へ] をクリック
7. ストレージクラスはいったんデフォルトのままにしておき、[次へ] をクリック
8. [アップロード] をクリック
アップロードした画像ファイル名をダブルクリックすると以下が表示されます。
オブジェクトURLをクリックすると、アップロードした画像が公開されていることを確認できます。
------------- ▲ ここまでS3 の作業 ▲ -------------
9. 別タブでAWSコンソール を開く
10. [CloudFront] と入力し、Enterキーを押す
------------- ▼ ここからCloudFront の作業 ▼ -------------
11. [Create Distribution] をクリック
12. Web の[Get Started] をクリック
13. Origin Domain Name のプルダウンで画像ファイルをアップロードした S3 バケットを選択
14. 他の設定項目はいったんデフォルトのままにしておき、[Create Distribution] をクリック
※ ステータスが"In Progress" のまま5分ぐらいかかります。気長に待ちましょう
※ [Domain Name] は控えておいてください。No.15の手順で使います
------------- ▲ ここまでCloudFront の作業 ▲ -------------
15. ローカルで何かしらのテキストエディタを開き、mycloudfronttest.html のファイル名で保存
中身は以下をコピペしてください。
<html>
<body>
<img src="{No.14で控えたDomain Nameに置換してください}/cloudfront-test-image.png">
</body>
</html>
16. 上記のファイルを何かしらのブラウザで開く
画像が読み込めていることを確認できます！
あとかたづけ
1. CloudFront で今回作成したディストリビューションにチェックを入れ、[Disable] をクリック
2. 確認ダイアログが表示されたら[Yes, Disable] をクリック