【AWS】S3とCloudFrontを使った静的サイトの配信方法を初心者向けに解説

はじめに

AWS CloudFrontは、Amazonが提供するコンテンツ配信ネットワーク（CDN）サービスです。S3と組み合わせることで、静的サイトを高速かつ安全に配信することが可能になります。本記事では、初心者向けにCloudFrontを使った静的サイト配信の手順をわかりやすく解説します。

「静的サイトのHTTPS対応を実現したい」
「グローバルなユーザーに高速なコンテンツ配信を行いたい」

という方に特におすすめの内容です。CloudFrontの基本から設定手順、利用するメリットまで、順を追って説明します。

CloudFrontで配信

CloudFrontは、AWSがリリースしているCDN（Content Delivery Network）サービスです。グローバルに展開されたエッジロケーションを活用して、ユーザーに最も近い場所からコンテンツを配信します。その結果、サイトの読み込み速度が向上します。

また、CloudFrontを利用することで、S3単体では対応できないHTTPS通信を実現できます。さらに、AWS Certificate Manager（ACM）を使えば無料でSSL証明書を発行でき、カスタムドメインでのHTTPSアクセスが可能になります。

メリット

HTTPS対応
高速なコンテンツ配信
セキュリティの強化
コスト最適化

ACMを使用して、SSL証明書を無料で発行できます。CloudFrontはそのSSL証明書に関連づけられたドメインをディストリビュージョンに紐づけることができます。

エッジロケーションによる配信のため、よりユーザーに近いサーバーからコンテンツを配信することができます。これにより、読み込み速度が向上します。
S3からCloudFrontのキャッシュに配信されるので、ネットワーク使用料金を抑えることができます。

HTTPS通信を行うことができるので、通信経路の暗号化が行われています。
また、WAFの設定を行うことができ、ACLと組み合わせることで不正アクセスを制限することができます。

CloudFrontの設定手順

S3バケットの準備
CloudFrontディストリビューションの作成
SSL/TLS証明書の設定
キャッシュポリシーの設定

S3バケットの作成を行います。
作成方法は以下の記事で紹介しているので参考にしてください。

【AWS】S3で静的サイトを公開する方法！初心者向けの設定手順

S3の設定手順

S3のバケットポリシーでは以下のように設定しておきます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::kamecloud.com-log/*"
        }
    ]
}

AWS CloudFrontで新規ディストリビューションを作成します。
オリジン設定を先ほど作成したS3バケットを選択して設定します。

オリジンは配信する元となる場所のことです。今回はS3になります。