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

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を設定します。

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

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

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

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

Liferay では、 グローバルメニュー () をクリックし、 コントロールパネル タブを選択します。
［設定］カテゴリで、［Instance Settings］を選択します。［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 をインライン化するため、アイコンは正しくレンダリングされます。警告を無視するか、同じオリジンからアセットを配信することで警告を回避できます。