サンプルJSSアプリをSitecoreにデプロイ

samatsu 3/17/2019 1138 N/A Sitecore JSS

JSSのサンプルアプリをローカルのSitecore環境にデプロイして、IntegratedモードやConnectedモードでサンプルアプリを動かします。前提として、このサイトで何回かに分けて実施した下記チュートリアルを実施した環境であることとします。

今回は上記ページのサンプルで myapp という名前で Reactベースのサンプルアプリをセットアップした前提でデフォルトのままデプロイします。

1. コンフィグの準備と名前解決の設定

JSS アプリのサイトの定義は、sitecore/config/myapp.config (ファイル名はjss create で指定した名前) に定義されています。ここに、JSSアプリにサイトのホスト名など設定されているので必要に応じて変更をしてから作業を実施します。今回は既定の設定のままデプロイを続けます。

デフォルト設定の場合は、ホスト名: myapp.dev.local, ルートフォルダー /sitecore/content/myapp/home ですので、この前提で記載をしていきます。

ローカルPC上の名前解決のエントリを追加します。管理者権限でメモ帳などを起動し、hosts ファイルに名前解決のエントリを追加します。通常 C:\windows\system32\drivers\etc\ にあります。

127.0.0.1  myapp.dev.local

IIS上のサイトのバインドの設定を追加します。IIS管理マネージャーを起動して、Sitecoreのサイトを右クリック > バインドの編集 をクリックします。ホスト名を登録します。

デプロイ用のコンフィグファイルを準備していきます。JSSアプリのフォルダーに移動し、次のコマンドを実行します。

jss setup

次のようなウィザードが起動するので、質問に回答をして、scjssconfig.json ファイルを作成します。環境に合わせて適宜変更してください。設定した内容は後から変更できます。

Is your Sitecore instance on this machine or accessible via network share? [y/n]: y
Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): C:\inetpub\wwwroot\demo.corporate.sc
Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): http://myapp.dev.local
Sitecore import service URL [http://myapp.dev.local/sitecore/api/jss/import]:
Sitecore API Key (ID of API key item): {1EDFFE5C-F786-4FE4-B89F-95CC3CA2770E}
Please enter your deployment secret (32+ random chars; or press enter to generate one):
Deployment secret has been generated. Ensure the JSS app config on the Sitecore end has the same secret set.
Deploy secret Sitecore config written to C:\projects\myapp\sitecore\config\myapp.deploysecret.config
Ensure this configuration is deployed to Sitecore.
JSS connection settings saved to C:\projects\myapp\scjssconfig.json

ウィザードを完了すると、次のようにscjssconfig.jsonファイルと、sitecore/config/myapp.deploysecret.config が作成されます。sitecore.deploysecret.config には、Sitecoreに資産をデプロイするためのシークレットコードが設定されているファイルです。このファイルの値と、jsjssconfig.jsonのdeploySecretは一致している必要があります。誤デプロイを防止するためにシークレットコードは環境ごとに異なる値を使用するようにします。

2. デプロイと動作確認

これで、準備が終わったので、まずは、configファイル(sitecore/config配下のファイル) のみSitecoreのWebアプリケーションフォルダーにコピーします。

jss deploy config

このコマンドを実行すると、 <sitecore installation foler>/App_Config/Include/zzz フォルダーに config がコピーされます。ローカルにSitecoreインスタンスがない場合は手動でコピーします。

ファイルと、Sitecoreアイテムをデプロイします。初めてSitecoreにデプロイする場合は、次のコマンドを実行します。このコマンドで、Code Firstで作成したファイルをビルドし、マニュフェストとデータファイル(/data配下) を基に、開発系のアイテムとコンテンツアイテム、メディアアイテムが作成されます。

jss deploy app --includeContent --includeDictionary

デプロイが成功すると、次のように、 <sitecore install folder>/dist/myapp にアプリケーションがコピーされます。

また、編集環境にアクセスすると、/sitecore/content や /sitecore/media library に、JSS サンプルアプリのコンテンツツリーが作成されます。

また、テンプレートのツリーにも Templates/Project/myapp フォルダーが作成されます。既定の設定ではHelixに対応したツリーになります。

同じように /sitecore/layouts 配下に、レイアウトとレンダリングの定義アイテムが作成されます。

エクスペリエンスエディターを起動すると、見たまま編集できます。これでIntegration モードで動作させることができました。

Experience Editorで表示したときに、"Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: Failed to start Node process. To resolve this: [1] Ensure that Node.js is installed and can be found in one of the PATH directories." というエラーが発生した場合は、システム環境編集のPATH に、 C:\Program Files\nodejs\ が含まれていることを確認します。含まれている場合は、マシンを再起動してください。

3. Connected モードで動作させる

ローカルのJSSサンプルフォルダーに移動して、 jss start:connected と入力してローカルで実行します。

ブラウザーが起動し、Disconnectedモードと同じようにアプリが動作します。ただし、今回の場合はコンテンツはSitecoreから取得されています。

以上でデプロイは完了です。

マルチサイト構成,今回の場合は、jss のサイト名で編集環境にアクセスできるようにしたい場合は、マルチサイトの設定をしてあげる必要があります。その場合は、マルチサイト名を使用してSitecore編集環境にログインするを参照してください。

// Net planet-es V2