スクラッチ組織で Salesforce D2C Commerce の環境を作成してみる

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


今回の記事では [commerce-on-lightning](https://github.com/forcedotcom/commerce-on-lightning) という SFDX コマンドのプラグインを利用してストアの設定や決済の設定、商品のアップロードを行い、スクラッチ環境で D2C Commerce の開発ができるようにしていきたいと思います。



## 前提

* [SFDX コマンド](https://developer.salesforce.com/ja/tools/sfdxcli)はインストール済み
* お持ちの組織の [DevHub 組織を有功化](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_setup_enable_devhub.htm)しておいてください
* 今回は DevHub 組織として[Developer Edition](https://developer.salesforce.com/jpblogs/2016/04/developer-edition-signup/) を利用しました。



## 手順

### 1. コードの修正とインストール

通常は `sfdx plugins:install @salesforce/commerce` コマンドでインストールすれば可能なのですが、現在進行形で開発が進んでいるということでまだバグがありました。（2022/12時点）　
そのため下記の手順でローカルで修正して使うことをおすすめします。

追記：
（v244.0.7 では正しく動いていることを確認できました。）　


1. まずは下記コードでレポジトリをクローンします。

    ```sh
    git clone git@github.com:forcedotcom/commerce-on-lightning.git
    ```

1. ルートフォルダで下記コードを実行してプラグインをインストールします。

    ```sh
    sfdx plugins:link .
    ```
    その他レポジトリに対するコントリビュートに関しては[こちら](https://github.com/forcedotcom/commerce-on-lightning#contributing)。



##### 自分の DevHub 組織が英語じゃない場合は下記の内容も追加

* `config/b2b-project-scratch-def.json` と `config/b2c-project-scratch-def.json` に下記コードを追加。([サンプル](https://github.com/forcedotcom/commerce-on-lightning/pull/156/files)）

    ```json
    "country": "us",
    "language": "en_US",
    ```





### 2. 依存プラグインのインストール

上記のプラグイン内で利用されているプラグインです。

```sh
sfdx plugins:install shane-sfdx-plugins
```




### 3. スクラッチ組織の作成

今回は `DevHub` というエイリアスを持つ DevHub 組織を利用して、`sampleScratch` というエイリアスを持つスクラッチ組織を作成します。

下記コマンドでスクラッチ組織の作成します。
D2C の環境を作成するので、タイプとして `b2c` を設定しています。またユーザのアカウント名は任意ですが、DevHub 組織内でユニークにする必要があるので、MacOS の組み込み変数の `$RANDOM` を利用して `$RANDOM@1commerce.com` のフォーマットで指定しました。

```sh
sfdx commerce:scratchorg:create -t b2c -a sampleScratch -u "$RANDOM@1commerce.com" -v DevHub
```

:::note info
Tips: 作成時に便利なコマンドを紹介しておきます。

```sh
## 作成した組織を一覧表示する
sfdx force:org:list

## 作成した組織をブラウザで開く
sfdx force:org:open -u sampleScratch

## 作成した組織を削除する
sfdx force:org:delete -u sampleScratch

## (SFDXプロジェクト内で)作成した組織をコマンドのデフォルトとして設定する
sfdx config:set defaultusername=sampleScratch
```
:::



### 4. ストアの作成・設定

**ここが今回の一番重要な部分です。**
下記コマンドで、作成したスクラッチ環境にストアを作成し、諸々の設定を行います。
ここでは `1commerce` という名前のサイトを作成しています。また今回は D2C のサイトの作成なのでタイプとしては `b2c` を指定し、さらに  `samplebuyer$RANDOM@1commerce.com` というアカウント名のバイヤー（フロントサイトから買い物するアカウント）を作成します。

```sh
sfdx commerce:store:create -n 1commerce -o b2c -u sampleScratch -v DevHub -b "samplebuyer$RANDOM@1commerce.com"
```


コマンドが完了すると、ターミナル上に下記のような文字列が表示されていれば完了です。これらの情報はフロントサイトにログインする際に利用できます。

![スクリーンショット 2023-02-18 14.44.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/7e9e9301-af45-b3d3-b42c-a981cd003da4.png)



### 5. 作成したストアの確認

`4. ストアの作成・設定` で表示された  `communityUrl` にアクセスし、ログイン画面を表示します。 

![スクリーンショット 2022-12-27 15.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/7b0d8685-d943-3cbc-be48-e93bae512286.png)



さらにここで `username` と `password` の値でログインできることが確認できます。（もし入れなかったら「Forgot your passowrd?」からパスワードを登録し直してみてください。）

![スクリーンショット 2022-12-27 15.33.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/af132698-a6ae-6d84-a437-fb36eb7f18cd.png)




## 追加の設定

### サードパーティ決済の設定

下記コマンドで Stripe のサンプルコードをスクラッチ環境に設定することが可能です。Stripe 以外の選択肢は[こちら](https://github.com/forcedotcom/commerce-on-lightning/tree/develop/examples/b2c/checkout/payment-gateway-integration)のフォルダ名になります。

```sh
sfdx commerce:payments:quickstart:setup -p Stripe -n 1commerce -u sampleScratch
```




### ログインしていなくてもサイトを表示できるようにする

デフォルトではログインしてないとフロントサイトは表示できませんが、ログインなしてフロントを表示できるようにするためには下記の手順で設定を行います。



1. 作成したストア（1commerce）の設定画面に遷移して「Experience Builder」をクリックします。


    ![スクリーンショット 2022-12-27 15.41.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/9dc3f742-7caf-de8d-91cc-56da52c59bca.png)




1. エクスペリエンスビルダーの設定から「Guest users can see and interact with the site without logging in」にチェックを入れます。

    ![スクリーンショット 2022-12-27 14.17.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/2d363fb5-3821-7d4d-0777-fdb034093369.png)



1. 最後に右上の「Publish」ボタンをクリックして設定を反映させます。


    ![スクリーンショット 2022-12-27 14.17.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/496d2a90-11fb-e5fe-aa04-4436e23d61d7.png)




1. ログインしていない状態でもフロントサイトが表示されるが確認できます。


    ![スクリーンショット 2022-12-27 15.46.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/60a0f486-8c83-1a28-932f-ca47a7d2a9c0.png)


:::note warn
もし上記の設定でできなかった場合は、[ヘルプ](https://help.salesforce.com/s/articleView?id=sf.comm_config_guest_browsing.htm&type=5)を見て設定が入っているか再確認いてください。
:::


## 自分の環境にソースコードを修正できるようにする（VS Code）

ここではスクラッチ組織にデプロイされているソースをローカルにダウンロードする方法を紹介します。


1. VS Code のコマンドパレットでSFDX プロジェクトを作成します。方法については以前紹介した Qiita の「[プロジェクトの作成](https://qiita.com/syunyama/items/8c591c9fbe89731204a0#1-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)」を参照してください。

1. 作成したプロジェクトのルートフォルダで下記のようにユーザを作成したスクラッチ環境のものに置き換えます。

    `sfdx config:set defaultusername=sampleScratch`

1. 最後にコマンドパレットでソースをプルしてください。方法については以前紹介した Qiita の「[ソースの取得](https://qiita.com/syunyama/items/8c591c9fbe89731204a0#3platform%E4%B8%8A%E3%81%AB%E5%AE%9F%E8%A3%85%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E5%8F%96%E5%BE%97)」を参照してください。