※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

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 を有効にする」にチェックが外れているかを確認してください。