※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
SFRAの開発環境は２つあります。
- Microsoft Visual Studio Code
- Eclipse (Intellijでもできそう)
があります。今回は一番多く使われていると思われるVisual Studio Codeでの開発環境セットアップ方法とデバッグ方法を紹介します！(Trailhead ではVisual Studio Codeがメインだったので。)
ちなみにEclipseのセットアップ方法は英語ですがヘルプにまとまっております。日本語ですと、こちらの記事がわかりやすようだったので紹介しておきます。
また、Intellijに関しては、試してはいませんがPluginがありそうでした。
開発環境セットアップ
前提
- B2C CommerceのBusiness Managerへアクセスできる
- サイトにはSFRAがインポートされている(
管理 > サイトの開発 > サイトのインポート & エクスポートで「Storefront Reference Architecture デモサイト」がインポート済み)
手順
1. Microsoft Visual Studio Codeのインストール
この手順に関しては、一般的な内容であり、ググれば大量に出てくるともうので詳しく説明しません。
ダンロードサイトよりダウンロード＆インストールしてください。
2. Prophet Debuggerプラグインのインストール
- 左ナビのextentionアイコンをクリック
- 「Prophet Debugger」を入力検索ボックスで検索
- 「install」ボタンをクリック
3. WebDAVへアクセスするためのアクセスキーを生成
-
Business Managerの画面右上のアカウント名をクリックしマイページを表示後、「アクセスキーの管理」をクリックしページ遷移する
-
「アクセスキーの生成」をクリックし、ポップアップを表示
-
「WebDAVのファイルアクセスとUX Studio」を選択し、「生成」ボタンをクリック
-
アクセスキーが表示されるので、コピーしておく、さらに「ダウンロード」ボタンをクリックして保存しておく。
4. SFRAソースのダウンロード
- Business Managerで
管理 > サイトの開発 > コードのデプロイに遷移し、SFRAがデプロイされているバージョン(今回は、SFRA_UPC_05_04_2021)を選択（※ バージョン名の日付は作成するタイミングで変わります） - 遷移先のページで「ダウンロード」ボタンをクリックし、ソースコードをダウンロードする
5. ワークスペースの設定
- ダウンロードした、「SFRA_UPC_05_04_2021.zip」を任意の場所で解凍して任意のフォルダ名に変更。（今回はsampleにしました）
- Visual Studioのメニューバーで
File > Add Folder to Workspaceを選択し、名前を変更したフォルダを選択。 - Visual Studioのメニューバーで
File > Save Workspace Asを選択し、{任意の名前}.code-workspaceファイル（今回はsample.code-workspaceにしました）をルートフォルダ(今回はsampleフォルダ直下)に作成
6. アクセスキーの設定
-
dw.jsonファイルをルートフォルダに作成し、下記の内容をコピペして、必要なところは修正
{
"hostname": "{B2C Commerce環境のホスト(e.g. xxx.xxx.xxx.commercecloud.salesforce.com)}",
"username": "{Business Managerでの自分のメールアドレス}",
"password": "{.3で取得したアクセスキー}",
"code-version": "{のちのデプロイ方法で説明するので一旦空白}"
}
デプロイ方法
前提
- 上記の開発環境セットアップが完了している
手順
1. カートリッジの作成
- 左ナビの雲マークをクリックし、さらに表示された「CARTRIDGES」項目の右上にある３点リーダから「Create cartridge」を選択
※.project がVS Codeのfile excludesに入っているとうまくカートリッジが読み込まれませんのでご注意ください。
-
Folder to create cartridge in は空白のままEnterキーを押す
-
your_cartridge_id に任意のカートリッジ名(今回は sample_cartridge)を入力し、Enterキーを押す
-
入力カートリッジ名（今回はsample_cartridge）のフォルダがワークスペース内に作成されるので、その中に
cartridge/controllers/Hello.jsファイルを作成 -
下記のサンプルコードをコピペする
'use strict';
var server = require('server');
var Logger = require('dw/system/Logger');
server.get('Start', function (req, res, next) {
var logger = Logger.getLogger("TEST_FilePrefix", "TEST_Category");
logger.error("プロブレム: {0}", "問題！！");
res.print('<h1>Hello World</h1>');
next();
});
module.exports = server.exports();
2.デプロイバージョンの作成
- Business Managerで
管理 > サイトの開発 > コードのデプロイに遷移し新しいコードのバージョンを作成する（今回はsampleにしました）
3.デプロイ
-
dw.json内のcode-versionの値に2.で作成したコードのバージョン名を入力 - 左ナビの雲マークをクリックし、さらに表示された「CARTRIDGES」項目の右上にある３点リーダから「Prophet: Enable Upload」を選択、または３点リーダ左隣の「Clean Project/Upload all」をクリックしアップロードする。
- 以降は保存されると自動でアップロードされます。（保存を忘れがちの方は
File > Auto Saveで自動保存を有効にしておくといいと思います）
4.デプロイしたソースコードをアクティブにする
-
Business Managerの
管理 > サイトの開発 > コードのデプロイに遷移して作成したバージョンの項目の右側にある「アクティブにする」をクリックし、アクティブにする。
-
Business Manager の
管理 > サイト > サイトの管理 > {サイト名} - 設定に遷移し、カートリッジの項目に作成したカートリッジ名を左側に:区切りで入力し、「適用」ボタンをクリックする。（カートリッジパス）
※同じディレクトリかつ同じ名前のファイルが別々のカートリッジにあるカートリッジパスの左にあるカートリッジのファイルが優先されます。
5.デプロイした内容の確認
-
https://{B2C Commerceのホスト}/on/demandware.store/Sites-{サイト名}-Site/ja_JP/Hello-Startに遷移して1.で作成したカートリッジからレスポンスされる「Hello World」が表示されていることを確認。
※ もし表示されない場合はBusiness Managerの マーチャントツール > サイト環境設定 > ストアフロント URL 内の「ストアフロント URL を有効にする」にチェックが外れているかを確認してください。
