今までS3に配置した画像や音声データをアプリから直接参照していたが、CloudFrontでやっても値段もそんなに変わらないし、早くなるということで実装してみました。
CloudFrontとは
Amazon CloudFront はグローバルなコンテンツ配信ネットワーク (CDN) サービスで、お客様のウェブサイト、API、動画コンテンツ、またはその他のウェブ資産の配信を高速化できます。他のアマゾン ウェブ サービス製品と統合されたこのサービスを利用すると、開発者や事業主は、簡単にエンドユーザーに対してコンテンツを高速化できます。最低利用量の条件はありません。
(AWS公式サイトより)
要はGlobalなCacheサービスっていうことですかね？
S3に配置したコンテンツをwebサイトやアプリから呼び出すと、S3に配置してあることが丸わかりだから少しやだなぁとも思っていたので、ちょうど良かったです。(S3で直接配信する時のpermissionの設定等はAWS S3でのコンテンツ配信で書きました。)
ただ、単純にCloudFront経由にすると ~.cloudfront.net/XXX.png みたいなURLになってしまうので、Route53で独自ドメインをつけてあげる必要があります。
手順
- S3でバケットを作成（この時、permissionの設定等は不要）
- CloudFrontでDistributionを作成
3. [CreateDistribution]を押し、[Web]の方の[Get Started]を押す
4. [Origin Settings]
5. [Origin Domain Name]にカーソルを合わせると上記で作成したS3のバケットが選択肢に出てくるので選択
6. [Origin Path]は付けたければ
7. [Origin ID]は[Origin Domain Name]選択で自動付加
8. [Restrict Bucket Access]を[yes]にする（S３のアドレスで直接アクセスを許さなくする）
9. [Origin Access Identity]は[Create a New Identity]を選択
10. [Comment]はわかりやすいもの（自動でもつく）
11. [Grant Read Permissions on Bucket]は[yes]にする
12. [Origin Custom Headers]は付けたければ
12. [Default Cache Behavior Settings]
13. 設定不要
13. [Distribution Settings]
14. [Alternate Domain Names(CNAMEs)]にはS3にコンテンツアクセス時に付けたいドメインを設定
15. [SSL Certificate]は独自ドメインであればcustomの証明書を選択
16. [log]は付けたければ - Route53
4. [Create Record Set]を押す
5. [Name]は上記4-1で設定したドメイン名を入力
6. [Type]は[CNAME-Canonical name]を選択
7. [Value]は上記で作成したCloudFrontの[Domain Name] (generalから確認可能)
上記で4-1で設定したドメイン+S3バケットのファイルパスで表示可能になる
ちなみにCORSでエラーが出た場合は、
[Forward Headers]を[Whitelist]に変更し、[Whitelist Headers]でOriginヘッダを[Add>>]ボタンで追加すればOK
何かご指摘、ご意見あればお願い致します。