ストアフロントの立ち上げ

このガイドでは、新しい PWA Kit ストアフロントを立ち上げ、その公式の公開 Web アドレスからアクセス可能にする方法を説明します。PWA Kit ストアフロントへのトラフィックを開始してルーティングするためのオプションには、次の 2 つがあります。

  1. CloudFlare や Akamai などのサードパーティー CDN を使用する。
  2. Managed Runtime が提供する CDN を使用する。

このガイドでは、次の属性をもつストアフロントを例として使用します:

  • Production (本番) URL: https://www.example.com
  • プロジェクト ID: example
  • 環境: staging (ステージング) および production (本番)

このガイドで、“Mobify” という名前が使用されることがあります。Mobify は、PWA Kit と Managed Runtime のテクノロジーを最初に開発した会社の名前です。2020 年に Salesforce は Mobify と同社のすべてのテクノロジーを買収しました。

当社では Mobify を Salesforce にリブランディングする作業を進めています。Mobify のブランド名は、ストアフロントのホストに使用される mobify-storefront.com ドメインと、Managed Runtime API で使用される cloud.mobify.com ドメインに引き続き表示されます。新しい Salesforce ドメインが最終的にはこれらの Mobify ドメインを置き換えますが、Mobify ドメインのサポートは継続されます。

Managed Runtime は、PWA Kit ストアフロントの前でのサードパーティ CDN の使用をサポートします。最初に、デフォルトの設定で環境をデプロイします。次に、ストアフロント {{project}}-{{environment}}.mobify-storefront.com を、サードパーティの CDN に起点として追加します。CDN が、リクエストメソッド、パス (クエリ文字列を含む)、ヘッダー、ボディを転送するように構成されていることを確認します。また、CDN が HTTP キャッシングヘッダーに従うよう設定されていることも確認します。

CDN が正しく構成されていることを確認するために、HTTP リクエストを反映するハンドラーを追加することを検討します。

また、プロキシに渡されるヘッダーが正しく送信されることを確認するために、httpbin.org/anything でプロキシを追加することも検討します。

準備、Staging (ステージング) 環境の立ち上げ、および Production (本番) 環境の立ち上げという 3 つのステージで「ライブに移行」する方法を説明します。

このガイドでは、Runtime Admin Web アプリケーションと Managed Runtime API にアクセスして管理タスクを実行できることを前提としいます。これらのツールにアクセスするには、Commerce Cloud の管理者に連絡し、Account Manager を使用して Managed Runtime User または Managed Runtime Admin の役割のいずれかをアカウントに追加するよう依頼してください。

Managed Runtime API にリクエストを行うには、HTTP リクエスト Authorization ヘッダーに値 Bearer {{api_key}} で API キーを含める必要があります。すべてのリクエストの例で、{{api_key}} を実際の API キーに置き換えることを忘れないでください。

API を見つけるには、Runtime Admin にログインし、Account Settings (アカウント設定) ページを開きます。

重要: API キーを使用すると、スクリプトで操作を実行することができます。このため、API キーはパスワードと同様に取り扱ってください。

これらの手順はいつでも実行できますが、PWA Kit の使用開始後ただちに開始することをお勧めします。

ストアフロントの立ち上げを練習するために、Managed Runtime API または Runtime Admin Web アプリケーションを使用して、staging という名前の環境 (ターゲットとも呼ばれる) を作成します。

以下に示すリクエストの例では、Managed Runtime API の target エンドポイントを使用して環境を作成しています。リクエストで、example を実際のプロジェクト ID の文字列に、{{api_key}} を実際の API キーにそれぞれ置き換えてください。

Runtime Admin で環境を作成する方法については、Managed Runtime の管理のガイドを参照してください。

ストアフロントコードは B2C Commerce インスタンスにアクセスできることが必要です。つまり、API が公開されていることが必要です。

www.example.com が現在 B2C Commerce インスタンスに解決しているとします。立ち上げ後、www.example.com は mobify-storefront.com ドメインに解決します。ストアフロントコードでは、B2C Commerce インスタンスに関連付けられている API を指定する方法が必要です。API を api.example.com で使用可能にし、この API を使用するように環境のプロキシ設定を更新することができます。詳細については、リクエストのプロキシのガイドを参照してください。

