Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mkydk(Daiki Mukaiyama)

CloudFrontの自動圧縮機能を完全マスター！特定ファイルタイプの圧縮設定と実装方法

Posted at

概要

CloudFrontの自動圧縮機能を使用して、特定のファイルタイプを効率的に圧縮する方法を解説します。GzipとBrotli圧縮の仕組み、対応ファイル形式、設定手順、そしてパフォーマンス向上とコスト削減のベストプラクティスを実例とともに紹介します。

目次

  1. はじめに
  2. CloudFrontの圧縮メカニズム
  3. 圧縮対象のファイルタイプ
  4. 圧縮すべきファイルと避けるべきファイル
  5. 圧縮設定の実装手順
  6. 圧縮の制約事項と注意点
  7. トラブルシューティング
  8. パフォーマンス測定と最適化
  9. 終わりに

はじめに

Webサイトの高速化は、ユーザー体験の向上とSEO対策の両面で重要な要素です。Amazon CloudFrontの自動圧縮機能は、配信するコンテンツのサイズを削減し、転送速度を向上させる強力な機能です。

CloudFrontの公式ドキュメント ( https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html ) では、『圧縮されたオブジェクトを配信することで、ダウンロードが高速化され、JavaScriptやCSSファイルに対して特に効果的で、場合によってはオリジナルサイズの4分の1以下になる』と説明されています。

この記事では、CloudFrontの自動圧縮機能の仕組みから実装方法、最適化のベストプラクティスまで、実践的な内容を詳しく解説します。

CloudFrontの圧縮メカニズム

圧縮の仕組みとフロー

CloudFrontの圧縮は、以下の流れで動作します：

  1. リクエスト受信: ビューワーが Accept-Encoding ヘッダーに gzip または br（Brotli）を含めてリクエストを送信
  2. キャッシュ確認: エッジロケーションで圧縮済みオブジェクトの存在を確認
  3. オリジン転送: キャッシュにない場合、オリジンにリクエストを転送
  4. 圧縮判定: オリジンからの応答を基に圧縮の可否を判定
  5. 圧縮実行: 条件を満たす場合、CloudFrontが圧縮を実行
  6. 配信とキャッシュ: 圧縮済みオブジェクトをビューワーに配信し、エッジロケーションにキャッシュ

image.png

GzipとBrotli圧縮の違い

CloudFrontは2つの圧縮形式をサポートしています：

圧縮形式 圧縮率 処理速度 ブラウザ対応 特徴
Gzip 標準 高速 全ブラウザ対応 広く普及、安定性が高い
Brotli 高い（約20%向上） やや低速 モダンブラウザ テキストファイルに特に効果的

重要な点として、『ChromeとFirefoxブラウザは、HTTPS経由でのリクエストでのみBrotli圧縮をサポートし、HTTPリクエストではサポートしない』という制限があります。

両方の形式をサポートするブラウザの場合、CloudFrontは自動的により効率的なBrotli圧縮を選択します。

圧縮対象のファイルタイプ

対応MIME Type一覧

CloudFrontは以下のContent-Typeヘッダーを持つファイルを圧縮対象とします：

テキスト系ファイル

  • text/html
  • text/css
  • text/javascript
  • text/plain
  • text/xml
  • text/csv

アプリケーション系ファイル

  • application/javascript
  • application/json
  • application/xml
  • application/pdf
  • application/rss+xml
  • application/xhtml+xml

フォント系ファイル

  • application/font
  • application/font-sfnt
  • application/opentype
  • application/truetype
  • application/ttf
  • font/eot
  • font/opentype
  • font/otf
  • font/ttf

その他

  • image/svg+xml
  • application/wasm
  • application/protobuf

【挿絵候補】：Python diagramsでファイル形式別圧縮効果の比較表（HTMLファイル、CSSファイル、JavaScriptファイルなどの圧縮前後のサイズ比較）

圧縮すべきファイルと避けるべきファイル

圧縮すべきファイル

高い圧縮効果が期待できるファイル

  • HTMLファイル: 大量の空白やタグの繰り返しがあるため、50-80%の圧縮率を実現
  • CSSファイル: プロパティの繰り返しパターンにより、60-70%の圧縮率
  • JavaScriptファイル: 変数名や関数名の繰り返しにより、60-80%の圧縮率
  • JSONファイル: 構造化データの繰り返しパターンにより、70-90%の圧縮率
  • SVGファイル: XMLベースのため、50-70%の圧縮率

フォントファイル（効果的な場合）

  • TTF/OTFファイル: 未圧縮のフォントファイルは20-40%の圧縮効果
  • EOTファイル: 古いブラウザ対応用フォントファイル

