Salesforce B2C CommerceのSFRA開発環境セットアップ＆デプロイ方法

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

SFRAの開発環境は２つあります。

* **Microsoft Visual Studio Code**
* **Eclipse (Intellijでもできそう)**

があります。今回は一番多く使われていると思われるVisual Studio Codeでの開発環境セットアップ方法とデバッグ方法を紹介します！([Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/cc-digital-for-developers/digital-dev-environment) ではVisual Studio Codeがメインだったので。)

ちなみにEclipseのセットアップ方法は英語ですが[ヘルプ](https://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/LegacyDevDoc/InstallUXStudio.html?resultof=%22%45%63%6c%69%70%73%65%22%20%22%65%63%6c%69%70%73%65%22%20)にまとまっております。日本語ですと、[こちらの記事](https://qiita.com/ienokado/items/100a3911918c8d010216)がわかりやすようだったので紹介しておきます。
また、Intellijに関しては、試してはいませんが[Plugin](https://github.com/nek4life/sfcc-studio)がありそうでした。


# 開発環境セットアップ

## 前提

* B2C CommerceのBusiness Managerへアクセスできる
* サイトにはSFRAがインポートされている(`管理 > サイトの開発 > サイトのインポート & エクスポート`で「Storefront Reference Architecture デモサイト」がインポート済み)

## 手順

### 1.  Microsoft Visual Studio Codeのインストール

この手順に関しては、一般的な内容であり、ググれば大量に出てくるともうので詳しく説明しません。
[ダンロードサイト](https://code.visualstudio.com/Download)よりダウンロード＆インストールしてください。


### 2. Prophet Debuggerプラグインのインストール

* 左ナビのextentionアイコンをクリック
* 「Prophet Debugger」を入力検索ボックスで検索
* 「install」ボタンをクリック
![スクリーンショット 2021-11-01 16.12.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/38245e91-4e2a-f059-de87-98978e757095.png)



### 3.  WebDAVへアクセスするためのアクセスキーを生成



* Business Managerの画面右上のアカウント名をクリックしマイページを表示後、「アクセスキーの管理」をクリックしページ遷移する
![スクリーンショット 2021-11-01 16.58.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/ab195544-e49a-be06-8dda-48c9a9396274.png)




* 「アクセスキーの生成」をクリックし、ポップアップを表示
![スクリーンショット 2021-11-01 16.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/0f5c6276-f9c2-d0ec-2719-7c83488f27ec.png)




* 「WebDAVのファイルアクセスとUX Studio」を選択し、「生成」ボタンをクリック
![スクリーンショット 2021-11-01 16.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/1c5d2adc-7b29-b7e2-1d22-b77880c4863b.png)





* アクセスキーが表示されるので、コピーしておく、さらに「ダウンロード」ボタンをクリックして保存しておく。
![スクリーンショット 2021-11-01 17.00.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/24956463-e63e-d506-b234-c0a979c0ae03.png)



### 4.  SFRAソースのダウンロード

* Business Managerで `管理 > サイトの開発 > コードのデプロイ` に遷移し、SFRAがデプロイされているバージョン(今回は、SFRA_UPC_05_04_2021)を選択（※ バージョン名の日付は作成するタイミングで変わります）
* 遷移先のページで「ダウンロード」ボタンをクリックし、ソースコードをダウンロードする
![スクリーンショット 2021-11-01 17.52.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/2a3a7d0e-18d1-7a87-2c3b-aef01846fd23.png)




### 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` ファイルをルートフォルダに作成し、下記の内容をコピペして、必要なところは修正

```json
{
    "hostname": "{B2C Commerce環境のホスト(e.g. xxx.xxx.xxx.commercecloud.salesforce.com)}",
    "username": "{Business Managerでの自分のメールアドレス}",
    "password": "{.3で取得したアクセスキー}",
    "code-version": "{のちのデプロイ方法で説明するので一旦空白}"
}
```
![スクリーンショット 2021-11-01 18.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/3e54e2f2-1b23-b2a7-02bb-92e7d7d1e0b2.png)



# デプロイ方法

## 前提

* 上記の開発環境セットアップが完了している

## 手順

### 1. カートリッジの作成

* 左ナビの雲マークをクリックし、さらに表示された「CARTRIDGES」項目の右上にある３点リーダから「Create cartridge」を選択

※`.project` がVS Codeのfile excludesに入っているとうまくカートリッジが読み込まれませんのでご注意ください。

![スクリーンショット 2021-11-01 17.58.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/cc8482ff-a2c8-ec3e-5fc8-3e55bcb56295.png)


* Folder to create cartridge in は空白のままEnterキーを押す
![スクリーンショット 2021-11-01 17.59.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/83c62647-17a2-4321-7039-7e9073ab7be1.png)




* your_cartridge_id に任意のカートリッジ名(今回は sample_cartridge)を入力し、Enterキーを押す
![スクリーンショット 2021-11-01 17.59.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/69cdeac6-943e-2ddb-aa69-33f8abb0d53e.png)




* 入力カートリッジ名（今回はsample_cartridge）のフォルダがワークスペース内に作成されるので、その中に `cartridge/controllers/Hello.js` ファイルを作成
* 下記のサンプルコードをコピペする

```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();
```
![スクリーンショット 2021-11-01 18.10.20 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/333079fa-32a4-c95d-fd64-6b254f6e6565.png)






### 2.デプロイバージョンの作成

* Business Managerで `管理 > サイトの開発 > コードのデプロイ` に遷移し新しいコードのバージョンを作成する（今回はsampleにしました）
![スクリーンショット 2021-11-01 18.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/786f3d4a-2578-7fb9-1b75-cc669b9bd37e.png)



### 3.デプロイ

* `dw.json` 内の`code-version`の値に2.で作成したコードのバージョン名を入力
* 左ナビの雲マークをクリックし、さらに表示された「CARTRIDGES」項目の右上にある３点リーダから「Prophet: Enable Upload」を選択、または３点リーダ左隣の「Clean Project/Upload all」をクリックしアップロードする。
* 以降は保存されると自動でアップロードされます。（保存を忘れがちの方は `File > Auto Save` で自動保存を有効にしておくといいと思います）
![スクリーンショット 2021-11-01 19.20.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/df0bea93-00d0-30e1-2464-8778e05ac7ee.png)



### 4.デプロイしたソースコードをアクティブにする

* Business Managerの`管理 > サイトの開発 > コードのデプロイ`に遷移して作成したバージョンの項目の右側にある「アクティブにする」をクリックし、アクティブにする。
![スクリーンショット 2021-11-01 19.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a532e5a9-abb2-278e-aa58-bf3dbc2c2143.png)




* Business Manager の　`管理 > サイト > サイトの管理 > {サイト名} - 設定`　に遷移し、カートリッジの項目に作成したカートリッジ名を左側に `:` 区切りで入力し、「適用」ボタンをクリックする。（カートリッジパス）
※同じディレクトリかつ同じ名前のファイルが別々のカートリッジにあるカートリッジパスの左にあるカートリッジのファイルが優先されます。

![スクリーンショット 2021-11-01 19.39.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/d9479a4c-c476-d386-c9bb-232b4df14149.png)




### 5.デプロイした内容の確認

* 　`https://{B2C Commerceのホスト}/on/demandware.store/Sites-{サイト名}-Site/ja_JP/Hello-Start`  に遷移して1.で作成したカートリッジからレスポンスされる「Hello World」が表示されていることを確認。

:::note warn 
※ もし表示されない場合はBusiness Managerの　マーチャントツール > サイト環境設定 > ストアフロント URL　内の「ストアフロント URL を有効にする」にチェックが外れているかを確認してください。
:::

![スクリーンショット 2021-11-01 19.45.18 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/bb8c31f9-3418-8943-be98-2428f98c7bfe.png)