自分のコードでSitecoreAIプロジェクトを作成してください

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

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

!注このドキュメントの改善にご協力くださいフレームワークに依存しないドキュメントは現在開発中です。コンテンツ改善の提案があれば、このページの下部で フィードバック を共有してください。

Sitecoreの開発を始めるには、論理的な環境群であるSitecoreAIプロジェクトが必要です。各環境には、コンテンツ作成者がページを作成・公開するコンテンツ管理(CM)インスタンスを含む、一連の構成、コード、実装が存在します。フロントエンドアプリがSitecoreAIのコンテンツを取得・レンダリングする前に、ソース管理に接続されたプロジェクト、デプロイ済みの環境、そして少なくとも1つのサイトが必要です。

このウォークスルーでは、自分のコードを使ってそのようなプロジェクトを設定する方法を説明します。最終的には、開発を始めるための空のSitecoreAIプロジェクトと環境が完成します。

このウォークスルーでは、以下の方法を説明します:

!注始める前に

  • SitecoreAI Deployでプロジェクトを作成するには、Sitecore Cloud Portal組織内でOrganization AdminまたはOrganization Owner役割が必要です。

  • Connect SitecoreAI GitHubやAzure DevOpsなどのソース管理プロバイダーにデプロイしてください。

  • 空のリポジトリを用意しておくか、作成する準備をしてください。リポジトリにはフロントエンドのアプリケーションコードとSitecoreAIのビルド構成の両方が保管されます。SitecoreAI Deployはリポジトリを読み取ります。

  • 空のリモートリポジトリをローカルでクローンするか、新しいフォルダでgit initを実行してリモートを追加git remote add origin

リポジトリをセットアップしましょう

SitecoreAI Deployはリポジトリのルートにある様々なファイルを読み取り、フロントエンドコードを見つけて構築します。SitecoreAI Deployでプロジェクトを作成する前に、正しいフォルダ構造とファイルを用意する必要があります。

リポジトリの設定方法:

  1. リポジトリ内に以下の構造を作成します。これらのフォルダやファイルには、後のステップで内容を追加します:

    my-project/ ├── .config/ │ └── dotnet-tools.json ← Sitecore CLI version manifest ├── authoring/ ← .NET solution for the authoring environment build ├── headapps/ ← your Astro, Go, or other framework code goes here, one subfolder per app. │ └── your-head-application/ ├── .gitignore ├── nuget.config ├── sitecore.json └── xmcloud.build.json

  2. xmcloud-starter-js/.config/dotnet-tools.jsonのコードを.config/dotnet-tools.jsonファイルにコピーしてください。

    SitecoreAI Deployはビルドステップを実行する前にSitecoreコマンドラインインターフェース(CLI)をインストールするためにdotnet tool restoreを実行します。dotnet-tools.jsonはDeployにどのバージョンのCLIをインストールするかを知らせる.NETツールマニフェストSitecoreAIです。

  3. xmcloud-starter-jsリポジトリから以下のファイルをそのままauthoringフォルダにコピーしてください。これらのファイルは定型文で、Visual Studio .NET解決策を含んでいます。あなたのプロジェクトに合わせて修正する必要はありません:

  4. 空のauthoring/itemsフォルダを作成し、Gitが追跡するように .gitkeepファイルを追加します。後でソリューション開発時にSitecore Content Serialization(SCS) 項目をこのフォルダに追加します。

  5. headappsフォルダで、headapps/astro-appやheadapps/go-appなどのフロントエンドアプリケーション用のプロジェクトを初期化します。headappsフォルダはすべてのフロントエンドアプリを一か所にまとめ、アプリごとに1つのサブフォルダにまとめています。

  6. フレームワークによっては、ビルドアーティファクトがソース管理にコミットされるのを防ぐためにリポジトリルートに .gitignoreファイルを作成してください。

    • 天体工学プロジェクトの場合:

      # Node node_modules/ dist/ .astro/

      .NET

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

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

      bin/ obj/

      Environment files

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

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

      .env .env.local

      もしあなたのヘッドアプリフレームワークに、npm create astroが生成したファイルのように推奨されるエントリーが.gitignoreもあれば、それらもマージしてください。

    • 囲碁プロジェクト用:

      # Go binaries headapps/go-app/go-app headapps/go-app/*.exe

      Environment files

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

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

      headapps/go-app/.env headapps/go-app/.env.local

      Editor directories

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

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

      .vscode/ .idea/ *.swp *.swo

      OS

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

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

      .DS_Store Thumbs.db

  7. xmcloud-starter-js/nuget.configのコードをnuget.configファイルにコピーしてください。

    Sitecore CLIはビルド中にプラグインをNuGetパッケージとして復元します。このファイルがなければ、ビルドサーバーは復元できるSitecore NuGetフィードがなく、ビルドは失敗します。

  8. xmcloud-starter-js/sitecore.jsonのコードをsitecore.jsonファイルにコピーしてください。

    sitecore.jsonはSitecoreコンテンツシリアライゼーション設定ファイルです。SitecoreAI Deployビルドサーバーは、オーサリング環境のビルドを理解するためにこのファイルを探します。それがなければビルドは失敗します。

    ファイル内でmodulesは空のサブフォルダを指すauthoring/itemsサブフォルダを指しています。 pluginsリストは、ビルド中に復元するパッケージNuGetをSitecore CLIに伝えます。

  9. 以下のコードをxmcloud.build.jsonに貼り付けてください。内容は、アプリがNodeベース(AstroやNext.jsなど)か非Node(Goなど)かによって異なります。

    • ノードベースのプロジェクトの場合:

      { "renderingHosts": { "<YOUR_HEAD_APP>": { "path": "./headapps/<APP_FOLDER>", "nodeVersion": "22", "jssDeploymentSecret": "", "enabled": true, "type": "sxa", "buildCommand": "build", "runCommand": "start" } }, "postActions": { "actions": { "warmUpCm": { "urls": "/sitecore/shell", "/sitecore/shell/Applications/Content%20Editor.aspx?sc_bw=1", "/sitecore/client/Applications/Launchpad"

      }, "populateSchema": { "indexNames": }, "reindex": { "indexNames": } } }, "authoringPath": "./authoring" }

      SitecoreAI DeployはNodeベースのアプリをネイティブに構築・ホストできます。 renderingHostsの各エントリには、Deploy SitecoreAIあなたのアプリコードがどこにあるか、どのように構築・実行するかが伝えられています。SitecoreAIページビルダー内の ビジュアル編集 の編集ホストとしてホストされたインスタンスを使用します。 jssDeploymentSecretは、アプリがSitecoreインスタンスにアイテムをデプロイすることを許可する共有シークレットです。

      postActionsブロックはメインビルド完了後に実行されます。これは重要なSitecoreシェルURLを要求することでコンテンツ管理インスタンスをウォームアップし、スキーマの人口と検索インデックスの再構築をトリガーします。

      スクリプト内の以下のものを置き換えてください:

      • 編集ホストの短く説明的な名前(例えばastro-head)に置き換え<YOUR_HEAD_APP>。
      • <APP_FOLDER>をサブフォルダ名に置き換えて、例えばastro-app。
      • <RANDOM_32_CHARACTER_LONG_STRING>を少なくとも32文字のランダムな英数字文字列に置き換えます。
    • ノード以外のプロジェクトについて:

      { "renderingHosts": {}, "postActions": { "actions": { "warmUpCm": { "urls": "/sitecore/shell", "/sitecore/shell/Applications/Content%20Editor.aspx?sc_bw=1", "/sitecore/client/Applications/Launchpad"

      }, "populateSchema": { "indexNames": }, "reindex": { "indexNames": } } }, "authoringPath": "./authoring" }

      SitecoreAI DeployはNodeベースのアプリケーションのみをネイティブに構築・ホストできます。Node以外のアプリの場合、ビジュアル編集を有効にした後、自分でホスティングプロバイダーにアプリをデプロイし、Sitecoreで 外部編集ホストとして設定します。 renderingHostsオブジェクトは空のままにしています。なぜなら、Deployがビルド・管理できる編集ホストが存在しないためSitecoreAIです。

      postActionsブロックはメインビルド完了後に実行されます。これは重要なSitecoreシェルURLを要求することでコンテンツ管理インスタンスをウォームアップし、スキーマの人口と検索インデックスの再構築をトリガーします。

  10. すべてのファイルをコミットし、リモートリポジトリにプッシュしてからプロジェクトをSitecoreAI Deployで作成してください。

