LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Organization

CloudFront + S3 + Route53 + ACMで高速静的ファイル配信

QualiArts Advent Calendar 2020、16日目担当の末吉です!

今回、AWSを使って高速静的ファイル配信を実現する方法をまとめさせて頂きました。

はじめに

静的ファイルの配信速度を高めるために、S3とCloudFrontを組み合わせて、CloudFrontから静的ファイルを配信する、、、というのはよくある王道な設計だと思います。
でも設定がダルくてS3コンテンツへ直接アクセスできるようにしてしまいがち。

そこで今回は、
CloudFrontをS3の前に置いて静的ファイルの配信を高速化する
CloudFront経由以外のアクセスを禁止する
https通信でCloudFrontとのやり取りは暗号化する

という3つの条件を満たす方法を紹介します。

ゴール

Untitled Diagram (1).png

上記の図のように
・S3コンテンツに直接アクセス出来ないようにする
・CloudFront経由の時のみS3コンテンツが見れる
・CloudFrontとの通信はhttps通信で暗号化する

という感じの構成にします。

今回やらない事

・初学者向けの記事にしたいので、Terraformなど使ってインフラのコード化は今回してないです。
(コンソールでポチポチしてください)

手順

1: S3バケットの作成
2: オリジンアクセスアイデンティティ付きのCloudFrontの作成
3: CloudFront経由で画像を見れるか動作確認
4: Route53とACMを使って、https通信にする
5: https通信のCloudFront経由で画像を見れるか動作確認

という感じです。

実装

それでは作っていきましょう!

1: S3バケットの作成

まず、S3バケットを作成します。
AWSコンソールからS3をクリックして下さい!

6B7FD1DC-6F6D-4C16-962F-A3A38D9E89DA_1_105_c.jpeg

バケットの作成を選択します。

A2E9C7D1-B13A-4854-9E26-AE135214DB41_1_105_c.jpeg

バケットの作成画面で作っていきましょう。
バケット名は適当に決めちゃって大丈夫ですが、既に他のバケット名が使われていると作成出来ないので注意。今回僕はqiita-imagesにしました。
リージョンも基本的にお好みで大丈夫です。

重要なのがパブリックアクセスをすべてブロックがしっかり設定されている事。

基本的にデフォルトで選択されているのでいじらずにそのまま作成しちゃいましょう。
詳細設定はしなくても大丈夫です。

460B6407-D2DE-45FD-B1E3-BDD169B87A8E.jpeg

9A779152-48F8-4423-90FB-5516A3B2A8B8_1_105_c.jpeg

下記の画面のようにバケットがちゃんと作成されていて、アクセスが非公開になっていることを確認。

302927F6-044C-4101-A6E1-B747CEA995C9.png

動作確認用に画像をバケットにブチ込んでおきましょう。

作ったバケットをクリックして、

908CDF74-8598-43BE-87DB-35E7E2BA36D5.jpeg

アップロードを選択。
12D058F4-F92A-43E7-8AD3-03AFD34BF274_1_105_c.jpeg

適当に画像を入れる。
今回はいらすとやの可愛いワンちゃんの画像でも使いましょう。

fantsy_haneinu.png

27FBBE3D-C478-4320-AB88-1CB92F881844.jpeg

セット出来たら何も設定せずにそのままアップロード。

しっかり作成出来たら、アップロードしたファイルをクリック。

D5B9D9F3-79E2-4BE8-B159-84E5F15F6FC7.jpeg

詳細画面に来たら、オブジェクトURLをクリック。
このURLはS3から直接ファイルを見にいくURLです。

0A53CA26-CF75-43FF-B8C0-CCC4D3C482B1_1_105_c.jpeg

そうするとAccessDeniedが表示されると思います。
ちゃんとS3コンテンツへ直接アクセス出来ないようになっていますね!

スクリーンショット 2020-05-03 13.38.19.png

2: オリジンアクセスアイデンティティ付きのCloudFrontの作成

S3の作成が終わったので、今度はCloudFrontを作成していきましょう。

AWSのコンソールからCloudFrontをクリックして下さい。

AB773598-DCE1-4EB3-8912-11E06A95B426_1_105_c.jpeg

Create Distributionを選択。

13684346-B23A-46ED-8276-DF4CCB70EAD4_1_105_c.jpeg

WebのGet Startedを選択。

CAA23914-5A64-4DC2-8097-E40D541E56C3_1_105_c.jpeg

Origin Domain Nameを先ほど作ったS3バケットに指定。

1736A1BA-8708-4EE5-89F4-3CDE0BD539B7_1_105_c.jpeg

Restrict Bucket AccessをYesに選択し、オリジンアクセスアイデンティティを使用する設定にします。

DE3B818E-CF37-4B53-B185-835FDD5C7B37_4_5005_c.jpeg

