既存のSitecore MVCアプリケーションをヘッドレスレンダリングでJamstackアーキテクチャに変換する

Sitecoreヘッドレス開発
既存のSitecore MVCアプリケーションをヘッドレスレンダリングでJamstackアーキテクチャに変換する
チュートリアル: MVC アプリケーションの静的な生成

チュートリアル: MVCアプリケーションの静的な生成

Version:

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

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

Sitecoreが提供するヘッドレスレンダリングソリューション (Sitecore Headless ServicesやSitecore JavaScript Rendering SDKs (JSS)など) を使用すると、JSS Next.jsアプリを使用してMVCアプリケーションを静的に生成できます。

JSSを使用してMVCアプリケーションを静的に生成するプロセスを開始する前に、次の前提条件を満たす必要があります。

Sitecore XM/XPバージョン10.2+ およびSitecoreヘッドレスサービスモジュールバージョン19+ のSitecoreインスタンスにアクセスできます。
Sitecore JavaScript Rendering SDKs (JSS)、Next.js、Sitecore JavaScript Rendering SDK (JSS) for Next.jsについてある程度理解している。
JSS CLIバージョン19+ をインストールする必要があります。
APIキーを作成する必要があります。

大事な

これらの手順に従うときは、変換に増分アプローチを採用している場合、既存のMVCページと静的MVCページの両方をサポートする場合があり、これには複数のレイアウト項目またはカスタマイズが必要になることに注意してください。

このチュートリアルでは、次の方法について説明します。

MVCアプリケーションを静的HTML生成に適合させます。
MVCレイアウトのプレースホルダーをレイアウトサービスの応答に含めます。
Sitecoreレイアウトサービスを設定して、MVCレンダリングのHTMLを出力します。
MVCアプリケーションをレンダリングするためのJSS Next.jsアプリケーションを準備します。
既存のMVCアプリからレイアウトとアセットを提供するようにNext.jsアプリケーションを適応させます
Next.jsアプリケーションを起動します。

大事な

この変換プロセスは、JSSアプリケーションの選択と、SitecoreおよびMVCアプリケーションの既存の設定に応じて、いくつかの制限があります。

MVCアプリケーションを静的HTML生成に適合させる

MVCアプリケーションでは、JSSアプリを使用した静的HTML生成と互換性を持たせるために、いくつかの変更が必要になる場合があります。

MVCアプリケーションを適応させるには:

JSSアプリで編集と静的生成のサポートを有効にするには、サイトのルートが /sitecore/templates/Foundation/JavaScript Services/App template.
編集サポートを有効にするには、ページのレイアウトでテンプレート /sitecore/templates/Foundation/JavaScript Services/JSS Layoutが使用または継承されていることを確認してください。 Path値は使用せず、有効なファイルパスのみである必要があります。デフォルトでは、JSSは /Views/JssApp.cshtml.
JSS Dictionary APIには、<app>構成のdictionaryDomain属性など、特定のテンプレートと構成が必要です。互換性のためにMVCソリューションを調整する必要がある場合があります。

MVCレイアウトのプレースホルダーをレイアウトサービスの応答に含める

JSSアプリケーションでMVCレイアウトをレンダリングするには、レイアウトで使用可能なプレースホルダーをLayout Serviceレスポンスに含める必要があります。

先端

このチュートリアルでは、RESTレイアウトサービスエンドポイントの例を使用しますが、この手順はGraphQLとExperience Edgeでも同様に機能し、レイアウトクエリを使用してデータにアクセスできます。

Layout Serviceの応答を調べるには、<cm_server>/sitecore/api/layout/render?item=/&sc_apikey=<api_key>のエンドポイントにアクセスします。構成されたサイト開始アイテムのJSON出力は、/ で確認できます。

メモ

マルチサイトソリューションの場合は、sc_siteクエリパラメーターを追加します。 sc_mode=normalクエリパラメーターを使用して、編集モードのレイアウトデータを無効にします。

プレースホルダー情報がsitecore > route > placeholdersの下のJSONデータ構造にない場合は、レイアウトごとにLayout Service Placeholdersフィールドを設定する必要があります。このフィールドは、レイアウトサービスの応答データに含めるプレースホルダ情報を決定します。

レイアウトのplaceholdersフィールドに入力するには:

コンテンツツリーのsitecore/layouts/Layoutsで、選択したレイアウトのrootプレースホルダーをLayout Service Placeholdersフィールドに追加します。

