ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

CDN経由で静的リソースを配信する

注記

この記事では、Liferayを設定して静的リソース（画像、CSS、JS）のURLを書き換え、別のCDNドメインから配信する方法について説明します。

コンテンツ配信ネットワーク（CDN）とは、静的なファイルベースのコンテンツをキャッシュするための分散型インフラストラクチャです。訪問者がサイトにアクセスすると、静的コンテンツは訪問者に最も近いサーバーから読み込まれるため、リクエストの速度が向上します。

CDNはキャッシュプロキシとして機能します。これは、静的コンテンツがローカルサーバーにコピーされると、すばやく簡単に取得できるようにキャッシュに保存されることを意味します。これにより、ブラウザは地球の裏側ではなく、通り沿いにあるローカルサーバーから静的リソースをダウンロードできるため、待ち時間が短縮されます。アルゴリズムが、リクエストに最も近いサーバーを見つけます。下の図は、地理的な近さを利用して遅延を最小化する様子を示しています。

CDNを使用すると、ユーザーは最も近いローカルサーバーから静的リソースを要求できるため、ダウンロード時間が短縮されます。

マップ上の赤い線は、リクエストによってサーバーからユーザーまでの移動が必要な距離を表しています。リクエストの待機時間が短縮され、アプリケーションサーバーの負荷が軽減されるため、CDNはパフォーマンスを向上させるための優れたオプションです。

LiferayがCDN経由でのサービス提供をサポートしているリソースは以下の通りです。

Liferayおよびカスタムプラグインに含まれるファイル
動的に生成されたCSS *
動的に生成されたJavaScript *

※CDNの動的リソースを有効にする必要があります。

注記

CDNは、外部ソースから動的に読み込まれるリソースは配信しません。

Liferay CDNの要件

CDNは、次の要件を満たす必要があります。

リソースを動的に保存および取得します: CDN が機能するために手動で何かをアップロードする必要がないことを CDN プロバイダーに確認してください。 CDNはリソースを自動的に取得する必要があります。
オリジンプルのサポート: CDN は、リソースが初めて要求されたときに、手動で CDN にファイルをアップロードする必要なく、Liferay サーバー (オリジン) からリソースを自動的に取得する必要があります。

認定されたCDNを設定した後、それを使用するようにLiferayを設定します。

LiferayでCDNを使用するように設定する

CDNを設定するための方法には、次の2つがあります。

コンテンツ配信ネットワークのプロパティをポータルのプロパティファイルに設定します。
コントロールパネルを使用する

コントロールパネルでCDNを設定する方法は次のとおりです。

Liferay では、 グローバルメニュー () をクリックし、 コントロールパネル に移動します。
構成カテゴリで、 インスタンス設定 を選択します。［Instance Settings］ページが表示されます。
仮想インスタンススコープのナビゲーションで、一般をクリックします。［General Main Configuration］ページが表示され、次の3つのCDN関連フィールドが含まれています。
- CDNホストHTTP
- CDN ホスト HTTPS
- CDN動的リソースを有効にする

コントロールパネルでCDNを設定します。

CDNホストのURLを指定するときは、必ずプロトコルとドメインを含めてください。

CDN ホスト HTTP: http://cdnhost1.liferay.com CDN ホスト HTTPS: https://cdnhost2.liferay.com

CDN 動的リソース が選択されている場合 (デフォルト)、Liferay は CDN を介して動的に生成された CSS と JavaScript を提供します。遅延読み込みをサポートしないCDNを使用する場合は、これを無効にする必要があります。

CDNホストを設定しました。 Liferayは、以前のホストを新しいCDNホストに置き換える静的リソースURLを生成します。これにより、リソースがキャッシュされ、CDNによって配信されることが保証されます。

ヒント

SDN を介して SVG アイコンを読み込む際に、 <use> タグがクロスオリジンリクエストをサポートしていないため、CORS 警告が表示される場合があります。 svg4everybody ポリフィルが SVG をインライン化するため、アイコンは正しくレンダリングされます。警告を無視するか、同じオリジンからアセットを配信することで警告を回避できます。