【AWS】CloudFront経由でS3静的ファイルにアクセスする

投稿日: 2019/06/11

AWS 



CloudFrontを使用して静的ファイルをサクッとWebに公開する手順を紹介します。



S3を作成する

事前準備として、S3を作成しておきます。

今回は、index.html を用意し、公開にしておきます。

S3に置いたindex.htmlを公開にする


CloudFrontを作成する

Distributionを作成する

CloudFrontのページに行き、Distributionを作成します。

Create Distributionをクリックする

今回はWebページを作成したいので、WebのほうのGet Startedをクリックします。

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」を選択します。


Origin Settingsを設定する


Distributionの設定(Default Cache Behavior Settings)

Viewer Protocol Policy

常時SSL化したいので「Redirect HTTP to HTTPS」を選択します。


Compress Objects Automatically

gzip圧縮したいので「Yes」を選択します。


Default Cache Behavior Settingsを設定する

Default Cache Behavior Settingsを設定する2


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」を設定します。


Distribution Settingsを設定する

Distribution Settingsを設定する2


保存する

すべての入力を行った後「Create Distribution」ボタンをクリックします。

するとデプロイが始まり、15分ほどでCloudFrontのドメインにアクセスが可能となります。


CloudFontデプロイ完了


CloudFront経由のみアクセスを許可する

バケットポリシーを確認する

上の手順を進めていれば「Restrict Bucket Access」で「Yes」を選択しているため、ColudFrontからアクセスが可能です。

されていない場合、バケットポリシーを確認します。

バケットポリシーを確認


Restrict Bucket Accessの設定

バケットポリシーが設定されていない場合、Distributionsを編集します。

Restrict Bucket Accessの設定

Restrict Bucket Accessの設定2


S3を非公開にする

S3バケットのアクセス権限を開き、Everyoneでオブジェクトへのアクセスのチェックを外します。

Restrict Bucket Accessの設定


アクセスして確認する

実際にアクセスして確認してみましょう。

  • S3にアクセス...できない
  • CloudFrontにアクセス...できる

これでCloudFront経由でS3静的ファイルをWebに公開することができました。

次回は独自ドメインの設定を行っていこうと思います。




このエントリーをはてなブックマークに追加