XM Cloud - Sitecore Content Hub コネクタを有効にする : Haramizu.com

Sitecore Content Hub の DAM 機能を有効にするために、XM Cloud と連携させるためにはコネクタを有効にする必要があります。今回は、この手順に関して紹介をします。

公式の手順書

手順に関しては公式のページで公開されています。

Enabling Sitecore CMP and DAM in Sitecore XM Cloud

コネクタを有効にする

XM Cloud を利用するにあたって、コネクタの連携は従来の環境と異なり SaaS となるため手順が変わってきます。Sitecore Content Hub の DAM および CMP の連携に関しては、標準機能として提供しており、この機能を有効にするのは非常に簡単です。今回は DAM の連携に関して手順を紹介します。

公式の手順書は以下の通りです。

Walkthrough: Enabling the DAM connector in XM Cloud on Sitecore Cloud Portal

まず、XM Cloud Deploy で設定をしたい環境を選択して、タブのメニュー項目から Variables を選択してください。

以下の２つの項目を追加してください。Target はすべて CM とします。

Name	Value
SITECORE_AppSettings_damEnabled__define	Yes
Sitecore_ConnectionStrings_DAM_dot_ContentHub	ClientId={client_id};ClientSecret = {client_secret};UserName={username};Password={password};URI={uri};
Sitecore_ConnectionStrings_DAM_dot_SearchPage	{Sitecore Content Hub search page URI}
Sitecore_ConnectionStrings_DAM_dot_ExternalRedirectKey	Sitecore

上記のパラメーターを調べる方法は、以前に紹介している記事が参考になります。

Sitecore Connect for Content Hub 5.0 のインストール

追加作業をしている際のダイアログは以下のような形で進めていきます。対象は CM のみです。

設定後、以下のように項目が増えています。

これで準備が完了です。上記画面の右上に表示されている Option メニューから Build & Deploy を選択して CM サーバーを展開し直します。

Build が完了したあと以下の手順で確認をしていきます。

管理画面にアクセス
コンテンツエディタを起動
Home のアイテムのリッチテキストの項目を開く
左から 5 つ目のボタンに DAM のアイコンが表示されています

ただし、まだ若干の設定が不足しているため動作しません。

プロジェクトのリポジトリに対して、 /src/platform/Xdts の下に Web.config.xdt ファイルを作成して以下のコードを追加しておきます。

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
    <location path="sitecore">
        <system.webServer>
            <httpProtocol>
                <customHeaders>
                    <add xdt:Transform="SetAttributes" xdt:Locator="Match(name)" name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://apps.sitecore.net https://*.sitecorecloud.io https://*.stylelabs.io https://*.stylelabs.cloud https://*.stylelabsdemo.com https://*.stylelabsqa.com https://*.stylelabsdev.com https://*.sitecoresandbox.cloud https://*.azureedge.net https://stylelabs.eu.auth0.com https://login.windows.net https://login.microsoftonline.com https://*.boxever.com https://*.xmcloudcm.localhost wss://www.xmcloudcm.localhost https://ipv4.jsonip.com; img-src 'self' data: https://s.gravatar.com https://*.wp.com/cdn.auth0.com/avatars https://*.sitecorecloud.io https://*.stylelabs.io https://*.stylelabs.cloud https://*.stylelabsdemo.com https://*.stylelabsqa.com https://*.stylelabsdev.com https://*.sitecoresandbox.cloud https://*.azureedge.net https://*.xmcloudcm.localhost; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://*.sitecorecloud.io; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://*.sitecorecloud.io; frame-ancestors 'self' pages.sitecorecloud.io pages.sitecore.io symphony.sitecorecloud.io explorer.sitecorecloud.io https://pages.sitecorecloud.io https://*.xmcloudcm.localhost https://*.sitecoredemo.com; block-all-mixed-content"/>
                </customHeaders>
            </httpProtocol>
        </system.webServer>
    </location>
</configuration>

このファイルをプロジェクトに含めるために、 src¥platform¥Platform.csproj のファイルのに ItemGroup に以下のコードを追加します（追加をするのは Content include の１行のみです）。

<ItemGroup>
    <Content Include="xdts\Web.config.xdt" />
    <None Include="Platform.wpp.targets" />
    <None Include="Properties\PublishProfiles\Local.pubxml" />
    <None Include="README.md" />
    <None Include="web.config" />
</ItemGroup>

このファイルをビルドする際に適用するために、xmcloud.build.json のファイルに以下のコードを追加してください。

    "transforms": [
    {
        "xdtPath": "/xdts/web.config.xdt",
        "targetPath": "/web.config"
    }
    ]

上記のコードを適用して、GitHub に反映させて改めて Build & Deploy を実行します。エラーは引き続き表示されますが、これは Content Hub 側の設定が不足しているためです。次のステップを実行してください。

Sitecore Content Hub 側の設定

