【AWS】CloudFront経由でS3静的ファイルにアクセスする
投稿日: 2019/06/11
AWS
CloudFrontを使用して静的ファイルをサクッとWebに公開する手順を紹介します。
目次
S3を作成する
事前準備として、S3を作成しておきます。
今回は、index.html を用意し、公開にしておきます。
CloudFrontを作成する
Distributionを作成する
CloudFrontのページに行き、Distributionを作成します。
今回はWebページを作成したいので、WebのほうのGet Startedをクリックします。
Distributionの設定(Origin Settings)
Origin Domain Name
S3バケットが作成されていれば、セレクトボックスに選択肢が表示されます。
Origin ID
自動的に設定されるので、そのまま。
Restrict Bucket Access
CloudFrontからのアクセスを許可するため「Yes」を選択します。
Comment
何でもよいのですが「access-identity-s3-access」としました。
Grant Read Permissions on Bucket
バケットポリシーを自動で上書くため「Yes」を選択します。
Distributionの設定(Default Cache Behavior Settings)
Viewer Protocol Policy
常時SSL化したいので「Redirect HTTP to HTTPS」を選択します。
Compress Objects Automatically
gzip圧縮したいので「Yes」を選択します。
Distributionの設定(Distribution Settings)
Price Class
デフォルトはU.S, Canada and Europeとなっているので、アジアを含む「Use U.S., Canada, Europe, Asia, Middle East and Africa」を選択します。
Default Root Object
ドメインのみにアクセスした際、index.htmlを表示して欲しいので「index.html」を設定します。
保存する
すべての入力を行った後「Create Distribution」ボタンをクリックします。
するとデプロイが始まり、15分ほどでCloudFrontのドメインにアクセスが可能となります。
CloudFront経由のみアクセスを許可する
バケットポリシーを確認する
上の手順を進めていれば「Restrict Bucket Access」で「Yes」を選択しているため、ColudFrontからアクセスが可能です。
されていない場合、バケットポリシーを確認します。
Restrict Bucket Accessの設定
バケットポリシーが設定されていない場合、Distributionsを編集します。
S3を非公開にする
S3バケットのアクセス権限を開き、Everyoneでオブジェクトへのアクセスのチェックを外します。
アクセスして確認する
実際にアクセスして確認してみましょう。
- S3にアクセス...できない
- CloudFrontにアクセス...できる
これでCloudFront経由でS3静的ファイルをWebに公開することができました。
次回は独自ドメインの設定を行っていこうと思います。