Skip Navigation
Show nav
Dev Center
  • Get Started
  • ドキュメント
  • Changelog
  • Search
  • Get Started
    • Node.js
    • Ruby on Rails
    • Ruby
    • Python
    • Java
    • PHP
    • Go
    • Scala
    • Clojure
    • .NET
  • ドキュメント
  • Changelog
  • More
    Additional Resources
    • Home
    • Elements
    • Products
    • Pricing
    • Careers
    • Help
    • Status
    • Events
    • Podcasts
    • Compliance Center
    Heroku Blog

    Heroku Blog

    Find out what's new with Heroku on our blog.

    Visit Blog
  • Log inorSign up
View categories

Categories

  • Heroku のアーキテクチャ
    • Dyno (アプリコンテナ)
      • Dyno Management
      • Dyno Concepts
      • Dyno Behavior
      • Dyno Reference
      • Dyno Troubleshooting
    • スタック (オペレーティングシステムイメージ)
    • ネットワーキングと DNS
    • プラットフォームポリシー
    • プラットフォームの原則
  • Developer Tools
    • コマンドライン
    • Heroku VS Code Extension
  • デプロイ
    • Git を使用したデプロイ
    • Docker によるデプロイ
    • デプロイ統合
  • 継続的デリバリーとインテグレーション
    • 継続的統合
  • 言語サポート
    • Node.js
      • Working with Node.js
      • Node.js Behavior in Heroku
      • Troubleshooting Node.js Apps
    • Ruby
      • Rails のサポート
      • Bundler の使用
      • Working with Ruby
      • Ruby Behavior in Heroku
      • Troubleshooting Ruby Apps
    • Python
      • Working with Python
      • Python でのバックグランドジョブ
      • Python Behavior in Heroku
      • Django の使用
    • Java
      • Java Behavior in Heroku
      • Working with Java
      • Maven の使用
      • Spring Boot の使用
      • Troubleshooting Java Apps
    • PHP
      • PHP Behavior in Heroku
      • Working with PHP
    • Go
      • Go の依存関係管理
    • Scala
    • Clojure
    • .NET
      • Working with .NET
  • データベースとデータ管理
    • Heroku Postgres
      • Postgres の基礎
      • Postgres スターターガイド
      • Postgres のパフォーマンス
      • Postgres のデータ転送と保持
      • Postgres の可用性
      • Postgres の特別なトピック
      • Migrating to Heroku Postgres
    • Heroku Data For Redis
    • Apache Kafka on Heroku
    • その他のデータストア
  • AI
    • Working with AI
    • Heroku Inference
      • Inference API
      • Quick Start Guides
      • AI Models
      • Inference Essentials
    • Vector Database
    • Model Context Protocol
  • モニタリングとメトリクス
    • ログ記録
  • アプリのパフォーマンス
  • アドオン
    • すべてのアドオン
  • 共同作業
  • セキュリティ
    • アプリのセキュリティ
    • ID と認証
      • シングルサインオン (SSO)
    • Private Space
      • インフラストラクチャネットワーキング
    • コンプライアンス
  • Heroku Enterprise
    • Enterprise Accounts
    • Enterprise Team
    • Heroku Connect (Salesforce 同期)
      • Heroku Connect の管理
      • Heroku Connect のリファレンス
      • Heroku Connect のトラブルシューティング
  • パターンとベストプラクティス
  • Heroku の拡張
    • Platform API
    • アプリの Webhook
    • Heroku Labs
    • アドオンのビルド
      • アドオン開発のタスク
      • アドオン API
      • アドオンのガイドラインと要件
    • CLI プラグインのビルド
    • 開発ビルドパック
    • Dev Center
  • アカウントと請求
  • トラブルシューティングとサポート
  • Salesforce とのインテグレーション
  • アプリのパフォーマンス
  • Amazon CloudFront CDN の使用

Amazon CloudFront CDN の使用

日本語 — Switch to English

この記事の英語版に更新があります。ご覧の翻訳には含まれていない変更点があるかもしれません。

最終更新日 2022年02月15日(火)

Table of Contents

  • Amazon S3 と Amazon CloudFront の比較
  • ディストリビューションを作成する
  • ディストリビューションをテストする
  • Rails への CloudFront の追加
  • CORS

コンテンツ配信ネットワーク (CDN) を使用すると、サイトでの静的アセットの配信が最適化されるため、ページロードが高速化されます。静的アセットへのすべてのリクエストを Web dyno からオフロードすると、それらの dyno が動的コンテンツへのより多くのリクエストを処理できるようになります。この記事では、Heroku アプリで Amazon CloudFront を使用する方法について説明します。

プロビジョニングプロセスを効率化し、請求を統合するには、Amazon CloudFront の代わりに CDN アドオン​を使用します。

Amazon S3 と Amazon CloudFront の比較

多くの開発者は静的アセットを提供するために Amazon の S3 サービスを使用しますが、S3 は、負荷がかかった状態でのファイルの最適な配信のためにではなく、ファイルストレージ​のために設計されています。 代わりに、Amazon CloudFront などの CDN を使用して静的アセットを提供することをお勧めします。

Amazon の CloudFront​ サービスは、エッジキャッシュの場所から CSS や JavaScript ファイルなどの静的アセットを提供するためのコンテンツ配信ネットワークとして設計されています。

エッジキャッシュの場所とは、小さな静的ファイルの高スループット提供のために最適化された、世界中に分散されているサーバーのグループのことです。 レイテンシーベースの DNS 解決を使用して、Amazon は、アセットへのリクエストをエンドユーザーに最も近いエッジキャッシュの場所にルーティングします。

CloudFront は、いわゆるディストリビューション​から動作します。 ディストリビューションは、S3 バケット​に直接相当するものです。各ディストリビューションにはドメイン名が割り当てられています。

