More than 1 year has passed since last update.

S3静的ウェブサイトをCloudFrontで高速化、HTTPS化

Posted at 2022-04-03

はじめに

前回S3を使用して静的ウェヴサイトをホスティングできたので、今回はCloudFrontというCDNサービスを使って、配信の高速化、HTTPS化していきたいと思います。

前提

S3に静的ウェブサイトをホスティング済であること。
ここまでは前回の記事参照
S3で静的ウェブサイトをホスティングする

CloudFrontを使用する目的

・　静的コンテンツをキャッシュし、オリジンサーバーの代わりに配信することによって高速化する。
・　S3のみの配信である場合は、URLがHTTPで始まるウェブサイトになっているため、通信を暗号化できていない。
　（HTTPSで始まるウェブサイトにする。）

手順

1. CloudFrontディストリビューションの作成

① CloudFrontの画面で「CloudFrontディストリビューションを作成」をクリック

② ディストリビューションの設定

オリジンドメインをクリックすると、S3のバケット名が出てくるので、選択。

S3のバケットを選択すると「名前」の欄は自動で埋まります。

「S3バケットアクセス」と「バケットポリシー」はどちらも「はい」を選択。
「S3バケットアクセス」で「はい」を選択すると、「新しいOAIを作成」が出てくるのでクリック。

オリジンアクセスアイデンティティは任意の名前で作成。

「ビューワー」の「ビューワープロトコルポリシー」で「Redirect HTTP to HTTPS」を選択。

「デフォルトルートオブジェクト‐オプション」にS3バケット内の、最初に表示させるhtmlファイル名を入力。

全て設定したら、「ディストリビューションを作成」をクリック。

ディストリビューションが作成されました。

2. ウェブサイトの表示

ディストリビューションを作成し終えたら、CloudFrontの画面で今作ったディストリビューションのステータスが「有効」になていることを確認し、ドメイン名をコピーします。
このドメイン名を使ってブラウザで開くと

Hello AWSが表示されました。

3. S3のバケットポリシーの変更

今の状態だと、CloudFrontディストリビューションのドメイン名、S3バケットのエンドポイントどちらからもサイトが表示される状態になっているので、エンドポイントからの配信を制限するため、S3のバケットポリシーを変更します。
まず、S3の「アクセス許可」を開きます。

アクセスがパブリックな状態になっています。
なので、バケットポリシーを編集します。

赤枠がCloudFrontを構築したときにできた新しいポリシーで、青枠が既存のポリシーです。
なので、青枠の

      {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hello-aws-site/*"
      },

を削除します。
よって、新しいバケットポリシーは

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E3JM1W7B4NZDRS"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hello-aws-site/*"
        }
    ]
}

となります。
バケットポリシーを変更することによって、

パブリックマークが消えます。