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

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

この記事ではDeveloper Center にあるGetting Startedの内容を実際にやってみながら簡易にまとめてみました！

完成形

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

前提

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

=== 追記====

朗報です！
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って何？って方はこちらをご覧ください。
  • 【確認方法】
    • 利用しているBusiness ManagerのURLから確認できます。例えば、Sandboxのドメインが axgy-005.dx.commercecloud.salesforce.comの場合は axgy-005のaxgy部分がRealm IDです。
• Instance ID
  • Instanceを識別するためのIDで3 桁の文字列です。そもInstanceって何？って方はこちらをご覧ください。
  • 【確認方法】
    • 利用している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とCreate a SLAS Clientをそのまま手順に従って設定してください。

• もしテナントがない場合は Advanced: SLAS Admin API の「Create a SLAS Tenant」を実行してください。
• もし設定する権限がない(Account Administrator ロールがない)場合は、Account Managerを管理している方に設定してもらってください。

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

Update Open Commerce API Settings
をそのまま手順に従って設定してください。

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

a. プロジェクトの作成

• Create a Project に沿ってプロジェクトを作成してください。
  （Managed Runtimeにログインする権限がない場合は、Account Managerの管理者に Managed Runtime User またはManaged Runtime Admin ロールの付与を依頼してください。）

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

a. 要件確認

要件一覧よりシステム要件を確認してください。

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

Setting Up Your Local Environment に従って、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の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で設定したクライアントのID(UUID)です。
  • What is your Site ID in Business Manager?
    * 1-aのSite IDと同じ。
  • What is your Commerce API organization ID in Business Manager?
    * 1-aのOrganization IDと同じ。
  • What is your Commerce API short code in Business Manager?
    * 1-aの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にプロジェクトを作成が完了していれば、既に持っているかと思います。もし、権限がない場合はAccount Managerの管理者にManaged Runtime User またはManaged Runtime Admin ロールの付与を依頼してください。

b. 認証情報の設定

Saving Your Credentialsに沿って設定してください。

c. ソースコードのプッシュ

Pushing a Bundleに沿って設定してください。

d. デプロイ

Deploying a Bundleに沿って設定してください。

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

a. Runtime Admin での設定

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

確認

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