ディストリビューション URL の例として d3vam04na8c92l.cloudfront.net​ があります。

DNS CNAME レコードを使用すると、このドメインをアプリケーションから何か (cdn.mydomain.com​ など) の背後に隠せることに注意してください。

ディストリビューションは、その内容をオリジン​から取得します。オリジンは、ディストリビューション内にコピーがない場合に CloudFront が元のファイルを取得する場所です。CloudFront は、オリジンからリクエストされたファイルをキャッシュし、それらをエンドユーザーに直接返します。

CDN の操作

ディストリビューションを作成する

  1. Amazon AWS​ アカウントにログインします。
  2. CloudFront のコントロールパネル​にアクセスします。
  3. Create distribution​ を選択します。
  4. 配信方法の入力を求められたら、Web​ を選択します。

CloudFront のコントロールパネル

デフォルト値は、ほとんどのアプリケーションにとって十分です。各種のオプションについての詳細は、インラインヘルプを参照してください。 ディストリビューション URL を CNAME でエイリアス処理する場合は、Origin Domain Name​ の下にドメインを入力する必要があります。

アプリケーションのドメイン名を Origin Domain Name​ として入力します。 デフォルトでは、Amazon には S3 バケットの一覧が表示されます。 この値は上書きできます。

ディストリビューションが作成されてから Amazon がそれを設定するまでにしばらく時間がかかります。一般には、完了するまでに約 5 ~ 10 分かかります。 これのステータスは、CloudFront ユーザーインターフェースのインジケータを使用して追跡できます。

ディストリビューションをテストする

いずれかの静的アセット (CSS ファイルなど) のフル URL を選択することによって、設定が機能することを手動でテストできます。

http://www.mydomain.com/stylesheets/application-6502e5a88f02b90aeb32c2dd21ea37ab.css

このファイルを CloudFront エンドポイント経由でリクエストしてみます。

https://d3vam04na8c92l.cloudfront.net/stylesheets/application-6502e5a88f02b90aeb32c2dd21ea37ab.css

このリクエストにより、CSS ファイルが通常どおりアプリケーションから返されるように返されます。 このリクエストによりファイルが期待どおりに返されない場合は、CloudFront の設定を検証し、ディストリビューションの正しいドメインを使用していることを確認してください。

CloudFront は、"フィンガープリントが取られた" アセットファイル名 (つまり、ファイルの内容に基づいた一意の名前を持つファイル) でのみ正常に機能することに注意してください。 この理由は、その内容が変更されている場合でも、CloudFront は常に application.css​ を 1 つのファイルとして認識するため、ユーザーはそのファイルの古いバージョンを受信することになるからです。

 

SSL を使用して CloudFront アセットを提供するには、Amazon から指定されたディストリビューションドメインで HTTPS を使用します。 また、この目的のために CNAME を作成することもできますが、CNAME と SSL を使用して Cloudfront アセットを提供するとコストが追加されます。

Rails への CloudFront の追加

より簡単ではあるものの、あまり高性能ではないアプリケーション内での静的アセットのキャッシングについては、「Using Rack::Cache with Memcached in Rails 3.1+ (including Rails 4)​」(Rails 3.1+ (Rails 4 を含む) の Memcached での Rack::Cache の使用) を参照してください。

Rails のほとんどのバージョンには CDN のサポートが組み込まれています。組み込みのアセットヘルパーを使用して作成されたすべてのアセットリンクに CloudFront ドメインを付加するには、config/environments/production.rb​ 内で asset_host​ を設定します。

# config/environments/production.rb
config.action_controller.asset_host = "<YOUR DISTRIBUTION SUBDOMAIN>.cloudfront.net"

組み込みのヘルパーを使用してリンクされたアセット (image_tag​ など) のみが付加されます。asset_host​ を設定しても、手動で作成されたリンクには影響を与えません。リンクについての詳細は、Rails アセットパイプラインのドキュメント​を参照してください。

 

CloudFront は、アプリケーションから返された HTTP キャッシュヘッダーを考慮してミラーリングすることに注意してください。詳細は、「HTTP キャッシュヘッダーを使用したアプリケーションパフォーマンスの向上​」を参照してください。

CORS

サイト上のすべてのアセットを CDN 経由でロードする場合は、異なるオリジンからのリソースの使用に関するブラウザの警告またはエラーが表示されることがあります。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource.

オリジン間リソース共有 (CORS​) を使用すると、どのアセットを安全にロードできるかをブラウザに伝えることができます。これは、アセットを提供するときに特定のヘッダーを設定することによって機能します。これらのヘッダーは、Rails 5 の ActionDispatch::Static または rack-cors gem​ を使用して設定できます。

関連カテゴリー

  • アプリのパフォーマンス
定期的なジョブとカスタムクロックプロセス AWS S3 を使用して静的アセットとファイルアップロードを格納する

Information & Support

  • Getting Started
  • Documentation
  • Changelog
  • Compliance Center
  • Training & Education
  • Blog
  • Support Channels
  • Status

Language Reference

  • Node.js
  • Ruby
  • Java
  • PHP
  • Python
  • Go
  • Scala
  • Clojure
  • .NET

Other Resources

  • Careers
  • Elements
  • Products
  • Pricing
  • RSS
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku Blog
    • Heroku News Blog
    • Heroku Engineering Blog
  • Twitter
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku
    • Heroku Status
  • Github
  • LinkedIn
  • © 2025 Salesforce, Inc. All rights reserved. Various trademarks held by their respective owners. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States
  • heroku.com
  • Legal
  • Terms of Service
  • Privacy Information
  • Responsible Disclosure
  • Trust
  • Contact
  • Cookie Preferences
  • Your Privacy Choices