※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

今回は PWA Kit と SFRA のハイブリッド環境を作成してみたいと思います。
こちらのヘルプが参考になります。
作成にあたって２つのカートリッジが提供されています。

SLAS プラグイン：
https://github.com/SalesforceCommerceCloud/plugin_slas (要 Account Manager アクセス)
PWA Kit では SLAS を利用しているので、SFRAも同様にSLASを利用するためのカートリッジです。

リダイレクトプラグイン：
https://github.com/SalesforceCommerceCloud/plugin_redirect (要 Account Manager アクセス)
SFRA から PWA Kit へリダイレクトさせるためのカートリッジです。

このカートリッジを利用することで SFRA から PWA Kit への移行をスムーズに行うことができます。

作成する環境

SFRA と PWA Kit へのルーティングは B2C Commerce についている eCDN でもできますし、Heroku を使ったプロキシでも可能です が今回は AWS Cloud Front を利用して同じドメイン配下に PWA Kit と SFRA を配置しました。

追記：
現状では eCDN に SCAPI で自ら設定できるようになっています！
https://developer.salesforce.com/docs/commerce/commerce-api/references/cdn-api-process-apis?meta=createMrtRules

ホーム、検索、カテゴリ、商品詳細、マイページ、ログインページはPWA Kitで作成し、それ以外のページ（主にカート以降のフロー）をSFRAで作成しました。

ホーム画面（PWA Kit）

カート画面（SFRA）

前提

SFRAについてやPWAの環境構築については割愛します。
- 参考として下記の記事も参照してみてください。
  - Salesforce B2C Commerce PWA Kit のサンプルを構築してみる
  - Salesforce B2C CommerceのSFRA開発環境セットアップ＆デプロイ方法
AWS Cloud Frontの使い方についても割愛します。
PWA Kit は v2.0.0 を利用しています
サイトはSFRAのデフォルトであるRefArchを利用します

実装手順

1. カートリッジの設定

それぞれのカートリッジの README をご覧ください。

2. リダイレクトの設定

Business Manager から マーチャントツール > サイト環境設定 > カスタムサイト環境設定グループ > PWA Kit Hybrid Plugin に遷移し、下記のように設定し、カート以降のフロー以外は PWA Kit にリダイレクトするようにする。

項目名	値
pwa_kit_redirect_home	はい
pwa_kit_redirect_product	はい
pwa_kit_redirect_category	はい
pwa_kit_redirect_search	はい
pwa_kit_redirect_account	はい
pwa_kit_redirect_cart	いいえ
pwa_kit_redirect_login	はい
pwa_kit_redirect_checkout	いいえ
pwa_kit_routes	{"Home":"/","Product":"/[locale]/product/[productid]","Category":"/[locale]/category/[categoryid]","Search": "/[locale]/search?q=[searchterms]","Account": "/[locale]/account","Cart": "/[locale]/cart","Login": "/[locale]/login","Checkout": "/[locale]/checkout"}

3. Cloud Front の設定

