S3の静的コンテンツをCloudFrontを通して公開する

AWSの環境構築を続けていますが、アプリケーション開発で欠かせないのが画像やHTMLなどの静的コンテンツです。

オンプレ時代はApacheなどのWebサーバーを構築して、そこにコンテンツを置いて公開していましたが、AWSのS3は静的コンテンツのホスティングを行えるので今回試してみようと思います。

S3バケット

勘違いしていました。S3上のコンテンツ単位で公開の設定を行うものだと思っていたのですが、バケット単位での設定が必要となります。

ホスティングの設定

公開するためのバケットを作成したら、対象バケット→「プロパティ」→「Static website hosting」を選択します。

静的コンテンツホスティングの設定が開くので、「このバケットを使用してウェブサイトをホストする」を選択し、必要な情報を入力します。

アクセス権限の設定

次にアクセス権限の設定を行います。

対象バケット→「アクセス権限」→「バケットポリシー」を選択して、以下の通り入力します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::bucket-name/*"
            ]
        }
    ]
}

バケットがパブリックになったことで注意されていますが、承知の上です。

これでS3の設定は完了です。

コンテンツの確認

では、実際にコンテンツが配信されるかどうか確認してみます。

適当なJSONファイルをアップロードします。

アクセスしてみます。

無事表示されましたね。

CloudFront

次にCloudFrontの設定を行います。

CloudFrontの設定

CloudFrontコンソールから「Create Distribution」をクリックします。

静的コンテンツの配信なので、Webの「Get Started」をクリックします。

Origin Settingsを入力します。Origin Domain NameはS3のバケット名を選択します。

Default Cache Behavior Settingsを入力します。

• Viewer Protocol Policyを「Redirect HTTP to HTTPS」
• Compress Object Automaticallyを「Yes」

上記以外はデフォルトのままにしておきます。

Distribution Settingsは全てデフォルトのままです。

そのまま進めていくと、Distributionの作成が完了します。

処理中ですね....

10分ほど待つと「Deployed」になりました。

コンテンツの確認

以下のURLにアクセスします。

https://{DomainName}.cloudfront.net/sample.json

無事JSONが表示されましたね。

まとめ

以上で静的コンテンツを配信することができました。
S3への直接アクセスを抑えてキャッシュを有効にするためにCloudFrontを利用するというのは鉄板のやり方ですが、今回初めて自分で全て行ってみました。

これと言って詰まる箇所もなく進められたかなと思います。

実はこの仕組みを使ったある企みがあるのですが、またそれは後日公開します。