💡

既存の Sitecore MVC コンポーネント を ヘッドレス 環境で表示する

2021/11/16に公開

Sitecore XM/XP 10.2 以降と Sitecore Headless Services モジュール 19.0 以降で、ヘッドレス環境(Sitecore JavaScript Rendering SDK (JSS) for Next.jsなど)に既存の Sitecore MVC コンポーネントを組み合わせて表示できるようになりました。

今回はそのアーキテクチャと利用方法の紹介です

アーキテクチャ

アーキテクチャの図を以下に記載します。簡単に説明しますと既存の Sitecore MVC で作成したレンダリングを、JSS で作成したページ上にコンポーネントとして配置して表示できるようになりました。

詳細はこちらをご参照ください(英語)
https://doc.sitecore.com/en/developers/hd/190/sitecore-headless-development/converting-existing-sitecore-mvc-applications-to-the-jamstack-architecture-with-headless-rendering.html

利用方法

実際に簡単な MVC レンダリングを作成して説明していきます。

ヘッドレス環境を用意

Docker compose を利用して自身のPCに用意できます。こちらを参照ください。
https://zenn.dev/nnasaki/articles/3593cddf6eac78

MVC レンダリングを作成

Visual Studio でソリューションを開く

ヘッドレス環境を作成すると、Visual Studio のソリューションも作成されますのでそちらを開きます。

ASP.NET MVC プロジェクトを追加

Visual Studio のソリューションエクスプローラーのソリューションで右クリックしてプロジェクトを追加します。スクリーンショットは Visual Studio 2019 英語版になります。

ASP.NET Web Application を選択

プロジェクト名を入力(MVCRenderingとしています)し、Frameworkは.NET Framework 4.8を選択します。

Emptyを選択し、「Add folders & core references」の「MVC」をチェックします。
Advanced の部分は任意で選択してください。

Sitecore View Rendering を追加

Views で右クリックして新しいアイテムを追加

Sitecore ツリーの MVC を選択、Sitecore View Rendering を選択

Sitecore Rock のダイアログで以下 Renderings の追加場所を指定

MVCRendering.cshtml を編集

<div> の間に以下のように表示する項目を入れる

<p> Rendering Test </p>

MVCRendering.cshtml をパブリッシュ

プロジェクトで右クリックし、Publish を選択

Folder を選択

デプロイの場所をヘッドレスプロジェクトにある docker\deploy\platform を選択

以下のようになれば設定完了です

MVCRendering.cshtml を右クリックし、Publish MVCRendering.cshtml を選択

以下のように表示されれば成功です

MVC レンダリングの確認

MVCRendering アイテムの確認

Sitecore Rock で Path を確認します。

Visual Studio の Containers ビューの左のツリーで {project_name}_cm_1 を選択し、Files タブを選択。 inetpub\wwwroot\Views\MVCRendering.cshtml があることを確認

ダブルクリックするとファイルをプレビューすることができます。(編集はできません)

Render as HTML をチェック

Sitecore Rock で MVCRendering アイテム を一番下までスクロールし、 Render as HTML にチェックを入れる。

Content Editor でも同様に操作可能です。

JSS サンプルページに MVC レンダリングを組み込む

jss-main Placeholder Settings に MVCRendering を追加

Sitecore Rock 上で Placeholder Settings の jss-main の Allowed Controls に MVCRendering を追加します

こちらも Content Editor にて同様に操作可能です

Experience Editor にて MVCRendering を追加

Experience Editor にてサンプルページを開き、Component ボタンをクリックし、「Add here」ボタンを表示しクリック

MVCRenderingを選択

表示を確認

保存し、Publish を行い、CD でも表示されていることを確認

まとめ

以上で ASP.NET MVC にてシンプルな Rendering を作成し、JSS のページに組み込めることを確認しました。
メリットとして、既存のプロジェクトのリソースを利用しつつ、モダンなJSS環境で開発を行うことができます。

制限事項がいくつかありますのでご案内します。

https://doc.sitecore.com/en/developers/hd/190/sitecore-headless-development/limitations-and-workarounds-for-static-generation-of-mvc-apps-with-jss.html

Discussion