Create a New IdentityでYesを選択して新規作成をするように設定し、分かりやすいようにCommentにバケット名を追記しておきましょう。
そして、Grant Read Permissions on BucketでYes, Update Bucket Policyを選択して、S3コンテンツの読み取りを許可するためにバケットポリシーを更新するようにしておきます。

CB0078C8-D9F2-47C4-9B90-B079A3345018.jpeg

他の設定はとりあえずそのままでオッケーなので、画像を1番下までスクロールしてCreate Distributionをクリックして作成してください。

58E2BF25-561F-4A29-9F56-4234EC7442F3_1_105_c.jpeg

これでCloudFrontの設定は完了です!
作成に15分くらいかかるので、しばらく待ちましょう。
15分くらい経ってStatusがDeployedになったら次に進んでください!

8098F4E2-C840-45FC-A642-12E1D048C0BA.jpeg

3: CloudFront経由で画像を見れるか動作確認

15分程経ってCloudFrontが無事に作成されたら、次に動作確認を行なっていきます。
冒頭で作ったS3バケットの詳細画面に行って、アクセス権限をクリックしてください。

88103A0B-A74D-4167-AD5F-59E100B15BFC_1_105_c.jpeg

バケットポリシーをクリック。

6467A09B-1A6F-4D62-9726-73EB776EF19F_1_105_c.jpeg

Resouceのところだったり細かい文字やIDはバケットによって異なるので、下記のような感じでバケットポリシーが自動で設定されていたらオッケーです。

56380987-BF34-4495-914E-B0416E063791_1_105_c.jpeg

では、画像にアクセスしていきましょう。

CloudFrontの画面に行って、作ったDistributionのIDをクリック。

6005497A-AD98-446D-A680-B524629CAD85_1_105_c.jpeg

Distributionへのドメインが表示されるので、これをコピーします!

E08AFFC0-BB6C-4B66-86BA-B5C59F741FAD_1_105_c.jpeg

先ほどアップロードした犬の画像のファイル名は、fantasy_haneinu.pngでしたね。

なので、ブラウザで
d1h87ehtf3c9o.cloudfront.net/fantsy_haneinu.png
みたいな感じで、コピーしたドメインの後ろに画像のファイル名を入れてあげると、、

1780C070-A952-45EC-A641-56FE2CE1EAA1_1_105_c.jpeg

無事に表示されましたね!

念の為にS3から直接アクセスしてみましょう。

0A53CA26-CF75-43FF-B8C0-CCC4D3C482B1_1_105_c.jpeg

スクリーンショット 2020-05-03 13.38.19.png

変わらず、S3からの直接アクセスは禁止されていますね。
これで無事にCloudFrontを経由する時のみS3コンテンツに直接アクセスする事が可能になりました!

4: Route53とACMを使って、https通信にする

次に、Route53を使って、https通信にしていきましょう。

まず、Route53でドメインを取得していきます。
ドメイン取得には少しだけお金がかかるので注意しましょう!

BB5FB25F-568E-4580-A562-A24D5044E3E1_1_105_c.jpeg

登録済みドメインを選択。

41D19C8E-720C-4AA7-995A-368980C39EE6_1_105_c.jpeg

ドメインの登録を選択。

F41B8C8E-5E85-4354-9551-D43462AE8875_4_5005_c.jpeg

ドメインの選択欄でご自身が設定したい名前のドメインとトップレベルドメイン(.comなど)を決め、チェックを押してください。
ここでは例として、ドメイン「example」、トップレベルドメイン「.de」としています。(.deは安いのでオススメです!)

FE68F317-3C1A-4EB6-B7C0-F8AF5E88310D_4_5005_c.jpeg

なお、チェックを押下した際、使用不可と出力されることがあります。
ドメインは世界中で重複しないため、貴方が設定しようとしたドメインは既に他の誰かが登録しているということとなります。
チェックが通るまでドメインの変更を行なってください。

チェック完了後、購入者の連絡先詳細画面となるため、ご自身の情報を記入し続行を押下してください!
(個人情報なので、画面は割愛します)

その後、記入内容に問題なければ注文を完了を押下してください。
注) 注文完了を行うと料金が発生します。問題ないか再確認を行なってください。

CAD7DA2D-E246-488B-928E-C99F67AF4728.jpeg

注文完了後、数分ほど時間をおいてドメインの登録に成功するはずです。
サイドバーの登録済みドメインから確認を行なってください。

1EC474BD-3B21-49DF-BFA7-0D8D7CAEB276_1_105_c.jpeg

これでドメインの取得が出来ました!

次に、CloudFrontのドメインと、今入手したドメインを結び付けていきます。

まずはCloudFrontのドメインを確認していきましょう。
先ほどコピペしたやつですね。

6005497A-AD98-446D-A680-B524629CAD85_1_105_c.jpeg

E08AFFC0-BB6C-4B66-86BA-B5C59F741FAD_1_105_c.jpeg

コピーしたら、次にRoute53のサイドバーにあるホストゾーンを選択して、先ほど作ったドメインをクリック。

