1. 開発者向けのドキュメント

ローカル開発環境を整えましょう

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

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

Timing 10分

これは「入門ガイド」シリーズの第3部です。ここでの手順を完了する前に、プロジェクトと環境を作成し、サイトとページを作成している必要があります。

このトピックでは、GitHubやAzureのDevOpsリポジトリをローカルマシンにクローンし、そのパッケージをインストールし、ローカルホストをプレビューエンドポイントに接続して作業を可視化することで、ローカル開発環境を設定する方法について説明します。

このウォークスルーシリーズでは、フロントエンド開発(FED)優先アプローチを採用し、Dockerベースの開発アプローチで適用される最低限のマシン固有の要件を排除しています。ただし、より良い開発者体験のためには常に性能のあるマシンが推奨されます。

Content SDK (Next.js)

Content SDKを使ってローカル環境を設定するには:

  1. 最新のNode.js LTSバージョンを必ずインストールしてください。

  2. Deployアプリで、先ほど作成した環境を開いてください。まだデプロイログ画面にいる場合は、パンくずを使うか、Projectsタブから操作できます。

    The deployment log in the Deploy app

  3. Developer settingsタブでコンテキストスイッチャーがPreviewに設定されていることを確認してください。

    The preview and live context switcher in the Developer settings in Deploy

  4. 環境リポジトリのクローンコマンドをローカルマシンにコピーし、ターミナルで実行してください。クローンができたら、コードエディタでリポジトリを開きます。

  5. Deployアプリに戻って、画面上のコードブロックから環境変数をコピーします。

  6. /examples/kit-nextjs-skate-parkフォルダに新しい.env.localファイルを作成し、コピーした変数を貼り付けます。

    注記

    このウォークスルーでは、スターターリポジトリにあるSkate Parkのサンプルを使っています。箱から出してから使えるいくつかのコンポーネントが入っているからです。本格的なプロジェクトなら、examples/basic-nextjs (Next.jsプロジェクト)やexamples/basic-spa (Angularプロジェクト)のような空のプロジェクトから始めることが多いです。

  7. ターミナルでディレクトリ(CD)をexamples/kit-nextjs-skate-parkフォルダに変更してください。

  8. 必要なパッケージをインストールするには、npm installを実行してください。

  9. アプリケーションヘッドをローカルで実行し、プレビューエンドポイントに接続するには、npm run devを実行してください。

  10. ブラウザでhttp://localhost:3000/に行ってください。例えば、ページにコンポーネントを追加した際に入力したテキストが見えるはずです。Hello World - inbuilt component。

ASP.NETコアSDK

ASP.NET Core SDKを使ってローカル環境を設定するには:

  1. Deployアプリで、先ほど作成した環境を開いてください。まだデプロイログ画面にいる場合は、パンくずを使うか、Projectsタブから操作できます。

    The deployment log in the Deploy app

  2. Developer settingsタブでコンテキストスイッチャーがPreviewに設定されていることを確認してください。

    The preview and live context switcher in the Developer settings in Deploy

  3. 環境リポジトリのクローンコマンドをローカルマシンにコピーし、ターミナルで実行してください。クローンができたら、コードエディタでリポジトリを開きます。

  4. ./headapps/aspnet-core-starter/appsettings.jsonファイルを複製して、./headapps/aspnet-core-starter/appsettings.Development.jsonに名前を変えてください。

  5. Deployアプリに戻って、画面上のコードブロックから環境変数をコピーし、新たに作成したappsettings.Development.jsonファイルに貼り付けます。

  6. Visual Studio Codeを使っている場合は、F5を押してソリューションを作成して実行してください。コマンドラインインターフェースを使っている場合は、/headapps/aspnet-core-starter folderに移動してdotnet restore && dotnet runを実行します。

  7. ブラウザでhttp://localhost:5001/に行ってください。次に追加するコンポーネントをテストするために使う空白のページが見えるはずです。

これでローカル開発インスタンスがSitecoreAI環境に紐づけられます。次に、最初のコンポーネントを作成します。

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