--- title: "自分のコードでSitecoreAIプロジェクトを作成してください" slug: "create-a-sitecoreai-project-with-your-own-code" abstract: "SitecoreAIプロジェクトの作成方法、ソース管理への接続、サイト作成方法。" --- # 自分のコードでSitecoreAIプロジェクトを作成してください > !注**このドキュメントの改善にご協力ください**フレームワークに依存しないドキュメントは現在開発中です。コンテンツ改善の提案があれば、このページの下部で **フィードバック** を共有してください。 Sitecoreの開発を始めるには、論理的な環境群であるSitecoreAIプロジェクトが必要です。各環境には、コンテンツ作成者がページを作成・公開するコンテンツ管理(CM)インスタンスを含む、一連の構成、コード、実装が存在します。フロントエンドアプリがSitecoreAIのコンテンツを取得・レンダリングする前に、ソース管理に接続されたプロジェクト、デプロイ済みの環境、そして少なくとも1つのサイトが必要です。 このウォークスルーでは、自分のコードを使ってそのようなプロジェクトを設定する方法を説明します。最終的には、開発を始めるための空のSitecoreAIプロジェクトと環境が完成します。 このウォークスルーでは、以下の方法を説明します: :::攻略 - [リポジトリをセットアップしましょう](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/create-a-sitecoreai-project-with-your-own-code.html#set-up-your-repository) - [SitecoreAI Deployでプロジェクトを作成する](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/create-a-sitecoreai-project-with-your-own-code.html#create-a-project-in-sitecoreai-deploy) - [SitecoreAIでサイトを作成するDeploy](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/create-a-sitecoreai-project-with-your-own-code.html#create-a-site-in-sitecoreai-deploy)::: > !注**始める前に** > > - SitecoreAI Deployでプロジェクトを作成するには、Sitecore Cloud Portal組織内で*Organization Admin*または*Organization Owner*役割が必要です。 > > - [Connect](https://doc.sitecore.com/sai/ja/developers/sitecoreai/deploying-sitecoreai/deploy-app/manage-connections-for-source-control-and-hosting-providers.html) 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](https://github.com/Sitecore/xmcloud-starter-js/blob/main/.config/dotnet-tools.json)のコードを.config/dotnet-tools.jsonファイルにコピーしてください。 SitecoreAI Deployはビルドステップを実行する前に[Sitecoreコマンドラインインターフェース(CLI](https://doc.sitecore.com/sai/ja/developers/sitecoreai/sitecore-command-line-interface.html))をインストールするためにdotnet tool restoreを実行します。dotnet-tools.jsonはDeployにどのバージョンのCLIをインストールするかを知らせる.NETツールマニフェストSitecoreAIです。 3. xmcloud-starter-jsリポジトリから以下のファイルをそのままauthoringフォルダにコピーしてください。これらのファイルは定型文で、Visual Studio .NET解決策を含んでいます。あなたのプロジェクトに合わせて修正する必要はありません: - [authoring/XmCloudAuthoring.sln](https://github.com/Sitecore/xmcloud-starter-js/blob/main/authoring/XmCloudAuthoring.sln) - [authoring/Directory.Build.targets](https://github.com/Sitecore/xmcloud-starter-js/blob/main/authoring/Directory.Build.targets) - [authoring/Packages.props](https://github.com/Sitecore/xmcloud-starter-js/blob/main/authoring/Packages.props) - [authoring/platform/Platform.csproj](https://github.com/Sitecore/xmcloud-starter-js/blob/main/authoring/platform/Platform.csproj) - [authoring/platform/Platform.wpp.targets](https://github.com/Sitecore/xmcloud-starter-js/blob/main/authoring/platform/Platform.wpp.targets) - [authoring/platform/web.config](https://github.com/Sitecore/xmcloud-starter-js/blob/main/authoring/platform/web.config) - [authoring/platform/Properties/PublishProfiles/Local.pubxml](https://github.com/Sitecore/xmcloud-starter-js/blob/main/authoring/platform/Properties/PublishProfiles/Local.pubxml) 4. 空のauthoring/itemsフォルダを作成し、Gitが追跡するように .gitkeepファイルを追加します。後でソリューション開発時に[Sitecore Content Serialization(SCS)](https://doc.sitecore.com/sai/ja/developers/sitecoreai/sitecore-content-serialization.html) 項目をこのフォルダに追加します。 5. headappsフォルダで、headapps/astro-appやheadapps/go-appなどのフロントエンドアプリケーション用のプロジェクトを初期化します。headappsフォルダはすべてのフロントエンドアプリを一か所にまとめ、アプリごとに1つのサブフォルダにまとめています。 6. フレームワークによっては、ビルドアーティファクトがソース管理にコミットされるのを防ぐためにリポジトリルートに .gitignoreファイルを作成してください。 - 天体工学プロジェクトの場合: \# Node node\_modules/ dist/ .astro/ # .NET bin/ obj/ # Environment files .env .env.local もしあなたのヘッドアプリフレームワークに、npm create astroが生成したファイルのように推奨されるエントリーが.gitignoreもあれば、それらもマージしてください。 - 囲碁プロジェクト用: \# Go binaries headapps/go-app/go-app headapps/go-app/\*.exe # Environment files headapps/go-app/.env headapps/go-app/.env.local # Editor directories .vscode/ .idea/ \*.swp \*.swo # OS .DS\_Store Thumbs.db 7. [xmcloud-starter-js/nuget.config](https://github.com/Sitecore/xmcloud-starter-js/blob/main/nuget.config)のコードをnuget.configファイルにコピーしてください。 Sitecore CLIはビルド中にプラグインをNuGetパッケージとして復元します。このファイルがなければ、ビルドサーバーは復元できるSitecore NuGetフィードがなく、ビルドは失敗します。 8. [xmcloud-starter-js/sitecore.json](https://github.com/Sitecore/xmcloud-starter-js/blob/main/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": { "": { "path": "./headapps/", "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ページビルダー内の [ビジュアル編集](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/visual-editing.html) の編集ホストとしてホストされたインスタンスを使用します。 jssDeploymentSecretは、アプリがSitecoreインスタンスにアイテムをデプロイすることを許可する共有シークレットです。 postActionsブロックはメインビルド完了後に実行されます。これは重要なSitecoreシェルURLを要求することでコンテンツ管理インスタンスをウォームアップし、スキーマの人口と検索インデックスの再構築をトリガーします。 スクリプト内の以下のものを置き換えてください: - 編集ホストの短く説明的な名前(例えばastro-head)に置き換え。 - をサブフォルダ名に置き換えて、例えばastro-app。 - を少なくとも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以外のアプリの場合、[ビジュアル編集](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/visual-editing.html)を有効にした後、自分でホスティングプロバイダーにアプリをデプロイし、Sitecoreで [外部編集ホスト](https://doc.sitecore.com/sai/ja/developers/sitecoreai/environment-editing-hosts-and-rendering-hosts/the-different-types-of-editing-hosts-in-sitecoreai.html)として設定します。 renderingHostsオブジェクトは空のままにしています。なぜなら、Deployがビルド・管理できる編集ホストが存在しないためSitecoreAIです。 postActionsブロックはメインビルド完了後に実行されます。これは重要なSitecoreシェルURLを要求することでコンテンツ管理インスタンスをウォームアップし、スキーマの人口と検索インデックスの再構築をトリガーします。 10. すべてのファイルをコミットし、リモートリポジトリにプッシュしてからプロジェクトをSitecoreAI Deployで作成してください。 ## SitecoreAI Deployでプロジェクトを作成する リポジトリを準備した後、SitecoreAIデプロイプロジェクトを作成し、リポジトリに接続してオーサリング環境をプロビジョニングできます。 1. SitecoreAIデプロイで「 **プロジェクト** 」> **「プロジェクトを作成**」をクリックします。 2. 「 **プロジェクトのセットアップ** 」ウィンドウで、プロジェクトの説明的な名前を入力してください。 3. **ソースコードの設定**セクションで「**自分のコードを使おう**」をクリックし、続**行**をクリックします。 4. 「 **セットアップ作成環境** 」ウィンドウで、 *ステージ*ング、 *開発*、 *本番*などの環境名を入力してください。 5. **リポジトリ**セクションで、SitecoreAI Deploy[を接続](https://doc.sitecore.com/sai/ja/developers/sitecoreai/deploying-sitecoreai/deploy-app/manage-connections-for-source-control-and-hosting-providers.html)したソース管理アカウントを選択し、前の手順で作成したリポジトリを選択してから**「続ける**」をクリックします。 6. ホスト **の設定(任意)** ウィンドウで、フレームワークに応じて以下のいずれかを行います: - *ノードベースのプロジェクトでは*、編集ホスト名を入力してください。これはxmcloud.build.jsonのrenderingHostsのキーネームでなければなりません。例えばastro-head。 - *Node以外のプロジェクトの場合は* 、このステップを飛ばしてください。Node以外のアプリは、デプロイ後、自社のインフラ上でアプリが動作した後に [外部編集ホスト](https://doc.sitecore.com/sai/ja/developers/sitecoreai/environment-editing-hosts-and-rendering-hosts/the-different-types-of-editing-hosts-in-sitecoreai.html) として設定されます。 7. 「 **続行**」をクリックしてから **「展開開始**」をクリックしてください。 オーサリング環境のプロビジョニングには数分かかります。進捗を追跡できる「 **デプロイメント」** ページにリダイレクトされます。展開が失敗した場合、ログにはどのステップがエラーに遭遇したかが表示されます。 ## SitecoreAIでサイトを作成する デプロイ プロジェクトが展開された後、自分の環境でサイトを作成します。これはフロントエンドアプリでコンテンツのレンダリングを始める前に必要です。 環境内でサイトを作成するには: 1. SitecoreAIデプロイで、前の手順で作成したプロジェクト>「 **プロジェクト** 」をクリックします。 2. 「 **オーサリング環境** 」タブで、前の手順で作成した環境をクリックします。 3. **「サイト**」タブで「**最初のサイトを作成**」をクリックします。**チャンネル**のページが開きます。 4. **チャンネルページの**「**はじめに」**セクションで**「基本**テンプレート」を選択してください。 5. 「 **サイト作成** 」ウィンドウで、サイト名とサイトコレクション名を入力し、「 **作成**」をクリックします。SitecoreAIはサイト作成を開始し、数分かかることもあります。 サイトが作成された後、そのページやコンテンツ項目はSitecoreで設定されます。フロントエンドアプリでこれらの画像を取得し、レンダリングできるようにすれば、以下の手順で行います。 ## 次のステップ { .notintoc } これでSitecoreAIプロジェクトがソース管理に接続され、環境とサイトと共にデプロイされています。次に、[アプリのRender SitecoreAI内容](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/content-rendering/render-sitecoreai-content-in-your-app.html "Render SitecoreAI content in your app")を含む[コンテンツ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/content-rendering.html "Content rendering")レンダリングドキュメントに従ってください。