JSS Next.js用Sitecoreコンテナテンプレートを使用してプロジェクトをセットアップ(前編)

samatsu 9/16/2021 445 N/A Sitecore JSS

JSS Next.js SDK を使用したSitecoreのWebサイトを開発するための方法として次の2通りのスタータープロジェクトが用意されています

  • jss create を使用
  • Sitecore コンテナを使用

jss create を使用したプロジェクトのセットアップ方法は公式のページでは、こちらに説明があります。また本サイトでも次のページで手順を記載しました。

今回の記事では、Sitecore コンテナを使用した Sitecoreファースト開発用に用意されているNext.js スターターアプリをセットアップする方法を記載したいと思います。

公式の手順に関しては、こちらに掲載されていますのでこの手順に従って基本的には説明を記載していきます。

今回セットアップする開発環境の前提条件は次の通りです

  • OS: Windows 10 Pro の Hyper-V 上にインストールした Windows 10 Pro (ゲストOS)
  • Sitecoreバージョン 10.1

1. 事前条件の準備

まず、Hyper-V上で動作するWindows 10 Pro でHyper-Vサービスを有効化します。Windowsの機能を追加し、下図のように Containers と Hyper-V の機能を追加してください。

1.1 Hyper-V と コンテナの機能を有効化

このとき、 Hyper-V Hypervisor がグレーアウトしている場合は、こちらのページを参考にしてNexted Virtualizationの機能を有効化してください。

1.2 Powershell のバージョン確認

$PSVersionTable編集を参照して、Powershellのバージョンが5.1 以降であることを確認します。Powershell 7はサポートされていません。

1.3 Node.js のインストール

次のNode 14.x のバージョンをダウンロードしてインストールします。インストールオプションはデフォルトのままインストールできます。

ExecutionPolicy がデフォルトのままの場合、ps1ファイルを実行できないので、その場合は、 Set-ExecutionPolicy RemoteSigned 等を実行してps1ファイルを実行できるようにします。

1.4 .NET Core 3.1 SDK のインストール

.NET Core 3.1 SDK をダウンロードしてインストールします。ダウンロードしたらインストーラーをダブルクリックしてそのままインストールします。

1.5 Visual Studio と .NET Framework 4.8 SDK のインストール

今回は個人ユースの前提で、 Visual Studio 2019 Community をダウンロードしてインストールします。

インストーラーを起動して、Individual components タブの .NET Framework 4.8 SDK を選択してインストールします。選択必須のオプションはこれだけですが、実際の開発には 必要に応じて.NET Framework 4.8 targeting packや Workloads タブを選択し、Web開発やコンテナ開発用のオプションを選択します。

1.6 Docker for Windows のインストール

Docker のサイトからDocker for Windows をダウンロードしてインストールします。

インストーラーで、次の画面が表示されたら Windowsコンテナのみを今回は使用するので、最初のWSL2を使用するオプションのチェックは外してOKボタンをクリックしてインストールできます。

Dockerインストール後、再起動します(念のため)。再起動してログイン後、次のポップアップが表示されたら Use Hyper-V を選択します。

また、タスクトレイのDockerアイコンを右クリックして、 Switch to Windows containers を選択します。

これで必須ソフトウェアの準備は完了です。

後編で、スターター用のテンプレートをセットアップします。