Salesforce B2C Commerce PWA Kitのマルチサイト・ロケールの設定 #Salesforce

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

この記事では、PWA Kit と Managed Runtimeを利用してマルチサイト・マルチロケールの設定方法を実際にありそうなサイトを想定した設定を紹介します。詳細は英語版のヘルプを参照してください。
今回使用したPWA-Kitのバージョンは 1.5.2 です。最新のバージョンは npm レポジトリで確認してください。

前提

PWA Kit　の基本的な設定は終わっている。まだの場合はQiita の記事を参照してください。
ローカライズやマルチサイトに関わる基本的な設定は完了している。していない場合はInfo center のローカライズ設定やサイト設定を参考にしてください。
言語ごとの文言の修正などは取り扱いません。方法は PWA Kit ソースコード内app/translations/README.md を参照してください。

今回作成するサイトの構成

項目
サイトID	RefArch	RefArchGlobal
説明	日本向けのサイト	グローバル向けのサイト
利用できる通貨	日本円	米ドル
デフォルト通貨	日本円	米ドル
利用できる言語	日本語、英語	日本語、英語、中国語、フランス語
デフォルト言語	日本語	英語
デプロイするリージョン	Asia Pacific (Tokyo)	US East (N. Virginia)

URLの構成

マルチサイト・マルチロケールを実現するにはURLを考える必要があります。
考えるにあたって設定できる値を紹介します。

パス (path)
- http://localhost:3000/RefArch/ のようなパスを利用する。
クエリ(query_param)
- http://localhost:3000/?site=RefArchのようにクエリを利用する
デフォルトのサイトとロケールをURLに表示するか (showDefaults)

今回作成するURLの構成

	ローカル	RefArch	RefArchGlobal
サイト	path	なし	なし
ロケール	path	query_param	path
デフォルトのサイトとロケールをURLに表示するか	はい	いいえ	はい

ローカルでは http://localhost:3000/RefArch/ja-JP/のように常にURLパスにサイトとロケール情報が表示される
RefArch では http://localhost:3000/?locale=en-US のようにクエリにロケールが表示される。しかしデフォルトのロケールである日本語の場合はクエリが表示されない
RefArchGlobal では http://localhost:3000/ja-JP/ようにパスにロケールが表示される。デフォルトの言語の場合も同様に表示される

エイリアス

サイトIDやロケールコードにエイリアスを設定することができます。何も設定しない場合は、サイトIDやロケールコードがそのまま利用されます。

今回設定するエイリアス

サイトID、ロケール	エイリアス
RefArch	jp-refarch
RefArchGlobal	global-refarch
ja-JP	ja
en-US	en
zh-CN	zh
fr-FR	fr

手順

1. Managed Runtime の設定

今回は２つの環境を作成しました。
japan は RefArch のための環境で、globalは RefArchGlobal のための環境です。
それぞれデプロイするリージョンは Asia Pacific (Tokyo)と US East (N. Virginia)に設定しています。
環境の作成方法は、ヘルプをご覧ください。

2. サイトの設定

ソースコードの config/site.js に下記のように入力します。
ここではサイトで利用する通貨、ロケールの設定を行います。さらに、ロケールのエイリアスの設定もここで行います。

site.js

module.exports = [
    {
        id: 'RefArch',
        l10n: {
            supportedCurrencies: ['JPY'],
            defaultCurrency: 'JPY',
            defaultLocale: 'ja-JP',
            supportedLocales: [
                {
                    id: 'en-US',
                    alias: 'en',
                    preferredCurrency: 'JPY'
                },
                {
                    id: 'ja-JP',
                    alias: 'ja',
                    preferredCurrency: 'JPY'
                }
            ]
        }
    },
    {
        id: 'RefArchGlobal',
        l10n: {
            supportedCurrencies: ['USD'],
            defaultCurrency: 'USD',
            defaultLocale: 'en-US',
            supportedLocales: [
                {
                    id: 'en-US',
                    alias: 'en',
                    preferredCurrency: 'USD'
                },
                {
                    id: 'ja-JP',
                    alias: 'ja',
                    preferredCurrency: 'USD'
                },
                {
                    id: 'zh-CN',
                    alias: 'zh',
                    preferredCurrency: 'USD'
                },
                {
                    id: 'fr-FR',
                    alias: 'fr',
                    preferredCurrency: 'USD'
                }
            ]
        }
    }
]

3. 環境の設定

config/default.jsをコピーして同じフォルダに
local.js, global.js , japan.js の三つのファイルを作成します。
local は固定の文字ですが、 global と japan の文字は Managed Runtime の Environment Setting で確認できる Environment ID と一致させる必要があります。
ここではURLの構成とサイトのエイリアスを設定しています。

local.js

const sites = require('./sites.js')
module.exports = {
    app: {
        url: {
            site: 'path',
            locale: 'path',
            showDefaults: true
        },
        defaultSite: 'RefArch',
        siteAliases: {
            RefArch: 'jp-refarch',
            RefArchGlobal: 'global-refarch'
        },        
        sites,
        commerceAPI: {
        
=================省略===================

japan.js

const sites = require('./sites.js')
module.exports = {
    app: {
        url: {
            site: 'none',
            locale: 'query_param',
            showDefaults: false
        },
        defaultSite: 'RefArch',
        siteAliases: {
            RefArch: 'jp-refarch'
        },        
        sites: [sites.find((s) => s.id == 'RefArch')],
        commerceAPI: {
        
=================省略===================

global.js

const sites = require('./sites.js')
module.exports = {
    app: {
        url: {
            site: 'none',
            locale: 'path',
            showDefaults: true
        },
        defaultSite: 'RefArchGlobal',
        siteAliases: {
            RefArchGlobal: 'global-refarch'
        },        
        sites: [sites.find((s) => s.id == 'RefArchGlobal')],
        commerceAPI: {
        
=================省略===================

4. デプロイ

デプロイについては、こちらの記事を参照してください。

作成した見た目

ローカル

http://localhost:3000/jp-refarch/ja/category/womens-clothing-tops のように常にサイトとロケールのエイリアスがURLパスに表示されています。

RefArch

https://qiita-multi-site-test-japan.mobify-storefront.com/category/womens-clothing-tops のようにデフォルトである日本語の場合はURLに何も表示されていません。

https://qiita-multi-site-test-japan.mobify-storefront.com/category/womens-clothing-tops?locale=en-US のようにデフォルト以外のロケールの場合は、クエリに表示されます。

RefArchGlobal

https://qiita-multi-site-test-global.mobify-storefront.com/ja/category/womens-clothing-tops のようにデフォルトの言語あるかに関わらず、ロケールがパスに表示されます。