A7E26B2C-110E-46F3-A3FB-5C2A4FD82996.jpeg

レコードセットの作成をクリック。

0C59A155-67E4-40AD-9571-74099E989379_4_5005_c.jpeg

名前: www(基本何でも大丈夫です)
タイプ: CNAME - 正規名
値: コピペしたCloudFrontのドメイン

という感じで設定して、作成をクリックしてください。

9A79979B-5BB1-4BF6-B31F-A49BAF377D19.jpeg

無事にレコードセットの作成をして、このドメインとCloudFrontのドメインの結び付けが出来ましたね!

次に、このドメインに対して、ACM(AWS Certificate Manager)を使って、SSL/TLS証明書を発行しましょう。
この証明書がないとhttps通信が出来ません。

さて、この証明書なのですが、CloudFrontで使う時にはバージニア北部で発行した証明書でなければならないという仕様のため、リージョンを切り替えて証明書を発行していきます。
* 2020/05/03現時点での情報です。今後変わる可能性もあるかも、、

というわけで、リージョンをバージニア北部にしましょう。

52F54284-33D7-470F-928F-379B7BBC949A_4_5005_c.jpeg

切り替えたら、Certificate Managerを選択。

43231531-0FFE-4D8D-86A3-4E61549708D6_1_105_c.jpeg

画面が切り替わったら、証明書のプロビジョニングの今すぐ始めるをクリック。

8EBC879D-7215-426C-A66A-9D4A1DD0F2A5_1_105_c.jpeg

デフォルトのパブリック証明書のリクエストのままで大丈夫です。
次に進みましょう。

BF34B675-8472-4C3C-AE77-E04D1357524D_1_105_c.jpeg

ドメイン名に、先ほどCloudFrontと結び付けた「www.{ドメイン名}」というドメインをここに入力して、次へをクリック。

2FC1DE24-2119-42B7-BF6D-734E515E506C_1_105_c.jpeg

ここもデフォルトのDNSの検証で大丈夫です。次へをクリック。

0D484E13-0A5E-4AAE-A126-3CDF8F4830AB_1_105_c.jpeg

タグはあってもなくても大丈夫です。確認をクリック。

F595A8B9-28AE-45A3-A2C7-390B2A251B68_1_105_c.jpeg

確定とリクエストをクリック。

C1159A9A-647F-4955-B82A-9B83801B1DFD_1_105_c.jpeg

画面が切り替わったら、ドメインの横にある三角のマークをクリック。

47189F91-B14E-4198-AACC-C0327360C641_1_105_c.jpeg

1番下にあるRoute53でのレコードの作成をクリック。

907B8C82-C875-4DD3-8AB3-C4B72F196729_4_5005_c.jpeg

結構時間がかかる場合があります、、、
数分待って、状況が発行済みになったら成功です!

2CE58EA9-1A3A-45A8-AC3F-73A1712C03C1.jpeg

ここまでで、ドメインを取得して、CloudFrontと結びつきの土台を作って、SSL/TLS証明書を発行してきました。

いよいよラストです。
CloudFrontの設定を行います!

まず、今まで通りCloudFrontのIDをクリックしてください。

6005497A-AD98-446D-A680-B524629CAD85_1_105_c.jpeg

GeneralのEditをクリック。

2EBC491A-3EEE-426F-BC61-89074D97F044_4_5005_c.jpeg

Alternate Domain Namesに、お馴染みのwwwドメインを入力します。
そして、Custom SSL Certificateを選択し、先ほど作った証明書を選択。

CEEDC73B-BB41-46B2-9CE5-E308DC3F495D.jpeg

他はガン無視で大丈夫なのでYes, Editしちゃいましょう。

C84C6D36-AF7C-4A95-9B1C-41433FF8C981.png

これでGeneralの設定が終わりました。
次に、Behaviorsの設定を行なっていきます。
Editを選択してください。

A8ACEDC9-C4D4-4468-9091-379A8CA26F9E.jpeg

Viewer Protocol Policyを下記のようにhttpsへリダイレクトするように設定。

C2022A15-AE74-4CE6-8E2F-778100848330_1_105_c.jpeg

他は同じくガン無視でYes,Editしちゃいましょう。

0A4FDEC8-7283-4511-B56E-29CB2BF930D6_1_105_c.jpeg

これで設定は完了です!

反映に数分かかる事があるので、しばらく待ってみてください。

5: https通信のCloudFront経由で画像を見れるか動作確認

数分待った後に、

wwwドメイン/fantsy_haneinu.png

をブラウザで叩いてみると、、、

E3260FAB-31C9-4CDD-AF8A-FF87720C4FB3_1_105_c.jpeg

ちゃんと鍵マークがついていますね!
ワンちゃんもしっかり表示されてます!!これで完成です🎉🎉🎉🎉🎉

最後に

(お金がかかってしまうので、今回お試しでやった方はお掃除を忘れずに!)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0