// Net planet-es V2

前回の続きです。必須ソフトウェアのインストールが終わったので、JSS Next.js SDKプロジェクト用に用意されているSitecoreコンテナテンプレートを使ってスタータープロジェクトのセットアップを行います。

1.テンプレートのインストール

Powershell を管理者権限で起動します。次のコマンドを実行して.NET Core用のプロジェクトテンプレートをインストールします。

dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json

インストール後 dotnet new -l コマンドでSitecoreのコンテナベースのテンプレートがインストールされていることを確認できます。

2. プロジェクトの作成

インストールしたプロジェクト用のテンプレートを元にプロジェクトを作成します。

次のコマンドを実行します。

dotnet new sitecore.nextjs.gettingstarted -n MyProject 

コマンドを実行すると、プロジェクト用のファイルが作成されます。上記コマンドを実行すると、内部で jss create コマンドも実行されます。jss create コマンドのパラメーターを指定したい場合は  --JSSCreateParams パラメーターを指定します。詳細については、公式のウォークスルーを参照してください。

コマンド実行中に確認メッセージが表示された場合は Y を入力してプロジェクトファイルをセットアップします。

MyProjectフォルダーが作成されているはずなので、そのフォルダー配下に移動して、init.ps1 を実行して .env ファイルを準備します。下記が実行例です。license.xml ファイルのパスとadminユーザー用のパスワードを引数に指定してinit.ps1を実行します。

.\init.ps1 -InitEnv -LicenseXmlPath "<licence.xmlのパス>" -AdminPassword "<adminのパスワード>"

開発用の自己証明書は makecert を使って作成されます。初めて証明書を作成するとポップアップダイアログが表示されるので yes をクリックしてインストールを進めます。

スクリプトの処理が完了すると、次のようなメッセージが最後に出力されます。

次のコマンドを実行してnode.js用にルート証明書を環境変数に割り当てます。node.jsは証明書を検証するときにWindowsの証明書のストアを使用しないようです。

setx NODE_EXTRA_CA_CERTS  C:\Users\<username>\AppData\Local\mkcert\rootCA.pem

これで、コンテナを作成する準備ができましたので up.ps1 を実行します。

.\up.ps1

途中でブラウザーが起動し、Sitecoreの編集環境にログインする画面が表示されたらadminユーザーのアカウントとパスワードを入力して、アクセスの許可の設定をします(スクリーンショット取り忘れていました)。

イメージにビルドと、初期サンプルデータの投入(Sitecore CLIを使ったシリアル化されたアイテムのインポートまたはjss deploy) が行われ、ブラウザーが起動します。

必要に応じて up.ps1 はカスタマイズして利用できます。もちろん他のdocker-compose 用のファイルなどもあくまでスターター用の開発用のコンテナをセットアップするサンプルなので必要に応じて変更して利用できます。

これで開発の準備が整いました。スターターテンプレートを使用すると、Next.js および必要に応じて C# での開発がすぐに行えて便利です。

ちなみに、ゲストOSを再起動するたびに docker-compose up -d コマンドでnetwork not found エラーが生成されて docker-compose down / docker-compose up を実行するのが面倒な場合は、次のように外部ネットワークを作成しておき、docker-compose.yml またはdocker-compose.override.yml でデフォルトのネットワークに指定することもできます。

docker network create simple-network

networks:
  default:
    external: true
    name: simple-network

ちなみに、nat というネットワークが既定で作成されているので、networkを定義する代わりに name: nat と指定しても特に問題ないようです。

networks:
  default:
    external: true
    name: nat

ご参考までに記載しました。