CloudFrontを使ってHTMLページを公開する

ここで紹介されているCloudFrontを実際に使ってみよう、という記事です。

この記事ではとても簡単なHTMLページを作り、公開するところまでを説明します。

ページ用S3バケットの作成

HTMLのページをおいておくためのS3バケットを作成します。サービス→ストレージからS3を選択。

S3の作成からバケット名を適当に決めて（ここではtest-page-0831とします）、作成します。

作成したバケットのアクセス権限からバケットポリシーを編集します。以下のように公開範囲を設定しておきます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::test-page-0831/*"
        },
        {
            "Sid": "PublicReadListBucket",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::test-page-0831"
        }
    ]
}

CloudFrontからのアクセスが可能になりました。

CloudFrontの設定

CloudFrontの設定をしていきます。サービス→ネットワーキング＆コンテンツ配信からCloudFrontを選択し、Create Distribution から始めます。

Select delivery methodからwebを選び、

・Origin Domain Nameを先程作成したバケットにする

・Viewer Protocol PolicyをRedirect HTTP to HTTPSにする

・Compress Objects Automaticallyをonにする（コンテンツ圧縮）

・Default Root Objectをindex.htmlにしておく（あとで作ります）

これで作成すれば、十分経たずにDeployedになります。

静的サイトの公開

以下のような内容のindex.htmlを作成し、S3にアップロードします。

これでCloudFrontのページにあるDomain Nameにアクセスすれば、CloudFront経由で接続された「テスト」とだけ表示されたページが表示されます。

通信速度の比較

ここでEC2でまったく同じものを作成した際の通信速度と比較してみます。

今回作成したページ

Tested from Melbourne 41ms

EC2で用意した同じ内容のページ

EC2にapacheをインストールし、そこに同様のページをおいて計測してみました。

Tested from Melbourne 295ms

露骨に早くなっています。

今回作成したページはとても簡単なものでしたが、ここにブログの内容を結びつければ、高速化を図れます。ぜひ試してみてください。