ミドルウェアが起動して初期データの設定ができました。続いて、EC サイトのストアフロントとなる buyer および EC サイトの管理画面となる seller のサイトをローカルで起動していきます。
ここから先は、Visual Studio Code で手順を進めていきます。
SDK のビルド
Buyer および Seller の両方で利用する SDK をまず最初にビルドを実行します。手順としては、src/ui/sdk のフォルダに入り、npm install および npm run build を実行する形です。
cd src/ui/sdk
npm install
npm run build

Buyer を動かす
buyer のパスは src/UI/Buyer になります。ここに移動をして、以下のコマンドを実行してください(1行目は前の処理の後そのままのため、一度上位のフォルダに移動をして、buyer に移動しています)。
cd ..
cd buyer
npm install
続いて buyer を起動するための設定を記入します。まず最初にローカルのミドルウェアを利用すると指定するために、src/UI/Buyer/src/environments/environment.local.ts のファイルを編集します。このファイルの上の方に以下の設定が記載されています。
// ===== MAKE CHANGES TO CONFIGURATION BETWEEN THESE LINES ONLY =======
// ====================================================================
const brand = Brand.DEFAULT_BUYER
const appEnvironment = Environment.TEST
const useLocalMiddleware = false
const useLocalBuyerApiClient = false // set to true for running integration events locally
const localMiddlewareURL = 'https://localhost:5001'
const localBuyerApiClient = '800EFEC0-43A5-4EB6-9150-C3BBE628214C'
// ====================================================================
// ======= UNLESS YOU ARE DOING SOMETHING WEIRD =======================
useLocalMiddleware と useLocalBuyerApiClient を true に変更して、localBuyerApiClient を Postman で取得した Buyer の ClientID (OrderCloud の管理画面では Default HeadStart Buyer UI LOCAL の ID)を設定してください。これでローカルの Middleware を参照するようになりました。
続いてアプリが動くのに必要な設定を記載しているファイル、 src/UI/Buyer/src/assets/appConfigs/defaultbuyer-test.json を変更します。サンプルで入っているデータは以下の通りです。
{
"hostedApp": true,
"appname": "Default Buyer Test",
"appID": "defaultbuyer-test",
"clientID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"incrementorPrefix": "HS_TEST",
"baseUrl": "https://my-default-buyer-test.com",
"middlewareUrl": "https://my-hosted-middleware.com",
"creditCardIframeUrl": "https://fts-uat.cardconnect.com/itoke/ajax-tokenizer.html",
"translateBlobUrl": "https://MYSTORAGEACCOUNTNAME.blob.core.windows.net/ngx-translate/i18n/",
"supportedLanguages": [
"en",
"fr",
"jp"
],
"defaultLanguage": "en",
"marketplaceID": "my-seller-id",
"marketplaceName": "Default Seller Test",
"sellerQuoteContactEmail": "quotes@seller.com",
"orderCloudApiUrl": "https://sandboxapi.ordercloud.io",
"useSitecoreSend": false,
"sitecoreSendWebsiteID": "xxxxxxxxxxxxxxxxxxxxxxxx",
"useSitecoreCDP": false,
"sitecoreCDPApiClient": "xxxxxxxxxxxxxxxxxxxxxx",
"sitecoreCDPTargetEndpoint": "https://api-us.boxever.com/v1.2",
"sitecoreCDPCookieDomain": "xxxxxxxxxxxxxxxxxxxxxxxx",
"sitecoreCDPJavascriptLibraryVersion": "1.4.8",
"sitecoreCDPPointOfSale": "xxxxxxxxxxxxxxxxxxxxxxxx",
"sitecoreCDPWebFlowTarget": "xxxxxxxxxxxxxxxxxxxxxxxx",
"theme": {
"logoSrc": "assets/generic-logo.png"
},
"appInsightsInstrumentationKey": null,
"anonymousShoppingEnabled": true,
"acceptedPaymentMethods": [
"CreditCard",
"PurchaseOrder"
]
}
変更する項目は以下の通りです
項目 | 説明 | 例 |
---|---|---|
clientID | Buyer の ClientID | Default HeadStart Buyer UI LOCAL の ID |
incrementorPrefix | HS_TEST | DB_TEST |
middlewareUrl | Web アプリのテストスロットの URL | https://localhost:5001 |
translateBlobUrl | Blob URL | https://headstartjpdemo.blob.core.windows.net/ngx-translate/i18n/ |
marketplaceID | Marketplace ID を設定 | ID を記載 |
marketplaceName | Marketplace のアプリ名 | Marketplace の名前を記載 |
sellerQuoteContactEmail | quotes@seller.com | メールアドレス |
orderCloudApiUrl | Sandbox の URL | https://japaneast-sandbox.ordercloud.io |
上記の設定が完了したところで、裏で Middleware を起動している状況を確認して、buyer のアプリを実行します。
npm run start

ここでエラーが発生した場合は、ブラウザのキャッシュが悪さしていることもあります。この場合は In Private モードなどを利用して、キャッシュに影響を受けないように起動してください。
Seller を動かす
まずは Seller のアプリを動かすことができるように、npm install まで進めていきます。
cd ..
cd seller
npm install
Seller のアプリも Buyer と同様のローカルで動かすための設定、アプリの設定の2つのファイルがあります。まずはローカルで動かすためのファイルを編集します。
src/UI/Seller/src/environments/environment.local.ts のファイルを利用して設定を切り替えます。設定の確認ポイントは1ヶ所 useLocalMiddleware を true であれば動作します(デフォルトで true になっています)。
// ===== MAKE CHANGES TO CONFIGURATION BETWEEN THESE LINES ONLY =======
// ====================================================================
const brand = Brand.DEFAULT_ADMIN
const sebEnvironment = Environment.TEST
const useLocalMiddleware = true
const localMiddlewareURL = 'https://localhost:5001'
// ====================================================================
// ======= UNLESS YOU ARE DOING SOMETHING WEIRD =======================
続いてアプリの設定を変更するために、src/UI/Seller/src/assets/appConfigs/defaultadmin-test.json のファイルを変更します。
{
"hostedApp": true,
"sellerID": "my-seller-id",
"sellerName": "Default Admin",
"appname": "Default Admin",
"clientID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"middlewareUrl": "https://my-hosted-middleware.com",
"translateBlobUrl": "https://MYSTORAGEACCOUNTNAME.blob.core.windows.net/ngx-translate/i18n/",
"supportedLanguages": ["en", "fr", "jp"],
"defaultLanguage": "en",
"blobStorageUrl": "https://MYSTORAGEACCOUNTNAME.blob.core.windows.net",
"orderCloudApiUrl": "https://sandboxapi.ordercloud.io"
}
項目 | 説明 | 値 |
---|---|---|
clientID | Seller の ClientID | Default HeadStart Admin UI の ID |
middlewareUrl | Web アプリのテストスロットの URL | https://localhost:5001 |
translateBlobUrl | Blob URL | https://headstartjpdemo.blob.core.windows.net/ngx-translate/i18n/ |
blobStorageUrl | Blob URL | https://headstartjpdemo.blob.core.windows.net |
orderCloudApiUrl | Sandbox の URL | https://japaneast-sandbox.ordercloud.io |
上記の設定が終わったところで、コマンドの npm run start を実行します。

postman で作成をしたアカウントでログインをすると、管理画面にはいることができます。

まとめ
ミドルウェアに続いて buyer 、seller のアプリをローカルで動かすことができました。動作確認が終わったところで、次回からは Microsoft Azure に展開していきます。
更新履歴
2023年8月に最新情報に合わせて更新しました。