Published on

Headstart デモ環境を構築する - Part 7 Buyer および seller サイトの起動

Authors

ミドルウェアが起動して初期データの設定ができました。続いて、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
OrderCloud

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 =======================

useLocalMiddlewareuseLocalBuyerApiClient を true に変更して、localBuyerApiClient を Postman で取得した Buyer の ClientID を設定してください。

続いてその他の設定が記載されているファイル、 src/UI/Buyer/src/assets/appConfigs/defaultbuyer-test.json を変更します。サンプルで入っているデータは以下の通りです。

defaultbuyer-test.json
{
  "hostedApp": true,
  "appname": "HeadstartDemo",
  "appID": "headstartdemo-test",
  "clientID": "4E288BF1-5B2B-4558-83AD-0C5EAD429935",
  "incrementorPrefix": "HS_TEST",
  "baseUrl": "https://headstartdemo-buyer-ui-test.azurewebsites.net/",
  "middlewareUrl": "https://headstartdemo-middleware-test.azurewebsites.net",
  "cmsUrl": "https://ordercloud-cms-test.azurewebsites.net",
  "creditCardIframeUrl": "https://fts-uat.cardconnect.com/itoke/ajax-tokenizer.html",
  "translateBlobUrl": "https://headstartjpdemo.blob.core.windows.net/ngx-translate/i18n/",
  "sellerID": "HEADSTARTDEMO_TEST",
  "sellerName": "Headstart Demo Seller",
  "sellerQuoteContactEmail": "quotes@seller.com",
  "orderCloudApiUrl": "https://sandboxapi.ordercloud.io",
  "useSitcoreSend": false,
  "sitcoreSendWebsiteID": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "useSitecoreCDP": false,
  "sitecoreCDPTargetEndpoint": "https://api-us.boxever.com/v1.2",
  "sitecoreCDPApiClient": "xxxxxxxxxxxxxxxxxxx",
  "theme": {
      "logoSrc": "assets/generic-logo.png"
  },
  "instrumentationKey": null,
  "anonymousShoppingEnabled": true,
  "acceptedPaymentMethods": ["CreditCard", "PurchaseOrder"]
}

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

項目説明
clientIDBuyer の ClientID4E99898A-72E3-4584-AAFD-130C4B2F205D
middlewareUrlWeb アプリのテストスロットの URLhttps://headstart-middleware-test.azurewebsites.net
translateBlobUrlBlob URLhttps://headstartjpdemo.blob.core.windows.net/ngx-translate/i18n/
sellerIDSeller ID を設定0E2CB93C-CE06-450D-9921-3C8FC00444F0
sellerNameSeller のアプリ名Default HeadStart Admin UI
orderCloudApiUrlSandbox の URLhttps://japaneast-sandbox.ordercloud.io

上記の設定が完了したところで、buyer のアプリを実行します。

npm run start
OrderCloud

Seller を動かす

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

cd ..
cd seller
npm install

Seller のアプリも Buyer と同様のローカルで動かすための設定、アプリの設定の2つのファイルがあります。まずはローカルで動かすためのファイルを編集します。src/UI/Seller/src/environments/environment.local.ts のファイルであり、設定は1ヶ所 useLocalMiddleware を 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/",
  "blobStorageUrl": "https://MYSTORAGEACCOUNTNAME.blob.core.windows.net",
  "orderCloudApiUrl": "https://sandboxapi.ordercloud.io"
}
項目説明
clientIDSeller の ClientID0E2CB93C-CE06-450D-9921-3C8FC00444F0
middlewareUrlWeb アプリのテストスロットの URLhttps://headstart-middleware-test.azurewebsites.net
translateBlobUrlBlob URLhttps://headstartjpdemo.blob.core.windows.net/ngx-translate/i18n/
blobStorageUrlBlob URLhttps://headstartjpdemo.blob.core.windows.net
orderCloudApiUrlSandbox の URLhttps://japaneast-sandbox.ordercloud.io

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

OrderCloud

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

OrderCloud

まとめ

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