B2C CommerceCloud SFRAの開発環境構築　その１

自分メモ用
一部Windowsと共通の部分もありますが、**Mac OS**前提での環境構築手順です。

基本的な環境設定とbaseカートリッジのアップロードを行います。
[参考ヘルプ](https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2Fcontent%2Fb2c_commerce%2Ftopics%2Fsfra%2Fb2c_getting_started_with_sfra.html)

ちなみにですが、**baseカートリッジは基本的に自分たちで追記・修正しません。**
機能追加などはカスタムカートリッジ、Linkカートリッジで行います。
カスタムカートリッジについては別記事作成予定です。

#Githubからbaseカートリッジを取得する

## 認証
https://github.com/orgs/SalesforceCommerceCloud/sso

上記URLにアクセスし、AccountManager経由で認証を行います。
※現在、CommerceCloudのアカウントを持っていない人には公開されておりません。

SFRAのbaseカートリッジ（サンプルサイトのソース・コード郡）だけでなく、各種Linkカートリッジ、Pluginなどもこちらから確認できます。
StagingへデプロイするBuild Suiteもこちらからダウンロードできます。


## Clone or ダウンロード
https://github.com/SalesforceCommerceCloud/storefront-reference-architecture

上記リポジトリをClone or ダウンロードし、ローカルに保存します。

#VS Code の設定
##Node.js のインストール
storefront-reference-architecture ディレクトリに移動し、Node.js のインストールを行います。
※Node.jsのバージョンは６.x 以降でないと動作しません。

![スクリーンショット 2020-08-29 19.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/8a66a42c-ca67-0141-7b0c-bd8dc8559e86.png)


ターミナルで下記コマンドを実行します。
既にインストール済みの場合はバージョン情報を表示されます。

```
node -v
```

![スクリーンショット 2020-08-29 19.53.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/a146c302-c995-2e10-b8dc-6c88f6232bac.png)

##npm module のインストール
storefront-reference-architecture ディレクトリで下記コマンドを実行します。

```
npm install
```
![スクリーンショット 2020-08-29 19.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/66ba3d3f-63e8-1d93-182e-e2c047e9edd3.png)

特にエラーが発生しなければOK。

#SFRA Command-Line Toolsのインストール
storefront-reference-architecture ディレクトリで下記コマンドを実行します。

```
npm install -g sgmf-scripts
```

終了後、下記コマンドが正常に動けばOK

```
sgmf-scripts --help
```
![スクリーンショット 2020-08-29 20.04.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/f92bf7be-0348-efe1-dbd3-c5c67568e1a0.png)

#カートリッジのビルド
## scss のコンパイル

```
npm run compile:scss
```

## js のコンパイル

```
npm run compile:js
```

## fonts のコンパイル（初回のみでOK）

```
npm run compile:fonts
```

各コマンド実行後、実行ログにエラーが無いことを確認します。
js、scssについては、下記ディレクトリ配下にコンパイル後のファイルが生成されます。
>/storefront-reference-architecture-master/cartridges/app_storefront_base/cartridge/static/

#カートリッジのアップロード
##dw.jsonの配置

dw.jsonファイルを作成し、下記ディレクトリに配置します。
/storefront-reference-architecture/dw.json

```
{
    "hostname": "yoursandbox-inside-your-realm.demandware.net",
    "username": "yourusername",
    "password": "yourpwd",
    "code-version": "version1"
}
```

**hosname** :sandboxのホスト。urlの一部をコピペする。

（例）
POD Sandbox：dev01-ap01-{relm名}.demandware.net/
ODS Sandbox：{sandbox名}.sandbox.us01.dx.commercecloud.salesforce.com/
※インスタンスやrelm、sandbox名はそれぞれの環境に置き換える。

**username** :AccountManagerで利用しているID（もしくはBMのID）
**password** :AccountManagerで利用しているPW（もしくはBMのPW）
**code-version** : アップロードしたいコードバージョンを設定します。
（存在しているバージョンなら更新、なければ新しいバージョンが作成されます）

BMでコードバージョンを確認。
Administration >  Site Development >  Code Deployment
![スクリーンショット 2020-08-29 21.47.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/150d377a-d043-228d-7af3-eee5004c4a37.png)

##カートリッジ、ファイルのアップロード
###コマンド
すべてのカートリッジアップロード

```
npm run uploadCartridge
```

特定のカートリッジアップロード

```
npm run uploadCartridge mycartridge
```

特定ファイルのアップロード

```
npm run upload path/to/my/filename.ext
```

#baseカートリッジを実際にアップロードする
実際に利用した、dw.json（一部情報はマスク）
code version 「version2」でアップロードします。

![スクリーンショット 2020-08-29 21.57.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/1e37a607-421b-3b11-c941-b38120126229.png)

コマンドを実行(npm run uploadCartridge app_storefront_base)
![スクリーンショット 2020-08-29 21.54.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/5cdefebf-012c-d3fc-c79c-9ce6acb3c576.png)

エラーが無ければ「Successfully uploaded cartridge: app_storefront_base」などが表示されます。



BMでアップロードされているかを確認します。
Administration >  Site Development >  Code Deployment
![スクリーンショット 2020-08-29 21.56.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309797/e66ba970-9ee8-ed80-27af-2b0f810a7969.png)
code versionに「version2」が追加されています。


ここまでが、カートリッジアップロードの流れです。