Salesforce にドメインの TLS 証明書の発行を許可するには、CNAME レコードを作成する必要があります。Salesforce カスタマーサポートに連絡し、ストアフロントの CNAME レコードを作成するために必要な情報を提供するように依頼してください。

詳細を受け取ってから 24 時間以内に、CNAME レコードを作成します。CNAME レコードは次のようになります:

立ち上げのプロセスは必ず Staging (ステージング) 環境でテストしてください。

ここでは、staging.example.com でストアフロントを立ち上げようとしていて、Managed Runtime でのプロジェクト ID は example とし、staging という名前の環境にバンドルをデプロイするとします。

staging.example.com の TTL (有効期限) を 1 分に短縮します。TTL を短縮することで DNS を切り替えるプロセスがスピードアップし、問題が発生した場合にすばやくロールバックできます。

TTL は次のように dig コマンドを使用して確認できます:

ホスト staging.example.com からトラフィックを受信するように環境を構成します。

次のように Managed Runtime API を使用して、環境の ssr_external_domain と ssr_external_hostname の設定を更新します:

重要: この手順を実行すると、mobify-storefront.com ドメインから環境にアクセスすることはできなくなります。

DNS スプーフィング でリクエストを行う cURL コマンドを使用して、新しい設定が有効になっていることを確認します。

Salesforce サポートは、規則 {{project}}-{{environment}}-cdn.mobify-storefront.com に従って安定したドメインを提供します。ここで {{project}} はプロジェクト ID、{{environment}} は環境 ID です。

staging.example.com の DNS CNAME レコードを example-staging-cdn.mobify-storefront.com に更新します。 Web ブラウザーを開き、staging.example.com にナビゲートします。

これでテストの立ち上げが完了しました。 🥳

立ち上げの準備が整ったら、production の環境とドメインを使用してテストの立ち上げと同じ手順に従います。

ここからは、Customer Success グループがサイトのトラフィックをモニタリングして立ち上げに成功したことを確認するお手伝いをします。目標は、立ち上げですべてが適切に機能することを確認することです。

立ち上げ後、Signature Success Plan の顧客に対してはプロアクティブなサイトの監視が行われます。この補強されたモニタリングサービスを利用するには、環境を Production (本番) としてマークする必要があります。詳細については、「Managed Runtime の概要」の環境を参照してください。

  • ssr_external_domain ターゲット設定では、ターゲットがどのホストからトラフィックを受信するかをコントロールします。リクエストの HTTP Host ヘッダーがこの値と一致しない場合、リクエストは失敗します。
  • 現在 Salesforce では、example.com などの (www サブドメインのない) ベアドメインはサポートされていません。ベアドメインを使用するには、ベアドメインから CNAME にリクエストをリダイレクトするようにサーバーを設定する必要があります。

使用するドメインによってサイトの動作を変える条件ロジックを追加する必要がある場合、ローカル開発サーバーでカスタムドメインを使用できれば、このロジックをテストしやすくなります。この種のロジックを追加する理由はどのようなものでしょうか。たとえば、ドメインによって異なる SLAS クライアント ID を検索する必要がある場合を考えてみましょう。

カスタムのドメインを使用してローカル開発サーバーを実行するには、次のようにします。

  1. ローカルコンピューターの DNS を変更して、カスタムドメインを 127.0.0.1 (ローカルホスト) に解決します。
  2. ssr.js を編集します。
  3. runtime.createHandler に渡す options で、ポートを 80 に設定します。
  4. EXTERNAL_DOMAIN_NAME=www.example.com npm start を実行し、example.com の値をカスタムドメインで置き換えます。サーバーをポート 80 で実行するために、管理者の権限が必要になることがあります。

ブラウザーからのカスタムドメインへのリクエストが解決され、ローカル開発サーバーにルーティングされるようになります。

これにより、デバッグを容易に行えるようになります。😊