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

このガイドでは、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 の構成と管理に熟練している。
  • eCDN や 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 キーは、スクリプトがユーザーに代わって操作を完了できるようにするため、パスワードと同じように取り扱ってください。

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 環境です。

本番環境でプロセスを繰り返す前に、まずステージング環境で立ち上げプロセスを実行することを強くお勧めします。これらの手順は、PWA Kit プロジェクトを開始するとすぐに完了する必要があり、また、立ち上げ日の少なくとも 2 週間前に完了する必要があります。

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

Runtime Admin または Managed Runtime API を使用して staging という環境を作成し、ストアフロントの立ち上げを練習します。

projects_target_create エンドポイントを使用して環境を作成するサンプルリクエストを次に示します。リクエスト内の example を実際のプロジェクト ID 文字列に置き換え、$API_KEY を実際の API キーに置き換えます。

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

多くの PWA Kit 実装は、B2C Commerce API に加えて OCAPI またはコントローラーに対してもリクエストを行います。

Managed Runtime から B2C Commerce インスタンスにアクセスできることを確認する必要があります。

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

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

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

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

Managed Runtime が証明書を発行できるようにするには、次のことを行う必要があります。

  • ストアフロントに使用するドメインを選択します。たとえば、staging.example.com、www.example.com などです。*.example.com などのワイルドカードドメインがサポートされています。特定のドメイン証明書は、ステージング環境と本番環境に関連付けられたドメインに対してのみ発行されます。
  • ドメインの CAA レコードが AWS による証明書の発行を許可するように設定されていることを確認します。
  • Salesforce カスタマーサポートに連絡し、希望する証明書ドメインを伝えてください。
  • Salesforce では、ドメイン所有権の検証に使用する CNAME レコードを提供しています。提供されたレコードは、詳細を受け取ってから ** 24 時間** 以内に作成する必要があります。

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

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

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

Managed Runtime UI のアクセス制御設定または access_control_header API を使用して、環境のアクセス制御ヘッダーを設定します。この例では、この API を使用して、ヘッダー値が 25pn5dec7f1c のアクセス制御ヘッダーを設定します。アクセス制御ヘッダーを参照してください。

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

projects_target_partial_update API を使用して、環境の ssr_external_domain と ssr_external_hostname の設定を更新します。

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

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

カットオーバープロセスは、サードパーティの CDN、eCDN、Managed Runtime CDN のいずれを使用するかによって異なります。

Managed Runtime 環境を CDN のオリジンとして構成します。

  • 環境に合わせて Host ヘッダーを設定します: {{project}}-{{environment}}.mobify-storefront.com
  • リクエストメソッドを転送します
  • パスを転送します (クエリ文字列を含む)
  • ヘッダーを転送します
  • ボディを転送します
  • HTTPS 経由ですべてのトラフィックを転送します
  • HTTP キャッシングヘッダーに従います
  • ご使用の環境に合わせて構成されている場合は、x-sfdc-access-control ヘッダー値を設定します

詳細なガイダンスについては、お使いの CDN プロバイダーのドキュメントを参照してください。

Managed Runtime は、HTTP Hostヘッダーを使用してリクエストを環境にルーティングします。正しくないホストでのリクエストは、HTTP 403 Bad Request レスポンスで拒否されます。

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

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

問題が発生した場合は、PWA Kit アプリのデバッグで説明されている手法を使用してください。

eCDN ルーティングルールを更新して、トラフィックを Managed Runtime 環境にルーティングします。詳細については、eCDN MRT ルールガイドを参照してください。

DNS カットオーバーを実行して、ドメインを古いオリジンから Managed Runtime CDN にポイントします。

Managed Runtime CDN ドメインは、{{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 にリクエストをリダイレクトするようにサーバーを設定する必要があります。