手記

Placeholder Settingsアイテムが存在しない場合は、作成します。
以前にアクセスしたレイアウトサービスエンドポイントを更新します。 Sitecore/route /placeholdersのデータにあるプレースホルダー情報が入力されました。データには、ページのレンダリングに必要なすべてのプレースホルダーとコンポーネントが含まれます。

Sitecoreレイアウトサービスを設定して、MVCレンダリングのHTMLを出力します

レイアウトのLayout Service Placeholdersフィールドの設定に従って、JSON形式のプレースホルダー情報を取得します。

すべてのコンポーネントをJavaScriptに変換する前にMVCアプリケーションをHTMLに静的にレンダリングするには、JSSアプリケーションに到達する前にコンポーネント情報をHTMLに変換する必要があります。

MVCレンダリングのHTMLを出力するようにレイアウトサービスを設定するには:

sitecore/layout/Renderingsに移動し、次のいずれかの方法を使用してレンダリングのHTML出力を有効にします。

関連するレンダリングでHTML出力を手動で有効にするには、Render as HTMLチェックボックスをオンにします。このオプションは、ネストされたすべてのレンダリングに対しても有効にする必要があります。

先端

この設定が必要なコンポーネントを特定するには、componentNameプロパティのJSON出力を確認します。 componentNameはレンダリングアイテム名と一致します。

Sitecore PowerShell拡張機能がインストールされている場合は、Sitecore PowerShell ISEツールで次のスクリプトを実行して、allレンダリングのRender as HTMLチェックボックスをオンにします。

手記

スクリプトを実行するには、Sitecore PowerShell拡張機能がインストールされている必要があります。

Get-ChildItem "/sitecore/layout/Renderings" -Recurse |
	Where-Object { $_.TemplateName -eq "View rendering" -or $_.TemplateName -eq "Controller rendering" } |
	ForEach-Object {
		$val = $_.Fields["Render as HTML"].Value
		if ($val -eq "1") {
		    return
		}
		Write-Host "Setting '$($_.Name)'"
		$_.Editing.BeginEdit()
	    $_.Fields["Render as HTML"].Value = 1
		$_.Editing.EndEdit()
	}

グローバル設定を使用してJSONレンダリングを無効にし、すべてのレンダリングでHTMLシリアル化に切り替えます。

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
               xmlns:set="http://www.sitecore.net/xmlconfig/set/">
	<sitecore>
		<layoutService>
			<!-- Disable JSON / enable HTML serialization for all MVC renderings -->
			<serializableRenderingTypes>
				<viewRendering>
					<patch:delete />
				</viewRendering>
				<controllerRendering>
					<patch:delete />
				</controllerRendering>
			</serializableRenderingTypes>
		</layoutService>
	</sitecore>
</configuration>

変更を公開します。
レイアウトサービスエンドポイントを更新し、コンポーネントデータ出力がHTMLであることを確認します。

MVCアプリケーションをレンダリングするためのJSS Next.jsアプリケーションの準備

MVCアプリケーションを静的に生成するには、JSS for Next.jsを使用して基本的なJSS Next.jsアプリケーションを作成することをお勧めします。

先端

JSSが提供するサンプルNext.jsアプリケーションを基にアプリケーションを作成する前に、データの取得にGraphQLサービスとRESTサービスのどちらを使用するか、またMVCアプリケーションをJavaScriptに移行したときに使用するプリレンダリング方法を検討してください。

Experience Edge for XMとの互換性のためにGraphQLをお勧めします。

MVCアプリのHTML出力をレンダリングするためのNext.js JSSアプリケーションを作成するには:

ターミナルで、次のコマンドを実行して、JSSを使用してNext.jsアプリケーションを作成します。
npx create-sitecore-jss nextjs
大事な

<app-name>はMVCサイト名と一致する必要がありますが、アプリ名の書式設定の制限に注意する必要があります。たとえば、MyMvcAppは有効なMVCサイト名ですが、JSSイニシャライザでは小文字のみが許可されます。JSSアプリケーションを作成するときは、小文字のアプリケーション名 (my-mvc-appなど) を指定します。プロセスが終了したら、package.jsonファイルでconfig.appNameプロパティをMyMvcAppに更新します。
Next.js JSSアプリケーションをSitecoreに接続します。
Next.jsアプリケーションのルートディレクトリで、Sitecore設定パッチファイル /sitecore/config/<app-name>.configを確認します。この設定は、Sitecoreインスタンスにデプロイする必要があります。