SitecoreAI Deployでプロジェクトを作成する

リポジトリを準備した後、SitecoreAIデプロイプロジェクトを作成し、リポジトリに接続してオーサリング環境をプロビジョニングできます。

  1. SitecoreAIデプロイで「 プロジェクト 」> 「プロジェクトを作成」をクリックします。
  2. プロジェクトのセットアップ 」ウィンドウで、プロジェクトの説明的な名前を入力してください。
  3. ソースコードの設定セクションで「自分のコードを使おう」をクリックし、続をクリックします。
  4. セットアップ作成環境 」ウィンドウで、 ステージング、 開発本番などの環境名を入力してください。
  5. リポジトリセクションで、SitecoreAI Deployを接続したソース管理アカウントを選択し、前の手順で作成したリポジトリを選択してから**「続ける**」をクリックします。
  6. ホスト の設定(任意) ウィンドウで、フレームワークに応じて以下のいずれかを行います:
    • ノードベースのプロジェクトでは、編集ホスト名を入力してください。これはxmcloud.build.jsonのrenderingHostsのキーネームでなければなりません。例えばastro-head。
    • Node以外のプロジェクトの場合は 、このステップを飛ばしてください。Node以外のアプリは、デプロイ後、自社のインフラ上でアプリが動作した後に 外部編集ホスト として設定されます。
  7. 続行」をクリックしてから 「展開開始」をクリックしてください。

オーサリング環境のプロビジョニングには数分かかります。進捗を追跡できる「 デプロイメント」 ページにリダイレクトされます。展開が失敗した場合、ログにはどのステップがエラーに遭遇したかが表示されます。

SitecoreAIでサイトを作成する デプロイ

プロジェクトが展開された後、自分の環境でサイトを作成します。これはフロントエンドアプリでコンテンツのレンダリングを始める前に必要です。

環境内でサイトを作成するには:

  1. SitecoreAIデプロイで、前の手順で作成したプロジェクト>「 プロジェクト 」をクリックします。
  2. オーサリング環境 」タブで、前の手順で作成した環境をクリックします。
  3. 「サイト」タブで「最初のサイトを作成」をクリックします。チャンネルのページが開きます。
  4. チャンネルページのはじめに」セクションで「基本テンプレート」を選択してください。
  5. サイト作成 」ウィンドウで、サイト名とサイトコレクション名を入力し、「 作成」をクリックします。SitecoreAIはサイト作成を開始し、数分かかることもあります。

サイトが作成された後、そのページやコンテンツ項目はSitecoreで設定されます。フロントエンドアプリでこれらの画像を取得し、レンダリングできるようにすれば、以下の手順で行います。

次のステップ

これでSitecoreAIプロジェクトがソース管理に接続され、環境とサイトと共にデプロイされています。次に、アプリのRender SitecoreAI内容を含むコンテンツレンダリングドキュメントに従ってください。

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