段階的なヘッドレスロールアウト
Storefront Reference Architecture (SFRA) および SiteGenesis のユーザーは、ヘッドレステクノロジーを段階的にロールアウトできるようになりました。たとえば、PWA Kit を使用して商品ページに印象的な新しい体験を提供できると同時に、次の段階でヘッドレスに移行するまでの間は注文手続きフローを SFRA に残しておくことが可能です。この段階的なアプローチにより、ヘッドレスへの移行をすばやく開始し、業務の中断を最小限に抑えることができます。
このガイドでは、セッションブリッジとルーティングルールを使用して、PWA Kit で 1 つのページセットを、SFRA でもう 1 つのページセットを活用し、シームレスなユーザー体験を提供できるようにする方法について説明します。
このガイドの指示では、PWA Kit と SFRA フローを組み合わせる方法を説明しますが、SiteGenesis にも同じ指示を応用できます。
買い物客が異なるストアフロントアーキテクチャで構成されたページ間をシームレスに移動できるようにするには、セッションブリッジと呼ばれる手法を使用する必要があります。セッションブリッジでは、Cookie を使用して、異なるシステム間で買い物客のリフレッシュトークンやセッショントークンを共有します。
セッションブリッジを活用するための鍵となるのは、HTTP リクエストでアクセスできる認証および承認のための新しい標準ベースのソリューション、Shopper Login and API Access Service (SLAS) です。SLAS による買い物客認証は OpenID Connect を、Commerce Cloud の買い物客 API の認証は OAuth 2 をそれぞれベースにしています。
買い物客がヘッドレスストアフロントを閲覧するとき、SLAS を使ってアクセストークンとリフレッシュトークンをリクエストし、買い物客のブラウザーにクッキーとして保存します。クッキーの設定は、HTTP set-cookie ヘッダー、またはクライアント側の JavaScript で行えます。買い物客が SFRA ページから PWA Kit ページに (またはその逆に) 遷移する際、リフレッシュトークンを含むクッキーが HTTP リクエストとともに送信され、ストアフロントコードはリフレッシュトークンを使用してユーザーをログインさせることができます。
段階的なヘッドレスロールアウトを作成する際の最初のステップは、PWA Kit アプリケーションで SLAS が使用されるように設定することです (未設定の場合)。API アクセスの設定のガイドの指示に従ってください。
SFRA で段階的なヘッドレスロールアウトを行えるようにするには、SLAS プラグインカートリッジをインストールする必要があります。完全なインストールの手順は、カートリッジの README に記載されています。
SLAS プラグインカートリッジを使用すれば、セッションブリッジのほかにも、90 日間のユーザーセッションや買い物カゴの保持など、買い物客にとって便利な機能を実装できます。
SLAS プラグインカートリッジは SFRA 用に設計されているため、SiteGenesis で使用するには追加でコードを記述する必要があります。SiteGenesis の実装では、買い物客の認証と承認のフローにおけるさまざまな時点で、カートリッジのコードを活用できます。
SLAS の API 呼び出しには B2C Commerce Web サービスフレームワークを使用するため、SiteGenesis の実装により、カートリッジで実装した Web サービスに対してリクエストを行えます。これらの Web サービスには、ゲストログイン、登録顧客ログイン、トークンリフレッシュ、ログアウト、ゲスト買い物カゴのマージが含まれます。また、このカートリッジは、API セッションとストアフロントセッションをマージするサービスを実装しています。
SiteGenesis の実装では、カスタムフック (app.plugin.slas.login) を使用して、SLAS によるゲストユーザーおよび登録ユーザーのログインを実装することもできます。カートリッジの onSession フックにあるカスタムコードを dw.system.request.onSession で調べると、買い物客のログイン用に Script API を SLAS に置き換えていることがわかります。
PWA Kit でセッションブリッジを行えるようにするには、API の認可を処理する commerce-api/auth.js のコードに変更を加えて、ローカルストレージの代わりに Cookie を使用するようにします。
PWA Kit プロジェクトが Retail React App テンプレートのバージョン 1.5.0 以降で生成されている場合、auth.js のコードのこの行からコメントを外すだけで済み、ファイルにその他の変更を加える必要はありません。
バージョン 1.5.0 以前に生成されたプロジェクトでは、commerce-api/auth.js にいくつかの変更を加える必要があります。作業を簡単に行えるように、すべての変更を反映した代替バージョンのファイルを作成し、GitHub の 公開 gist から入手できるようにしてあります。
認可フローはリフレッシュトークンから始まります。リフレッシュトークン Cookie を利用できる場合、PWA Kit アプリはリフレッシュトークンをアクセストークンと交換します。利用できない場合は、OAuth 2 規格で定義されている認証コード付与フローが開始されます。また、PKCE (Proof Key for Code Exchange) のフローにも従います。
新しいアクセストークンと新しいリフレッシュトークンが SLAS から付与されると、アプリはそれらを Cookie に保存します。次に、アプリは OCAPI の create session (セッション作成) エンドポイント (/session) に POST リクエストを行います。このエンドポイントは、SFRA で使用されるセッションを作成します。アプリは、セッショントークンを Cookie に保存します。
PWA Kit アプリで作成される Cookie は次のとおりです。
cc-nx-g- SLAS ゲスト買い物客リフレッシュトークンcc-nx- SLAS 登録済み買い物客リフレッシュトークンtoken- SLAS アクセストークンdwsid- Demandware セッション ID
下図は、PWA Kit の変更済み認証フローを示しています。
段階的なヘッドレスロールアウトのもう 1 つの重要なポイントは、ルーティングです。2 つの異なるシステムにトラフィックを流すには、トラフィックが 2 つの異なる起点 (Managed Runtime 環境と B2C Commerce インスタンス) にルーティングされるように CDN を設定する必要があります。
次のようなシナリオを考えてみましょう。
www.mystorefront.com で運用されている既存の SFRA ストアフロントがあります。ユーザーはヘッドレスアーキテクチャのメリットを把握しており、PWA Kit を活用してパフォーマンスと魅力的な体験を提供したいと考えています。同時に、スケジュールに対するリスクも最小限に抑えたいため、段階的なアプローチで PWA Kit ストアフロントを立ち上げるための計画を練っています。
この計画では、ファネルの上位にある、ホームページ (/)、カテゴリ一覧ページ (/category)、商品詳細ページ (/product) に PWA Kit を使用する予定です。これらの PWA Kit ページは、mystorefront.mobify-storefront.com上で運用されている Managed Runtime 環境にデプロイされます。買い物客が購入を決定したら、www.mystorefront.comで運用されている既存の SFRA の注文手続きページにリダイレクトします。
埋め込み CDN (eCDN) の顧客は、サポートに連絡し、ルーティングルールを構成してください。
この時点で、PWA Kit ページ用の CDN ゾーンに、Managed Runtime 環境 (mystorefront.mobify-storefront.com) を指す起点を追加します。
次に、URL パスに基づいてトラフィックを提供するルーティングルールを作成します。最初に PWA Kit ページのルートを網羅的に収集します。Retail React App テンプレートをベースとした PWA Kit プロジェクトの場合、ルートは app/routes.jsx に記載されています。PWA Kit のサーバー側レンダリングシステムはプロキシと静的アセットに内部ルートを使用するため、ルーティングルールに /mobify/* も含める必要があります。
この例のシナリオでは、以下のルートを CDN に構成する必要があります。
リストの各 PWA Kit ルートについて、Managed Runtime 環境 (この例のシナリオではmystorefront.mobify-storefront.com) にリクエストを転送するように CDN を構成します。
次の図に、CDN の構成方法を示します。
デフォルトでは、PWA Kit プロジェクト用の Retail React App テンプレートは、SFRA とは異なる URL ルーティングパターンをもちます。たとえば、Retail React App の商品詳細ページの URL パスは、/products/{productId} です。SFRA の場合、パターンは /{categoryId}/{productId} です。
PWA Kit のストアフロントで、SFRA サイトに合わせてルーティングパターンを変更することをお勧めします。特定のページの URL パターンと一致しない場合 (カテゴリ ID が URL にない場合の商品一覧ページなど)、リダイレクトカートリッジを使って、ギャップを埋めるリダイレクトを設定できます。完全なインストールの手順は、カートリッジの README に記載されています。
段階的なヘッドレスロールアウトのための設定プロセスを完了するには、PWA Kit プロジェクトにさらにいくつかの変更を加える必要があります。
デフォルトでは、PWA Kit はナビゲーションに History API を使用します。買い物客が React Router の <Link> コンポーネントで作成されたリンクをクリックすると、app/routes.jsx で定義されたルートオブジェクトのパスと一致するコンポーネントへのソフトナビゲーションがトリガーされます。PWA Kit 以外のページ (たとえば SFRA によるページ) にリンクするには、app/routes.jsx の URL パス名と一致するルートをすべて削除する必要があります。
たとえば、routes 配列から checkout を削除します。
最後に、app/routes.jsx の PWA キャッチオールルート (/*) を更新します。PWA <PageNotFound /> コンポーネントをデフォルトの起点のリダイレクトに置き換えます。