Salesforce B2C Commerce PWA Kit のサンプルを構築してみる

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

この記事ではDeveloper Center にある[Getting Started](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html)の内容を実際にやってみながら簡易にまとめてみました！


## 完成形

手順に沿って進めると、画像のようにManaged Runtime上にデプロイされたPWA Kitを確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/79025feb-4993-2b33-f7c4-26837878e29d.png)





## 前提

* B2C CommerceとManaged Runtimeの環境を持っており、カタログや商品の設定等の基本的な設定は終わっていることを前提に進めています。
* PWA Kit v1.1.0 で作成しています。

=== 追記====

:::note info
朗報です！
`npx pwa-kit-create-app@latest --preset retail-react-app-demo` のように `retail-react-app-demo` というプリセットを利用することで、B2C Commerce sandboxやAccount Managerのアカウントがなくてもデモサーバに繋がるので、気軽にローカルでPWA Kitを触れるようになりました!
:::

## 手順概要

1. Comerce API アクセスの設定
    a. B2C Commerce に関わるIDを把握
    b. Account Manager にて API Client を作成
    c. Business Manager にて Open CommerceAPI の設定
2. Managed Runtime にプロジェクトを作成
    a. プロジェクトの作成
3. ローカルでの環境構築
    a. 要件確認
    b. Node, NPM のインストール
    c. PWA Kit のプロジェクトの作成
4. Managed Runtime への公開・デプロイ
    a. Managed Runtime へのアクセスの設定
    b. 認証情報の設定
    c. ソースコードのプッシュ
    d. デプロイ
5. Managed Runtime のプロキシの設定
    a. Runtime Admin での設定







## 手順詳細
## 1.  Commerce API アクセスの設定

### a.  B2C Commerce に関わる ID を把握

* **Realm ID**
    * Realmを識別するためのIDで4桁の文字列です。そもそもRealmって何？って方は[こちら](https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2Fcontent%2Fb2c_commerce%2Ftopics%2Fgetting_started%2Fb2c_platform_overview.html)をご覧ください。
    * 【確認方法】
        * 利用しているBusiness ManagerのURLから確認できます。例えば、Sandboxのドメインが  `axgy-005.dx.commercecloud.salesforce.com`の場合は `axgy-005`の`axgy`部分がRealm IDです。
* **Instance ID**
    * Instanceを識別するためのIDで3 桁の文字列です。そもInstanceって何？って方は[こちら](https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2Fcontent%2Fb2c_commerce%2Ftopics%2Fgetting_started%2Fb2c_platform_overview.html)をご覧ください。
    * 【確認方法】
        * 利用しているBusiness ManagerのURLから確認できます。例えば、Sandboxのドメインが  `axgy-005.dx.commercecloud.salesforce.com` の場合は  `axgy-005` の`005`部分がInstance IDです。
* **Short Code**
    * URLルーティングする際に利用されるコードで8桁の文字列です。Short Codeが `u8ak193h`の場合、`u8ak193h.api.commercecloud.salesforce.com` でRealmのAPIを呼ぶことが可能です。
    * 【確認方法】
        * Short Codeの確認方法はBusiness Managerで `管理 > サイトの開発 > Salesforce Commerce API 設定`で確認することができます。
* **Organization ID**
    * インスタンスによって異なる文字列で、Commerce APIを利用するときに識別子として利用します。`f_ecom_{realm_id}_{instance_id}`のようなフォーマットで文字列を作成します。例えばRealm IDが `axgy`、Instance IDが`005`部分は`f_ecom_axgy_005`となります。
    * 【確認方法】
        * Short Codeと同様、Organization IDもBusiness Managerの `管理 > サイトの開発 > Salesforce Commerce API 設定`で確認することができます。
* **Tenant ID**
    * Shopper Login and API Access Service (SLAS)を設定する際に利用します。Organization IDから`f_ecom_`を削除した文字列です。つまり、`{realm_id}_{instance_id}`です。例えば、Organization IDが`f_ecom_axgy_005`の場合は、`axgy_005`になります。
* **Site ID**
    * Organization内にあるサイトを識別するための文字列です。例えば、SFRAでいえば、 `RefArch`がそれにあたります。
    * 【確認方法】
        * Business Managerの `管理 > サイト > サイトの管理`でリストの中のIDの項目から確認できます。



### b. Account ManagerにてAPI Clientを作成

