MENU
開発から日常生活までITハックで人生を楽しもう～！
  1. ホーム
  2. アプリ開発
  3. Amazon CloudFrontとS3で画像を公開してみよう！

Amazon CloudFrontとS3で画像を公開してみよう！

アプリ開発
eyecatch-aws-cloudfornt-s3
目次

Amazon CloudFrontとは？

概要

Amazon CloudFrontはコンテンツ配信ネットワーク (CDN)のサービスで、地理的に分散されたサーバーネットワークを活用して、ユーザーに近いロケーション（エッジロケーション）からコンテンツを配信します。これによりレイテンシ（遅延）が低減され、より高速なコンテンツ配信（画像、ビデオ、HTML、CSS、JavaScriptなどの静的コンテンツ、APIやウェブアプリケーションのような動的コンテンツ）が可能となります。

CloudFrontを使用するメリットは大きく２点あります。１つ目セキュリティ強化です。DDoS保護、WAF (Web Application Firewall) 統合、SSL/TLS暗号化などのセキュリティ機能を提供し、コンテンツの安全な配信を確保します。２つ目は低レイテンシー対策です。エッジロケーションでコンテンツをキャッシュすることで、サーバーへのリクエストを減らし、応答時間を短縮します。

S3との連携

CloudFrontとS3の連携はAWSのアーキテクチャパターンとしてよく見かける構成となっています。S3単体でも静的ホスティング機能を使ってコンテンツをインターネット上に公開することはできますが、CloudFrontと連携することで下記のようなメリットがあります。

  • 高速なコンテンツ配信
    S3に保存されたコンテンツをCloudFrontを通じて配信すると、エッジロケーションから直接コンテンツが提供されるため、ユーザーに高速でコンテンツを届けることができます。これは特に地理的に分散したユーザーに対して有効です。
  • コストの最適化
    S3から直接コンテンツを配信するよりも、CloudFrontを利用してキャッシュを活用することで、S3からのデータ転送コストを削減できます。また、リクエスト数も削減されるため、結果的にコストの最適化が可能です。
  • セキュリティ強化
    CloudFrontでは、Origin Access Control (OAC) を使って、S3バケットへのアクセスをCloudFrontからのリクエストのみに制限することができます。
  • 柔軟なキャッシュコントロール
    CloudFrontは、キャッシュの制御や有効期限の設定が柔軟に行えるため、頻繁に変更されるコンテンツや更新頻度の少ないコンテンツに対して適切なキャッシュ戦略を設定できます。

S3単体の構成ではこれらのメリットが享受できないため、簡易的にテストする場合や利用が限定的な場合にのみ利用することが望ましいといえます。

構築するアーキテクチャ構成

今回構築するアーキテクチャはCloudFrontからS3のコンテンツにアクセスするだけのシンプルな構成です。しかしこの構成を理解することでCloudFrontの基本を理解することができますので、頑張って構築してみましょう。

アーキテクチャの構成

S3のバケット作成と設定

  • マネジメントコンソールからS3を検索しクリック
  • 左メニューからバケットを選択し、「バケットを作成」をクリック
  • バケット名を任意の名前にし他はデフォルトのまま「バケットを作成」をクリック
  • 作成したバケットのリンクをクリック
  • 「アクセス許可」タブから「バケットポリシー」の編集をクリック

CloudFrontの作成と設定

  • マネジメントコンソールからCloudFrontを検索しクリック
  • ディストリビューションから「ディストリビューショんを作成」をクリック
  • 下記を設定
    • Original domainは上記で作成したS3バケットを選択
    • Origin pathは入力しない
    • 名前は任意（ここではMy S3）
    • オリジンアクセスはOrigin access control setting(recommended)を選択
    • Origin access controlは「Create new OAC」をクリックし、そのままでCreateをクリック
    • WAFは「セキュリティ保護を有効にしないでください」を選択
    • 「ディストリビューションを作成」をクリック

S3にバケットポリシーを設定

  • 下記のポリシーを設定
    • arn:aws:s3:::S3バケット名/*：作成したバケット名のARNを入力
    • ※バケット名の最後に/*を忘れずに追記
    • arn:aws:cloudfront:::xxxx：作成したCloudFrontのARNを入力
{
    "Version": "2012-10-17",
    "Statement": {
        "Sid": "AllowCloudFrontServicePrincipalReadOnly",
        "Effect": "Allow",
        "Principal": {
            "Service": "cloudfront.amazonaws.com"
        },
        "Action": [
            "s3:GetObject",
            "s3:GetObjectVersion"
        ],
        "Resource": "arn:aws:s3:::S3バケット名/*",
        "Condition": {
            "StringEquals": {
                "AWS:SourceArn": "arn:aws:cloudfront:::xxxx"
            }
        }
    }
}

疎通確認

  • CloudFrontのディストリビューション＋/ファイル名をでアクセスを実施するとコンテンツが表示
    • 例：http://d210lkabcdg7y4.cloudfront.net/logo.png
  • S3のコンテンツURLでアクセスを実施するとコンテンツが非表示
    • 例：https://(backet-name).s3.ap-northeast-1.amazonaws.com/logo.png

後片付け

  • S3のバケット削除
    • 中身（ファイルやフォルダ）を削除してからバケットを削除
  • CloudFrontのディストリビューション削除
    • 対象のディストリビューションを無効化し、削除ボタンで削除
    • 削除ボタンがアクティブにならない場合はCLI経由で削除（コマンドは下記を参照）
    • ※AWS CLIはCloud ShellやEC2経由で利用することが可能
# ディストリビューションIDはCloudFrontの最後のスラッシュ以降の値
arn:aws:cloudfront::<account-id>:distribution/<distribution-id>

# Etag値の取得方法
## Etag値はディストリビューションに変更がある度に値が変わるので無効化以降に取得
aws cloudfront get-distribution-config --id <distribution-id>
{
   "ETag": "xxxxxxxxxxxxxx",
   …
}

# 上記で取得したディストリビューションIDとEtag値を下記のコマンドの引数に設定し実行
aws cloudfront delete-distribution --id <ディストリビューションID> --if-match <Etag値>

まとめ

本記事ではCloudFrontを利用したS3のコンテンツへのアクセス方法を解説しました。この構成が理解できれば画像だけでなくHTMLやJS、動画などさまざまコンテンツへのアクセスのコントロールが可能になります。CloudFrontはWAFとも連携ができるので、細かいアクセス制御を設定したい場合は実施してみてくださいね！

アプリ開発
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

hakulaのアバター hakula

Hack Luck Labの管理人hakula(ハクラ)です。2012年にSIerに新卒入社し、SE、新規事業、情シスを担当。その後、ITコンサルを経て、現在はバックエンドエンジニア。過去にはC#、SQL Server、JavaScriptで開発を行い、現在はPython、Rest Framework、Postgresql、Linux、AWSなどを使用しています。ノーコードツールやDX関連も興味あり。「技術は価値を生むために使う」ことが信条で、顧客や組織への貢献を重視しています。

この著者の記事一覧へ

関連記事

目次