シングルページアプリケーションのルーティングとホスティングの規則

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecoreインスタンス内でAngular CLIアプリケーションをホストし、アプリケーションへの要求のルーティングに規則を使用できます。

このトピックでは、次の内容について説明します。

SitecoreのAngularアプリケーション

Angular-CLIアプリケーションには通常、一連の関連ファイルが含まれています。

アプリケーション・エントリー・ポイント・ファイル (index.html)。このファイルは、アプリケーションが使用するJavaScriptファイルを参照します。
コンパイルおよびバンドルされたJavaScriptファイルのセット ( main.bundle.js、inline.js、styles.bundle.jsなど) 。JavaScriptファイルのセットは、コンパイルエンジンによって異なります。JavaScriptファイルには、アプリケーションロジックが含まれています。

デフォルトでは、Angular-CLIアプリケーションはサーバーのルートで実行されます。ただし、Sitecoreではこの方法でAngularアプリケーションを実行できないため、アプリケーションのルートパスを変更する必要があります。

通常、Angular-CLIアプリケーションには、Angularクライアント側によって解決される内部ルーティングが含まれています。ユーザーは、アプリケーションのエントリポイントへの仮想パス(index.html)と、アプリケーション内で設定された内部クライアント側ルートの組み合わせを通じて、任意のページにアクセスします。

次のシナリオについて考えてみます。

アプリケーションは、: your instance\website\sitecore\shell\client\Applications\MyAwesomeApp\
ユーザーがこのURLにアクセスすると、Webサーバーは自動的にアプリケーションファイルを取得し、ブラウザに返します。ブラウザにindex.htmlファイルが表示されます。
アプリケーションのルーティングは、/dashboardルートを取得してダッシュボードページを表示するように構成されています。
ユーザーがアプリケーション内からダッシュボードページにアクセスすると、ブラウザにはURL http://your instance/sitecore/shell/client/Applications/MyAwesomApplication/dashboardが表示されますが、ブラウザにはサーバーから既に取得済みの適切なファイルが自動的に表示されます。
ただし、ユーザーがダッシュボードのURLをブラウザに手動で入力すると、サーバーはファイルを見つけられず、エラー404(ファイルが見つかりません)を返します。これは、ダッシュボードのルートが、そのパスを持つサーバー上のファイルに直接対応していないために発生します。

この問題を解決するには、ルーティング規則を使用します。

ルーティングとホスティングの規則

ルーティング規則とホスティング規則を使用する場合は、アプリケーションごとにフォルダーを定義します。Sitecoreは、サーバーがクライアント側ルートの要求に適切に応答するように設定します。

規則は次のとおりです。

各アプリケーションには、一意のアプリケーション名 (AppName) が必要です。
アプリケーション・ホスト・フォルダは、ファイル・システム内のアプリケーションごとに定義します。 /sitecore/shell/client/Applications/AppName。
ng-scモジュールのビルドタスクを使用して、Angularエントリポイントに基づいてSitecoreエントリポイントを生成します。このタスクの結果、index.htmlの代わりにindex.aspxページが表示されます。これを行うには、アプリケーションをSitecore認証に準拠させ、アプリケーションのCSRF対策保護を有効にする必要があります。

ng-sc cliツール

ng-sc cliツールを使用して、index.htmlファイルをindex.aspxに変更します。このツールは、Angularプロジェクトのビルド後のステップとして使用できます。ツールの名前が .aspxに変更されると、ファイルの先頭に1行のコードも追加されます。このコードは、アプリケーションがSitecore内で実行されるときにSPEAK 3機能を有効にします。これらの機能には、CSRF対策トークン、エントリポイントユーザー認証などが含まれます。

ng-sc --entry ./dist/index.htmlは、次のパラメーターと共に使用します。

旗	形容	既定値
--entry、-e	aspxファイルを作成するファイルの名前 (入力ファイル)。標準のAngular-CLIセットアップでは、これは./dist/index.html.	この引数は必須であり、デフォルト値はありません。
--out、-o	入力ファイルに対する出力ファイルの名前。	デフォルト値はindex.aspxです。
--keep、-k	ブール値。設定 (true) すると、ツールは入力ファイルを削除しません	Sitecoreアプリケーションと一緒にエントリ .htmlファイルを発送することは推奨されていないため、デフォルトでエントリファイルを削除します。

Sitecoreがリクエストを処理する方法

Sitecore.Speak.Integrationモジュールは、次のように要求を処理します。

モジュールはconfigファイルを読み取ります。
このモジュールは、すべての要求をリッスンするようにpreprocessRequestパイプラインを拡張します。
モジュールは、URL要求がアプリケーションフォルダの1つに対応することを検出すると、URLを書き換えて、要求を正しいアプリケーションのindex.aspxファイルにリダイレクトします。

エントリーポイント

デフォルトでは、ng-sc cliツールは、Sitecore.Speak.Integration.Spa.SecureSpaPageクラスを継承するASP.NET Web Formsページを作成します。

index.aspxファイルにリダイレクトした後、Sitecoreインテグレーションは次のようにバックエンドロジックを設定します。

CSRF防止Cookieを設定します。
対応するアプリケーションのSitecoreアイテムの検索を試みます。
現在のユーザーがこのアイテムにアクセスできるかどうかをチェックします。項目がない場合、アクセス権限はチェックされません。
このアイテムのEntryPointフィールド(デフォルトではindex.aspx)を読み取ります。アプリケーションアイテムがない場合は、index.aspxをエントリポイントとして使用します。
規則に従ってアプリケーションフォルダの検索を試みます。
EntryPointファイルがアプリケーションフォルダに存在する場合、URLはこのファイルを指すように書き換えられます。

Sitecore.Speak.Integration.Spa.SpaPageクラスもあります。このクラスはShellPage.IsLoggedIn()チェックを行いません。アプリケーションでSitecore認証が必要ない場合は、このクラスをアプリケーションのエントリポイントに使用できます。

既知の問題

Sitecoreのコンテキスト言語は、sc_lang=languageクエリ文字列パラメーターで切り替えることができます。SPEAK 3は、エントリポイントソリューションを使用するアプリケーションでこの機能をサポートしていません。

この記事を改善するための提案がある場合は、お知らせください!