[Set Up User Roles and Filters](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html#set-up-user-roles-and-filters)と[Create a SLAS Client](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html#create-a-slas-client)をそのまま手順に従って設定してください。

* もしテナントがない場合は [Advanced: SLAS Admin API](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html#advanced-slas-admin-api) の「Create a SLAS Tenant」を実行してください。
* もし設定する権限がない(`Account Administrator` ロールがない)場合は、Account Managerを管理している方に設定してもらってください。

### c. Business ManagerにてOpen Commerce APIの設定

[Update Open Commerce API Settings](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/setting-up-api-access.html#update-open-commerce-api-settings)
をそのまま手順に従って設定してください。

### 

## 2. Managed Runtimeにプロジェクトを作成



### a. プロジェクトの作成

* [Create a Project](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/managed-runtime-administration.html) に沿ってプロジェクトを作成してください。
（Managed Runtimeにログインする権限がない場合は、Account Managerの管理者に `Managed Runtime User` または`Managed Runtime Admin` ロールの付与を依頼してください。）


## 3.  ローカルでの環境構築

### a. 要件確認

[要件一覧](https://developer.commercecloud.com/s/article/Getting-Started-with-PWA-Kit#setting-up-your-environment)よりシステム要件を確認してください。

### b. Node, NPMのインストール

[Setting Up Your Local Environment](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/setting-up-your-local-environment.html) に従って、Node, NPMをインストールしてください。

### c. PWA Kitのプロジェクトの作成

* ローカルのコマンドラインから任意のディレクトリに遷移し、`npx @salesforce/pwa-kit-create-app@latest --outputDir <YOUR_PROJECT_NAME> --preset retail-react-app` コマンドによりプロジェクトを作成してください。`<YOUR_PROJECT_NAME>`に指定した名前のディレクトリ名のプロジェクトがカレントディレクトリに出力されます。コマンド実行時に下記の入力を要求されます。


  * What is the name of your Project? 
        * [Managed Runtime](https://runtime.commercecloud.com/)の`Projects　＞　{作成したプロジェクト}　＞　Project Setting ＞　General`にProject IDが記載されていますのでそれを入力。
  * What is the URL for your Commerce Cloud instance? 
        * SandboxのURLを入力する。例：`https://axgy_005.dx.commercecloud.salesforce.com`
  * What is your SLAS API Client ID in Account Manager?
        * 先述の[1-b](#b-account-manager%E3%81%AB%E3%81%A6api-client%E3%82%92%E4%BD%9C%E6%88%90)で設定したクライアントのID(UUID)です。
  * What is your Site ID in Business Manager? 
        * [1-a](#1--commerce-api%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A)のSite IDと同じ。
  * What is your Commerce API organization ID in Business Manager?
        * [1-a](#1--commerce-api%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A)のOrganization IDと同じ。
  * What is your Commerce API short code in Business Manager?
        * [1-a](#1--commerce-api%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A)のShort Codeと同じ。
* ローカルで起動してみる
    * 作成したプロジェクトのルートディレクトリで`npm start`を実行すると、`http://localhost:3000` でサイトを表示することができます。（立ち上がるまでに少し時間がかかるかもしれません。）
    * もし、`This page isn’t working.It looks like the locale ‘en-GB’ hasn’t been set up, yet.` のようなエラーが出た時は、`マーチャントツール > サイト環境設定 > 地域情報` に遷移して`en_GB` にチェックを入れて適用ボタンを押下してください。





## 4.  Managed Runtimeへの公開・デプロイ

### a. Managed Runtimeへのアクセスの設定

[2. Managed Runtimeにプロジェクトを作成](#2-managed-runtime%E3%81%AB%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90)が完了していれば、既に持っているかと思います。もし、権限がない場合はAccount Managerの管理者に`Managed Runtime User` または`Managed Runtime Admin` ロールの付与を依頼してください。


### b. 認証情報の設定

[Saving Your Credentials](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pushing-and-deploying-bundles.html#saving-your-credentials)に沿って設定してください。

### c. ソースコードのプッシュ
[Pushing a Bundle](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pushing-and-deploying-bundles.html#pushing-a-bundle)に沿って設定してください。

### d. デプロイ
[Deploying a Bundle](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pushing-and-deploying-bundles.html#deploying-a-bundle)に沿って設定してください。





## 5.  Managed Runtimeのプロキシの設定

### a. Runtime Admin での設定

* [Runtime Admin](https://runtime.commercecloud.com/)にアクセス
* `{Project} > {Environment} > Environment Settings > Advanced` の設定を編集モードする
* Proxy Configs項目をプロジェクトのルートディレクトリにある`package.json`内の`mobify.ssrParameters.proxyConfigs` または `config/default.js` 内の `ssrParameters.proxyConfigs` と同様の内容を設定し保存する


![スクリーンショット 2021-10-05 14.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/85130aaa-781f-3361-d1ce-cc01596e9fc6.png)

![スクリーンショット 2021-10-05 14.39.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fa175a85-98dd-adbf-f46c-81087f3699a1.png)



## 確認
`https://{project-environment}.mobify-storefront.com` (画像のようにManaged Runtimeから確認可能)にアクセスして完成形の画面が表示されていれば完了です。


![スクリーンショット 2021-10-29 15.03.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/f5c77c14-ab07-2fe6-6e77-18eae3e534a3.png)