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

Wed, 11 Dec 2024 08:40:15 +0000

はじめに

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になります。

Origin Access Control(OAC)も有効にしておきましょう。

OACはCloudFrontからのみアクセスできるようにできます。

HTTPからHTTPSにリダイレクトするための設定です。通信経路を暗号化した経路にリダイレクトした方がいいので、設定しておきましょう。

キャッシュポリシーの作成を行います。

TTLの時間は静的コンテンツは長めに設定します。長めに設定することでオリジン（S3バケット）へのリクエスト数が減るため、コスト削減につながります。

デフォルトの設定が一般的な設定なので、デフォルトの設定で大丈夫です。用途が動画等の大きめのデータの場合はキャッシュ時間を伸ばす等の工夫を行うとコストを抑えることができます。

補足

CloudFrontのディストリビュージョンのDNS名にACMで設定したSSL証明書を紐付けます。この設定でACMで設定したドメインに対応することができます。

まとめ

AWS CloudFrontを活用することで、S3の静的サイトを高速かつ安全に配信することが可能です。本記事では、CloudFrontの基本的な仕組みから設定手順までを解説しました。

CloudFrontを使用することで得られるメリットは以下です。

HTTPS対応によるセキュリティ向上
グローバルユーザー向けの高速な配信
S3のリクエスト削減によるコスト最適化

今回の手順を参考に、CloudFrontとS3を組み合わせた静的サイトの配信を試してみてください。

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

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

はじめに

CloudFrontで配信

メリット

CloudFrontの設定手順

まとめ