ミドルウェアが起動して初期データの設定ができました。続いて、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 になります。ここに移動をして、以下のコマンドを実行してください（１行目は前の処理の後そのままのため、一度上位のフォルダに移動をして、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"
  ]
}

変更する項目は以下の通りです

上記の設定が完了したところで、裏で Middleware を起動している状況を確認して、buyer のアプリを実行します。

npm run start

ここでエラーが発生した場合は、ブラウザのキャッシュが悪さしていることもあります。この場合は In Private モードなどを利用して、キャッシュに影響を受けないように起動してください。

Seller を動かす

まずは Seller のアプリを動かすことができるように、npm install まで進めていきます。

cd ..
cd seller
npm install

Seller のアプリも Buyer と同様のローカルで動かすための設定、アプリの設定の２つのファイルがあります。まずはローカルで動かすためのファイルを編集します。

src/UI/Seller/src/environments/environment.local.ts のファイルを利用して設定を切り替えます。設定の確認ポイントは１ヶ所 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"
}

上記の設定が終わったところで、コマンドの npm run start を実行します。

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

まとめ

ミドルウェアに続いて buyer 、seller のアプリをローカルで動かすことができました。動作確認が終わったところで、次回からは Microsoft Azure に展開していきます。

• Part 8 Azure の環境を準備する（その２）

更新履歴

• 2023年8月に最新情報に合わせて更新しました。