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


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

この記事では、PWA Kit と Managed Runtimeを利用してマルチサイト・マルチロケールの設定方法を実際にありそうなサイトを想定した設定を紹介します。詳細は[英語版のヘルプ](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/multiple-sites.html)を参照してください。
今回使用したPWA-Kitのバージョンは `1.5.2` です。最新のバージョンは [npm レポジトリ](https://www.npmjs.com/package/pwa-kit-create-app)で確認してください。


## 前提

* PWA Kit　の基本的な設定は終わっている。まだの場合は[Qiita の記事](https://qiita.com/syunyama/items/58433ae8e3c5fda7f37e)を参照してください。
* ローカライズやマルチサイトに関わる基本的な設定は完了している。していない場合はInfo center の [ローカライズ設定](https://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/content/b2c_commerce/topics/localization/b2c_localization.html)や[サイト設定](https://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/content/b2c_commerce/topics/site_development/b2c_managing_sites_for_dev.html)を参考にしてください。
* 言語ごとの文言の修正などは取り扱いません。方法は 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)`に設定しています。
環境の作成方法は、[ヘルプ](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/managed-runtime-administration.html#environments)をご覧ください。

![image (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/f7a35846-3502-99ce-ea0a-e3a432f6dc29.png)



### 2. サイトの設定

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

```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の構成とサイトのエイリアスを設定しています。


```js: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: {
        
=================省略===================
```

```js: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: {
        
=================省略===================
```



```js: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. デプロイ

デプロイについては、[こちらの記事](https://qiita.com/syunyama/items/58433ae8e3c5fda7f37e#4--managed-runtime%E3%81%B8%E3%81%AE%E5%85%AC%E9%96%8B%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)を参照してください。


## 作成した見た目

#### ローカル

`http://localhost:3000/jp-refarch/ja/category/womens-clothing-tops` のように常にサイトとロケールのエイリアスがURLパスに表示されています。
![image (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a8b89671-d343-f80e-bb65-1f9039de57d7.png)


#### RefArch

`https://qiita-multi-site-test-japan.mobify-storefront.com/category/womens-clothing-tops` のようにデフォルトである日本語の場合はURLに何も表示されていません。
![image (3) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/109cf5b6-ca3d-ac35-c460-edad1466296a.png)


`https://qiita-multi-site-test-japan.mobify-storefront.com/category/womens-clothing-tops?locale=en-US` のようにデフォルト以外のロケールの場合は、クエリに表示されます。
![スクリーンショット 2022-04-28 17.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/41137c50-7b91-45fe-f94d-b6593434dd12.png)



#### RefArchGlobal

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

![image (3)のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/3c062128-441c-06e7-ba91-cb64c87cd609.png)