管理者の画面の中で動作するようにするために、CORS の設定にツールの URL を入れていく必要があります。Content Hub の管理者権限で、Manage - Setting の設定画面を開き、PortalConfiguration - CORSConfiguration の設定を開きます。

ローカルの環境でも動かすことができるように、以下の項目を追加していきます。１つ目の項目は、XM Cloud Deploy に表示されている Environment host name 、管理画面に合わせてください。

https://xmc-yourinstance.sitecorecloud.io/
https://pages.sitecorecloud.io/
https://xmcloudcm.localhost/

これで設定が完了しました。

XM Cloud 編集ツールでの動作確認

設定が完了したのを確認して、 XM Cloud の環境にアクセスをしてください。まず最初にメディアファイルを選択するために、リッチテキストエディターの編集画面を開き、Content Hub のアイコンをクリックします。しばらくすると、ダイアログをクリックすると以下のように表示されて、ブロックされていないことを確認できます。

ログインに関してポップアップブロックがかかっている場合があります。その際はポップアップブロックを解除する、もしくは画面に表示されているログインのクリックを動かしてください。ログインを完了させると、DAM のアセットが表示されて、検索なども利用できるようになっています。

Pages のツールからの動作確認もします。画像を利用している部分をクリックすると、右側の編集エリアで画像を変更するためのボタンが表示されます。

Change のボタンをクリックすると画像選択の画面になります。タブで Media Library と Content Hub の２つの項目が表示されているため、Content Hub をクリックすると、コンテンツエディターの時と同じように画像の選択が可能となりました。

ローカル環境の設定

続いて Docker で動作しているローカルの環境でも Content Hub DAM にアクセスできるようにしていきます。

手順に関しては以下のページで紹介されていますが、１点不足している点も含めて今回のブログでは紹介していきます。

Walkthrough: Enabling the DAM connector in XM Cloud on Docker

最初に手順に沿って、以下のパラメーターを .env に追加してください。

SITECORE_AppSettings_damEnabled__define=Yes
Sitecore_DAM_ContentHub=ClientId=ClientId={client_id};ClientSecret = {client_secret};UserName={username};Password={password};URI={uri};
Sitecore_DAM_SearchPage={Sitecore Content Hub search page URI}
Sitecore_DAM_ExternalRedirectKey=Sitecore

１行目と４行目以外はサーバーの環境に合わせてパラメーターを設定しますが、XM Cloud の時に設定している値と同じもので問題ありません。

この値を設定しただけでは docker-compose.yml および docker-compose.override.yml のどちらのファイルでも上記の値を反映させることができていません。このため、以下のコードを docker-compose.override.yml の cm ロールに対する enviromnent に追加してください。

      SITECORE_AppSettings_damEnabled__define: ${SITECORE_AppSettings_damEnabled__define} 
      Sitecore_ConnectionStrings_DAM_dot_ContentHub: ${SITECORE_DAM_ContentHub} 
      Sitecore_ConnectionStrings_DAM_dot_SearchPage: ${SITECORE_DAM_SearchPage} 
      Sitecore_ConnectionStrings_DAM_dot_ExternalRedirectKey: ${SITECORE_DAM_ExternalRedirectKey}

これで .env のファイルで設定した値をコンテナに対して渡すことができます。

続いて Content-Security-Policy の変更をする必要があります。これは XM Cloud の際に作成した Web.config.xdt のファイルと同じものを docker\build\cm\Xdts\Web.config.xdt にコピーしてください。

そしてビルドする際にこのファイルを反映させるために、docker\build\cm\Dockerfile のファイルに以下のコードを追加してください。

# Copy Xdts
COPY .\Xdts\ .\Xdts

# Perform transforms
RUN (Get-ChildItem -Path 'C:\\inetpub\\wwwroot\\xdts\\web*.xdt' -Recurse ) | `
    ForEach-Object { & 'C:\\tools\\scripts\\Invoke-XdtTransform.ps1' -Path 'C:\\inetpub\\wwwroot\\web.config' -XdtPath $_.FullName `
    -XdtDllPath 'C:\\tools\\bin\\Microsoft.Web.XmlTransform.dll'; };

これで準備が完了となりました。以下のコマンドでコンテナを起動してください。

docker compose build
docker compose up -d

エラーがなければ動作確認に移動します。

ローカルでの動作確認

ローカルのサーバーに対しては、 https://xmcloudcm.localhost/sitecore にアクセスをしてください。そして、XM Cloud の時と同様にコンテンツエディターを起動して、リッチテキストフィールドを利用して検証します。

左から５つ目に Content Hub DAM にアクセスするためのアイコンが表示されています。

クリックをすると、ログイン画面が表示されて、その後 DAM のアセット一覧の画面が表示されます。

無事繋がっていることを確認できました。

まとめ

今回は XM Cloud の環境と Content Hub DAM との連携手順に関して紹介をしました。デジタルアセットに関しては、XM Cloud にはメディアライブラリがありますが、Content Hub DAM のアセットを直接利用することで、Web での DAM のアセットの活用が可能となります。