- Published on
Sitecore OrderCloud Headstart - Part 3 ローカルでの展開
- Authors
- Name
- Shinichi Haramizu
- @haramizu
これまで OrderCloud Headstart として提供されているサンプルを立ち上げるために、2回に分けて、環境の準備、設定と進めていきました。今回はすでにダウンロードしていたソースコードを利用して、ローカルでの展開手続きを進めていきます。
Middleware をローカルで実行する
Visual Studio で手元にあるプロジェクトを開いてください。画面のようになっていれば、準備が完了です。
今回は設定に関してすべて Azure の App Configuration にアップロードをしたので、その値を利用して動かしたいと思います。そこで、Visual Studio のプロファイルを追加して、設定を読み込みするような手順を進めます。
- ソリューションエクスプローラーにて、 Headstart.API のプロパティを開く
- デバッグを選択する
- プロファイルを追加する
- 起動方法はプロジェクトを選択
- 環境変数として APP_CONFIG_CONNECTION を追加します。
環境変数の値としては、Azure Portal から App Configuration のリソースを開き、設定 - アクセスキー を選択したあと接続文字列をコピーして取得してください。
続いてソリューションのビルドを実行します。
ビルドエラーが出ないことを確認して、実行をします。Visual Studio のメニューにある ▷ Test (先ほど作成したプロファイル)を指定して実行をします。
しばらくするとコンソールが立ち上がり、プログラムが動いている状況の確認ができます。
1 つめの URL にアクセスをすると、以下のように Headstart Middleware API の画面が表示されます。
OrderCloud データのシード
上記の画面が起動している状況で、Postman を利用して初期化用のデータを投入していきます。Postman がアクセスする URL はローカルのサーバーに対して /seed のパスを指定して Post を実行することになります。その際のサンプルのデータは以下のようになります。
{
"PortalUsername": "",
"PortalPassword": "",
"InitialAdminUsername": "",
"InitialAdminPassword": "",
"MiddlewareBaseUrl": "",
"MarketplaceID": "",
"OrderCloudSettings": {
"Environment": "sandbox",
"WebhookHashKey": ""
},
"StorageAccountSettings": {
"ConnectionString": ""
}
}
それぞれには以下の項目を設定します。下記の MarketplaceID はすでに Part 1 の最後に作成していると思いますが、まだであれば最初のステップを確認しながら作成をします。
項目 | 入力 | 例 |
---|---|---|
PortalUsername | ordercloud.io のログイン名 | sitecoredemo |
PortalPassword | ordercloud.io のパスワード | Hell0wor!d |
InitialAdminUsername | 初期管理者のユーザー名 | admin |
InitialAdminPassword | 初期管理者のパスワード | p@ssw0rd! |
MiddlewareBaseUrl | Middleware の URL | https://localhost:5001/ |
MarketplaceID | ordercloud.io で作成している ID | |
Environment | sandbox | |
WebhookHashKey | WebHook のキー | demo-Headstart |
ConnectionString | Blob ストレージの接続文字列 |
Postman の画面では以下の通りです(項目はいくつか表示していません)
実行して以下のようなデータを取得できると、必要な ClientID などを取得できる形となります。
Buyer Storefront のビルド
続いて Visual Studio Code でリポジトリの \src\UI のフォルダを開きます。
ターミナルを開いて、SDK のフォルダに移動して、npm install を実行します。
cd SDK
npm install
コマンドが終了したタイミングで、npm run build を実行して SDK のビルドを実行します。
完了すると、次は buyer のディレクトリに移動をして、npm install を実行します。
cd ..
cd Buyer
npm install
続いて、 Buyer\src\environments\environment.local.ts のファイルを開きます。このファイルの次の項目
- useLocalMiddleware
- useLocalBuyerApiClient
の false の値を true にしてください。設定後、 npm run start を実行します。
コンパイルが完了すると、ブラウザが立ち上がってデモサイトが起動します。
ビルドを確認したら、Ctrl+C で停止させ、またブラウザを閉じて次のステップに進みます。
Seller Admin の設定
続いて管理画面となる Seller をビルドしていきます。まず最初に、以下のように対象となるディレクトリに移動して、npm install を実行してください。
cd ..
cd Seller
npm install
続いて Buyer の時と同じように、 Seller\src\environments\environment.local.ts のファイルを開きます。このファイルの次の項目
- useLocalMiddleware
を true に変更します。
Seller Admin に関しては次のステップに向けて準備ができました。
Buyer および Seller をローカルで実行する
ここまで手順を進めていたものに関して、順番に起動をしていきます。
- Middleware の起動
- Buyer Storefront の起動
- Seller Admin の起動
これで主なコンポーネントがローカルで動くようになりました。
まとめ
実際の開発にあたってはローカルで開発をして、動作確認をしたコードをコミット、テストという感じで開発をしていきます。このため最初のステップはローカルで動く環境を準備した形です。次回は、今回セットアップした環境を少しみていきたいと思います。