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

このガイドでは、Progressive Web App (PWA) Kit ストアフロントを立ち上げ、公式の公開 Web アドレスからアクセスできるようにする方法について説明します。

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

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

コマンドを実行する前に、すべてのプレースホルダーを実際の値に置き換えてください。プレースホルダーは $PLACEHOLDER の形式になっています。

「使用する 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 環境です。

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

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

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

1curl 'https://cloud.mobify.com/api/projects/example/target/' \
2  --request 'POST' \
3  --header "Authorization: Bearer $API_KEY" \
4  --header 'Content-Type: application/json' \
5  --data '{ "name" : "staging" }'

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

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

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

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

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

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

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

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

1_xyz.example.com    CNAME    _abc.acm-validations.aws

Managed Runtime は、次の場合に限り、TLS 証明書を自動的に更新します。

• CNAME レコードは、所有権を検証するためにそのまま残ります
• TLS 証明書が少なくとも 1 つの環境で使用されている

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

TTL は、[dig] () コマンドを使用して確認できますhttps://en.wikipedia.org/wiki/Dig_(command)。

1dig +nocmd +noall +answer 'staging.example.com'

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

1curl 'https://cloud.mobify.com/api/projects/$PROJECT/target/$TARGET/access-control-header/' \
2--request 'POST' \
3--header 'Accept: application/json' \
4--header 'Content-Type: application/json' \
5--header 'Authorization: Bearer $API_KEY' \
6--data '{
7    "value": "25pn5dec7f1c"
8}'

アクセス制御ヘッダー値は、カットオーバーの実行中に使用され、環境への直接アクセスを防止します。

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

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

1curl 'https://cloud.mobify.com/api/projects/example/target/staging/' \
2  --request 'PATCH' \
3  --header "Authorization: Bearer $API_KEY" \
4  --header 'Content-Type: application/json' \
5  --data '{
6    "ssr_external_domain": "example.com",
7    "ssr_external_hostname": "staging.example.com"
8}'

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

1curl 'https://staging.example.com' \
2    --resolve 'staging.example.com:443:'"$(dig +short 'example-staging-cdn.mobify-storefront.com' | tail -n1)"

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

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

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

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

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

1// ssr.js
2app.all('/echo', function echoHandler({method, path, headers, body}, res) {
3  res.send({method, path, headers, body})
4})

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

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

eCDN ルーティングルールを更新して、トラフィックを Managed Runtime 環境にルーティングします。詳細については、eCDN MRT ルールガイドを参照してください。また、Business Manager で MRT ルーティング規則を構成することもできます。

upsertOriginHeaderModification APIを使用して、headerValue をステップ 5で使用したものと同じ値に設定します。これにより、eCDN からのトラフィックのみが許可されます。この例では、この API を使用して、ヘッダー値が のアクセス制御ヘッダーを設定します。

1curl  "https://{shortCode}.api.commercecloud.salesforce.com/cdn/zones/v1/organizations/$ORGANIZATION_ID/zones/$ZONE_ID/origin-header-modification/mrt" \
2  -X PUT \
3  -H "content-type: application/json" \
4  -d '{
5  "headerValue": "25pn5dec7f1c"
6}'

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 にリクエストをリダイレクトするようにサーバーを設定する必要があります。

• ビルド前および稼働開始のベストプラクティスチェックリスト
• PWA Kit サイトを監視する

j

入門ガイド

コンポーザブルストアフロントの概要

ハイブリッド実装でのコンポーザブルストアフロントの使用

PWA Kit フレームワーク

成功につながるスキル

Ask the Community

設定する

サイトの構築

マーチャントチームへの支援

テスト、立ち上げ、監視

PWA Kit アプリのデバッグ

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

MRT ルーティングの構成

サイトを監視する

メンテナンス

日本語

English

日本語

中文

繁體中文

Français

Deutsch

Italiano

한국어

Português

Español (México)