圧縮を避けるべきファイル

既に圧縮されているファイル

  • 画像ファイル: JPEG、PNG、GIF、WebPなどは既に圧縮されており、追加圧縮の効果は限定的
  • 動画ファイル: MP4、WebM、AVIなどは既に高効率で圧縮済み
  • 音声ファイル: MP3、AAC、OGGなどは既に圧縮されている

バイナリファイル

  • 実行ファイル: .exe、.dmg、.appなどは圧縮効果が低い
  • アーカイブファイル: .zip、.rar、.7zなどは二重圧縮となり効果なし

セキュリティ上の考慮が必要なファイル

  • 機密データ: 圧縮により情報が漏洩する可能性があるファイル
  • 暗号化されたファイル: 圧縮により暗号化の効果が減少する可能性

圧縮判定の実践的な指針

# ファイルサイズと圧縮効果の確認例
$ gzip -c style.css | wc -c  # 圧縮後サイズ
$ wc -c style.css           # 元のサイズ

# 圧縮率の計算
# 圧縮率 = (1 - 圧縮後サイズ / 元のサイズ) × 100

一般的に、30%以上の圧縮効果が期待できるファイルは積極的に圧縮を適用し、10%以下の場合は圧縮処理のオーバーヘッドを考慮して無効化を検討することが推奨されます。

圧縮設定の実装手順

コンソールでの設定方法

  1. CloudFrontコンソールへのアクセス

    • AWS Management Consoleから「CloudFront」を選択
    • 対象のディストリビューションを選択

  2. ビヘイビアの設定

    • 「Behaviors」タブを選択
    • 編集対象のビヘイビアを選択し「Edit」をクリック

  3. 圧縮設定の有効化

    • 「Compress objects automatically」を「Yes」に設定
    • キャッシュポリシーで「Gzip」と「Brotli」の両方を有効化
    • 「Minimum TTL」を0より大きい値に設定

AWS CLIでの設定

# ディストリビューション設定の取得
aws cloudfront get-distribution-config --id YOUR_DISTRIBUTION_ID > distribution.json

# 設定ファイルの編集（圧縮設定の有効化）
# "Compress": true を追加

# 設定の更新
aws cloudfront update-distribution --id YOUR_DISTRIBUTION_ID --distribution-config file://distribution.json --if-match ETAG_VALUE

CloudFormationでの設定

Resources:
  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        DefaultCacheBehavior:
          Compress: true
          CachePolicyId: !Ref MyCachePolicy
          TargetOriginId: myOrigin
          ViewerProtocolPolicy: redirect-to-https
        
  MyCachePolicy:
    Type: AWS::CloudFront::CachePolicy
    Properties:
      CachePolicyConfig:
        Name: CompressionEnabledPolicy
        Comment: Cache policy with compression enabled
        DefaultTTL: 86400
        MaxTTL: 31536000
        MinTTL: 1
        ParametersInCacheKeyAndForwardedToOrigin:
          EnableAcceptEncodingBrotli: true
          EnableAcceptEncodingGzip: true
          HeadersConfig:
            HeaderBehavior: none
          QueryStringsConfig:
            QueryStringBehavior: none
          CookiesConfig:
            CookieBehavior: none

キャッシュポリシーの重要性

CloudFrontの公式ドキュメントでは、『Brotli圧縮を使用するには、キャッシュポリシーを使用する必要があり、Brotliはレガシーキャッシュ設定をサポートしていない』と明記されています。

適切なキャッシュポリシーの設定により、圧縮されたコンテンツが効率的にキャッシュされ、パフォーマンスが最大化されます。

圧縮の制約事項と注意点

ファイルサイズ制限

CloudFrontは『1,000バイトから10,000,000バイトのサイズのオブジェクトを圧縮する』という制限があります。

  • 1KB未満のファイル: 圧縮オーバーヘッドが効果を上回るため対象外
  • 10MB超のファイル: 圧縮処理によるレイテンシーを避けるため対象外

HTTPステータスコード制限

圧縮が適用されるHTTPステータスコードは限定されています：

  • 200 (OK): 正常なレスポンス
  • 403 (Forbidden): アクセス拒否エラー
  • 404 (Not Found): ファイルが見つからないエラー

その他のステータスコード（500番台エラーなど）では圧縮は適用されません。

既存キャッシュへの影響

重要な注意点として、『CloudFrontは、オリジンからオブジェクトを取得する際に圧縮を行う。圧縮を設定した時点で、既にエッジロケーションにキャッシュされているオブジェクトは圧縮されない』という制限があります。