手記

既存のMVCサイトに一致する <site/> 構成が既にあるため、サイト構成属性をマージできます。
高度なSitecoreエディターを使用して編集を有効にします。

既存のMVCアプリからレイアウトとアセットを提供するようにNext.jsアプリケーションを適応させます

Sitecore MVCアプリケーションをJSS Next.jsアプリでレンダリングするには、一致するレイアウトと、MVCアプリのリソース (スタイルやスクリプトなど) にアクセスできる必要があります。

Next.jsアプリケーションを適応させるには:

アプリでページのhtml要素やbody要素をカスタマイズする必要がある場合は、src/pagesディレクトリでカスタムDocument componentを定義します。
src/Layout.tsxファイルを適応させ、基本マークアップやルートプレースホルダーなど、アプリケーションのルートレイアウトをMVCベースのレイアウトに合わせて定義します。
src/pages/_app.tsxファイルやsrc/Layout.tsxファイルを変更して、フロントエンドアセットを含めます。

先端

Next.jsでのサポートが組み込まれているCSSソリューションに移行し、next/scriptコンポーネントを使用して外部スクリプトを読み込むことを検討してください。

手記

生成されたアプリは、BootstrapとカスタムCSSを使用します。詳細については、ディレクトリsrc/assets/を参照してください。
ビルドプロセス中にそのままにしておくファイルを、Next.jsアプリケーションのルートディレクトリにあるpublicディレクトリに配置します。詳細については、静的ファイルの提供に関するNext.jsドキュメンテーションを参照してください。
DOMContentLoadedイベントまたはドキュメント対応イベントに依存する既存のJavaScriptコードを調整して、イベント委任などを使用します。これは、クライアント側のルート変更によってこれらのイベントが保証されなくなるためです。
Sitecore Content ManagementまたはContent Deliveryサーバーに送り返すリクエストの書き換えを設定します。JSSアプリケーションには一般的なリダイレクト (Sitecore、Media) が事前設定されていますが、MVCソリューションで行うカスタマイズに対してはリダイレクトを設定する必要があります。

先端

Next.jsには、特にJamstackアーキテクチャにすぐに変換したくないサイト機能に対して、段階的な採用を可能にするために書き換えを構成するための堅牢な機能が含まれています。
現時点でMVCアプリケーションがSitecoreディクショナリを使用していない場合は、Next.jsアプリからディクショナリの使用を一時的に削除できます。 src/lib/page-props-factory.tsファイルで、ディクショナリ呼び出しを削除します。
MVCアプリケーションが多言語の場合は、Sitecoreの設定に合わせてNext.jsアプリケーションで国際化を設定する必要があります。それ以外の場合は、JSS Next.jsアプリからコンテンツ翻訳機能を削除します。
代わりにレイアウトデータを使用するには、マークアップをRazorビューに直接挿入するC# コードをリファクタリングする必要があります。たとえば、動的 <meta/> タグをheadプレースホルダーに追加します。

Next.jsアプリケーションを起動します

Next.jsアプリケーションは、開発モードまたは実動モードで起動できます。

アプリケーションを起動して開発を続行するには:

ターミナルのJSS Next.jsアプリのルートディレクトリで、次のスクリプトを実行します。
jss start:connected

アプリケーションを起動し、その運用動作をプレビューするには、次のようにします。

ターミナルのJSS Next.jsアプリのルートディレクトリで、次のスクリプトを実行します。
jss start:production

これらの手順を完了すると、Next.js JSSアプリケーションをデプロイできます。

また、コンポーネントをMVC/RazorからReact/Next.jsに段階的に変換するプロセスを開始することもできます。

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

チュートリアル: MVCアプリケーションの静的な生成

MVCアプリケーションを静的HTML生成に適合させる

MVCレイアウトのプレースホルダーをレイアウト サービスの応答に含める

Sitecoreレイアウト サービスを設定して、MVCレンダリングのHTMLを出力します

MVCアプリケーションをレンダリングするためのJSS Next.jsアプリケーションの準備

既存のMVCアプリからレイアウトとアセットを提供するようにNext.jsアプリケーションを適応させます

Next.jsアプリケーションを起動します

MVCレイアウトのプレースホルダーをレイアウトサービスの応答に含める

Sitecoreレイアウトサービスを設定して、MVCレンダリングのHTMLを出力します