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

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

  1. CloudFlare や Akamai などのサードパーティー CDN を使用する。
  2. Salesforce Commerce Cloud が提供する埋め込み CDN (eCDN) を使用する。eCDN を使用して Managed Runtime にトラフィックをルーティングする方法の詳細については、このガイドを参照してください。
  3. Managed Runtime API を使用する。

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

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

Managed Runtime の上にサードパーティ CDN をスタックするオプションがあります。お客さまは、以下に基づいてサードパーティ CDN の使用を選択できます。

  • 選択した CDN ベンダーとの既存の関係があり、社内チームは CDN の構成と管理に熟練している。
  • カスタム WAF ルール、追加のパフォーマンスヘッダー、追加のサードパーティの統合など、Managed Runtime が提供する機能を超える CDN 機能の追加制御が必要である。

低コストでのサービスや迅速な市場投入を希望し、CDN 要件が限定されているお客様は、eCDN または組み込みの Managed Runtime CDN を使用できます。

このガイドでは、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 キーはパスワードと同様に取り扱ってください。

CNAME レコードを作成および更新するには DNS プロバイダーにアクセスするだけでなく、サードパーティの CDN プロバイダー (該当する場合) にもアクセスする必要があります。

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

ブランド名「Mobify」は、ストアフロントのホストに使用される mobify-storefront.com ドメインと、Managed Runtime API で使用される cloud.mobify.com ドメインに表示されます。

使用するドメインに応じてサイトの動作を変える条件ロジックを追加する必要がある場合、ローカル開発サーバーでカスタムドメインを使用できれば、このロジックをテストしやすくなります。この種のロジックを追加する理由はどのようなものでしょうか。たとえば、ドメインによって異なる 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 で実行するために、管理者の権限が必要になる場合があります。

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

環境を起動するプロセスは Staging (ステージング) と Production (本番) で同様ですが、唯一の違いは、使用されるドメイン名と Managed Runtime 環境です。

本番環境でプロセスを繰り返す前に、まずステージング環境で起動プロセスを実行することを強くお勧めします。

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

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

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

以下は、Managed Runtime API の projects_target_create エンドポイントを使用して環境を作成するサンプルリクエストです。このリクエストで、example を実際のプロジェクト ID の文字列に、$API_KEY を実際の API キーにそれぞれ置き換えてください。

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

ほとんどの PWA Kit の実装は、B2C Commerce によって提供される OCAPI およびコントローラーにリクエストを出します。

これらのリクエストを行うには、Managed Runtime が B2C Commerce インスタンスに関連付けられたドメインに到達できることを確認する必要があります。

ドメインに到達できるようにするには通常、B2C Commerce インスタンスを ecom.example.com のようなサブドメインで利用できるように eCDN を構成する必要があります。詳細については、eCDN の設定と構成に関するドキュメントを参照してください。

B2C Commerce eCDN ドメインを構成した後、新しい API の場所を使用するように環境のプロキシ設定を更新してください。詳細については、リクエストのプロキシのガイドを参照してください。

トラフィックを Managed Runtime CDN に直接ルーティングしている場合は、Managed Runtime が TLS 証明書を発行して管理します。

サードパーティ CDN または eCDN を使用する場合は、この手順は必要ありません。TLS 証明書の構成については、お使いの CDN ベンダーのドキュメントを参照してください。

Managed Runtime が TLS 証明書を発行できるようにするには、CNAME レコードを作成する必要があります。Salesforce カスタマーサポートに連絡し、必要な証明書ドメインを提供してください。その後、Salesforce から証明書の詳細検証 CNAME レコードが提供されます。*.example.com などのワイルドカード証明書がサポートされています。

カスタムドメインでの起動は、Staging (ステージング) 環境と Production (本番) 環境でサポートされています。Development (開発) など、他のすべての環境は現在、デフォルトの mobify-storefront.com ドメインの使用を継続するように制限されています。

提供された検証 DNS CNAME レコードは、情報を受け取ってから 24 時間以内に作成する必要があります。次のようになります:

サードパーティ CDN を使用する場合は、この手順は必要ありません。

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

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

サードパーティ CDN を使用する場合は、この手順は必要ありません。

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

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

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

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

サードパーティ CDN と Managed Runtime CDN を使用する場合、カットオーバーのプロセスは異なります。

このオプションでは、既存の CDN オリジンではなく Managed Runtime オリジンを指すように CDN を構成する必要があります。詳細なガイダンスについては、お使いの CDN プロバイダーのドキュメントを参照してください。

外部ホスト名 ({{project}}-{{environment}}.mobify-storefront.com) をサードパーティ CDN のオリジンとして追加します。CDN が以下のように構成されていることを確認してください。

  • Host ヘッダーをオリジン {{project}}-{{environment}}.mobify-storefront.com と一致するように設定
  • リクエストメソッドを転送
  • パスを転送 (クエリ文字列を含む)
  • ヘッダーを転送
  • 本文を転送
  • HTTP キャッシングヘッダーに従う

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

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

このオプションでは、DNS カットオーバーを実行し、ドメインを古いオリジンから Managed Runtime CDN にポイントする必要があります。

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 にナビゲートします。

おめでとうございます。立ち上げが完了しました! 🥳

ステージングサイトでこれらの手順を完了した後、本番ドメインと本番環境で同じプロセスを繰り返すことができます。

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

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

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