既存のキャッシュされたオブジェクトに圧縮を適用するには、以下の方法があります：

# 特定ファイルの無効化
aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/css/style.css"

# 全ファイルの無効化（注意：コストが発生）
aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

Content-Lengthヘッダーの必要性

オリジンは『Content-Lengthヘッダーをレスポンスに含める必要があり、CloudFrontはこのヘッダーを使用してオブジェクトのサイズが圧縮範囲内かどうかを判定する』と説明されています。

このヘッダーが欠落している場合、CloudFrontは圧縮を実行しません。

トラブルシューティング

圧縮が動作しない場合の確認項目

1. リクエストヘッダーの確認

# curlを使用してヘッダーの確認
curl -H "Accept-Encoding: gzip, br" -I https://your-domain.com/style.css

2. Content-Typeヘッダーの確認

# レスポンスヘッダーの確認
curl -I https://your-domain.com/style.css
# Content-Type: text/css が含まれていることを確認

3. ファイルサイズの確認

# ファイルサイズが1KB～10MBの範囲内かを確認
curl -s https://your-domain.com/file.js | wc -c

4. キャッシュポリシーの確認

  • AWS Consoleで「EnableAcceptEncodingGzip」と「EnableAcceptEncodingBrotli」が有効になっているか確認
  • MinTTLが0より大きい値に設定されているか確認

ETagヘッダーの変換について

CloudFrontは『圧縮されていないオブジェクトが有効で強いETagヘッダーを含む場合、オブジェクトを圧縮すると、強いETagヘッダー値を弱いETagに変換する』処理を行います。

この変換により、圧縮版と非圧縮版が意味的に同等として扱われ、不要なデータ転送が削減されます。

ETag変換の例

# 元のETag（強い）
ETag: "abc123"

# 圧縮後のETag（弱い）
ETag: W/"abc123"

パフォーマンス測定と最適化

圧縮効果の測定方法

1. ブラウザ開発者ツールでの確認

  • Network タブで転送サイズと実際のサイズを比較
  • Response Headers で Content-Encoding の値を確認

2. コマンドラインでの測定

# 圧縮前のサイズ
curl -s https://your-domain.com/app.js | wc -c

# 圧縮後のサイズ
curl -H "Accept-Encoding: gzip" -s https://your-domain.com/app.js | wc -c

3. 自動化されたモニタリング

# CloudWatchメトリクスの確認
aws cloudwatch get-metric-statistics \
  --namespace AWS/CloudFront \
  --metric-name BytesDownloaded \
  --dimensions Name=DistributionId,Value=YOUR_DISTRIBUTION_ID \
  --start-time 2025-01-01T00:00:00Z \
  --end-time 2025-01-02T00:00:00Z \
  --period 3600 \
  --statistics Sum

コスト削減効果の算出

CloudFrontの料金は転送データ量に基づいて計算されるため、圧縮によるコスト削減効果を算出できます：

# 月間コスト削減額の計算例
圧縮前の月間転送量: 1TB = 1,000GB
圧縮率: 70%
圧縮後の月間転送量: 300GB
削減量: 700GB

# 東京リージョンの場合（2025年1月時点）
# 最初の10TB: $0.114/GB
コスト削減額 = 700GB × $0.114 = $79.8/月

最適化のベストプラクティス

1. ファイル種別に応じた戦略

  • CSS/JSファイル: 必ず圧縮を有効化
  • HTMLファイル: 圧縮効果が高いため優先的に適用
  • 画像ファイル: 既に圧縮されているため無効化を検討

2. キャッシュ戦略との組み合わせ

  • TTL設定を適切に行い、圧縮されたコンテンツを長期間キャッシュ
  • バージョニングを活用して、更新時の無効化を最小限に抑制

3. モニタリングと継続的改善

  • CloudWatchを使用して転送量とパフォーマンスを定期的に監視
  • 圧縮率の低いファイルは除外対象として検討

終わりに

CloudFrontの自動圧縮機能は、Webサイトのパフォーマンス向上とコスト削減を同時に実現する強力な機能です。特に、テキストベースのファイル（HTML、CSS、JavaScript）では大幅な改善効果が期待できます。

重要なポイントは、圧縮すべきファイルと避けるべきファイルを適切に判断し、ファイルタイプに応じた最適な設定を行うことです。また、既存のキャッシュへの影響や制約事項を理解し、適切な運用を行うことが成功の鍵となります。

今後のステップとして、実際の本番環境での効果測定を行い、継続的な最適化を進めることをお勧めします。CloudFrontの圧縮機能を活用して、より高速で効率的なWebサイトを実現しましょう。

参考文献・参考サイト

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?