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 PolicyRedirect HTTP to HTTPSにする

Compress Objects Automaticallyonにする(コンテンツ圧縮)

Default Root Objectindex.htmlにしておく(あとで作ります)

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

静的サイトの公開

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

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

通信速度の比較

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

今回作成したページ

Tested from Melbourne 41ms

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

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

Tested from Melbourne 295ms

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

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

ハックノートをフォローして
最新情報をチェックしよう

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。