今回はキャッシュは全くかけません。
デフォルトでは SFRA に飛ばしています。
/mobify/* と デフォルト (*) に関しては GET, HEAD 以外のメソッドを許容し、クエリパラメータと Cookie もオリジンにリクエストするようにしておきます。
また、 /mobify/* は Authorization ヘッダーも通すように設定しておきます。（設定方法）

作成した際のCloud Frontのドメインはメモしておいてください。

4. PWA Kit のソースコードの修正

下記の「不要なルートの削除」と「SFRA のカート・チェックアウトへのリンクの修正」はヘルプのOther Changes to PWA Kit Projectsでもできますが、挙動が少し違うので、お好きな方を選んでください。

不要なルートの削除

app/routes.jsx から不必要なルートを消しておきます。

app/routes.jsx

  =====OMIT=====
  
   {
        path: '/account',
        component: Account
    },
    // {
    //     path: '/checkout',
    //     component: Checkout,
    //     exact: true
    // },
    // {
    //     path: '/checkout/confirmation',
    //     component: CheckoutConfirmation,
    //     exact: true
    // },
    {
        path: '/callback',
        component: LoginRedirect,
        exact: true
    },
    // {
    //     path: '/cart',
    //     component: Cart,
    //     exact: true
    // },
    {
        path: '/product/:productId',
        component: ProductDetail
    },
 
=====OMIT=====

{
    path: '*',
    component: withRouter((props) => {
        const {location} = props
        const urlParams = new URLSearchParams(location.search)
        useEffect(() => {
            const newURL = new URL(window.location)
            window.location.href = newURL
        })
        return null
    })
}

=====OMIT=====

SFRA のカート・チェックアウトへのリンクの修正

（どこに作っても構わないですが、）app/utils/sfra.js　に下記のコードを作成。

app/utils/sfra.js

export const goCart = (locale, site) => {
    const newURL = new URL(window.location)
    newURL.pathname = `/on/demandware.store/Sites-${site.id}-Site/${locale.id.replace(
        '-',
        '_'
    )}/Cart-Show`
    newURL.search = ''
    window.location.href = newURL
}

export const goCheckout = (locale, site) => {
    const newURL = new URL(window.location)
    newURL.pathname = `/on/demandware.store/Sites-${site.id}-Site/${locale.id.replace(
        '-',
        '_'
    )}/Checkout-Begin`
    newURL.search = ''
    window.location.href = newURL
}

下記の例と同様に、/checkout や /cart が呼ばれている部分を修正していきます。

例：
app/pages/cart/partials/cart-cta.jsx
to="/checkout" の代わりに onClick={() => goCheckout(locale, site)} を利用しています。

app/pages/cart/partials/cart-cta.jsx

 ======OMIT======
// 追加
import {goCheckout} from '../../../utils/sfra'
import useLocale from '../../../hooks/use-locale'
import useSite from '../../../hooks/use-site'

const CartCta = () => {

    // 追加
    const locale = useLocale()
    const site = useSite()
    
    return (
        <Fragment>
            <Button
                // as={Link}
                // to="/checkout"
                
                // 追加
                onClick={() => goCheckout(locale, site)}
                
                width={['95%', '95%', '95%', '100%']}
                marginTop={[6, 6, 2, 2]}
                mb={4}
                rightIcon={<LockIcon />}
                variant="solid"
            >
                <FormattedMessage
                    defaultMessage="Proceed to Checkout"
                    id="cart_cta.link.checkout"
                />
            </Button>
            <Flex justify={'center'}>
                <VisaIcon height={8} width={10} mr={2} />
                <MastercardIcon height={8} width={10} mr={2} />
                <AmexIcon height={8} width={10} mr={2} />
                <DiscoverIcon height={8} width={10} mr={2} />
            </Flex>
        </Fragment>
    )
}

export default CartCta

他にも数ファイルありますので、/checkout や /cart でファイル検索してみてください。ざっとこんな感じのファイルが見つかるかと思います。

app/pages/checkout/partials/checkout-header.jsx
app/pages/cart/partials/cart-cta.jsx
app/hooks/use-add-to-cart-modal.js
app/components/order-summary/index.jsx
app/components/_app/index.jsx

Service Worker の修正

今回は CloudFront を利用するのでworker/main.js に下記のコードを追加

worker/main.js

=====OMIT====
// 追加
workbox.routing.registerRoute(
    /^https:\/\/.+\.cloudfront.net/,
    new workbox.strategies.NetworkFirst()
)

Cookie を利用するように修正

app/commerce-api/auth.js の54行目あたりのコメントアウトを外し、55行目をコメントアウトする

app/commerce-api/auth.js

=====OMIT====
// To store tokens as cookies
// change the next line to
this._storage = this._onClient ? new CookieStorage() : new Map()
// this._storage = this._onClient ? new LocalStorage() : new Map()
=====OMIT====

ロケールを日本にし、 URL パスにデフォルトで表示するようにする

PWA Kit のロケールについての詳細は「Salesforce B2C Commerce PWA Kitのマルチサイト・ロケールの設定」を参考にしてください。

config/default.js 内を下記のように修正

config/default.js

=====OMIT====
        // Customize how your 'site' and 'locale' are displayed in the url.
        url: {
            // Determine where the siteRef is located. Valid values include 'path|query_param|none'. Defaults to: 'none'
            // site: 'none',
            // Determine where the localeRef is located. Valid values include 'path|query_param|none'. Defaults to: 'none'
            locale: 'path',
            // This boolean value dictates whether or not default site or locale values are shown in the url. Defaults to: false
            showDefaults: true
        },
=====OMIT====

config/sites.js 内をロケールのデフォルトをに日本にするために、下記の内容に修正。

config/sites.js

// Provide the sites for your app. Each site includes site id, and its localization configuration.
// You can also provide aliases for your locale. They will be used in place of your locale id when generating paths across the app
module.exports = [
    {
        id: 'RefArch',
        l10n: {
            supportedCurrencies: ['JPY'],
            defaultCurrency: 'JPY',
            defaultLocale: 'ja-JP',
            supportedLocales: [
                {
                    id: 'en-US',
                    // alias: 'us',
                    preferredCurrency: 'JPY'
                },
                {
                    id: 'ja-JP',
                    // alias: 'us',
                    preferredCurrency: 'JPY'
                }
            ]
        }
    }
]

5. (必要あれば)同意画面の削除

既存ないしは新しくカートリッジを作成し、/cartridge/controllers/ConsentTracking.js
を下記の内容で作成し、コントローラを拡張する。
（今回は表示が邪魔だったので、同意画面なしで同意の有無に関わらずトラッキングを許可するように設定しましたが、実案件では要件に合わせて PWA ないしは SFRA を修正してください）

/cartridge/controllers/ConsentTracking.js

'use strict';

/**
 * @namespace ConsentTracking
 */

var server = require('server');
var consentTracking = require('*/cartridge/scripts/middleware/consentTracking');
server.extend(module.superModule);

/**
 * ConsentTracking-Check : This endpoint is called every time a storefront page is rendered
 * @name Base/ConsentTracking-Check
 * @function
 * @memberof ConsentTracking
 * @param {middleware} - consentTracking.consent
 * @param {category} - sensitive
 * @param {renders} - isml
 * @param {serverfunction} - get
 */
server.replace('Check', consentTracking.consent, function (req, res, next) {
    req.session.privacyCache.set('consent', true);
    req.session.raw.setTrackingAllowed(true);
    next();
});

module.exports = server.exports();

6. ドメインの設定

SLASの設定

Business Manager で マーチャントツール > サイト環境設定 > カスタムサイト環境設定グループ > SLAS Plugin に遷移し、下記の値を設定

項目名	値
redirectURI_SLAS	https://{Cloud Frontのドメイン}/on/demandware.store/Sites-RefArch-Site/default/SLASCallback-RetrieveCode
saveRefreshToken_Always	いいえ
ocapiSessionBridgeURI_SLAS	https://{Cloud Frontのドメイン}/s/RefArch/dw/shop/v22_4/sessions

エイリアスの設定

Business Manager で マーチャントツール > SEO > エイリアス に遷移し、下記の値を設定し保存する

{
    "__version": "1",
    "settings": {
        "http-host": "{Cloud Frontのドメイン}",
        "https-host": "{Cloud Frontのドメイン}"
    }
}

確認

Cloud Front のドメインにアクセスして、動作を確認してください。