Headstart デモ環境を構築する - Part 11 環境のチェック

公開日 :

これまでローカルで Headstart のデモを動かし、GitHub を通じて Microsoft Azure にリソースを展開しました。今回は最後のステップとして展開済みの環境に関して動作を確認していきたいと思います。

ミドルウェアの設定を追加する

まず最初に展開をしたミドルウェアにアクセスをしてみます。

random desc

エラー画面が表示されていますが、これはローカルでは App_Congirutation を参照するように指定していましたが、今は Azure に展開されただけでこの指定が含まれていないため動作できていません。これを反映させるために以下の手順を進めてください。

  1. App_Congirutation から接続文字列を取得する

  2. Middleware を展開した App Servcie の Test スロットを開く

  3. 左側の構成のメニューを選択

  4. New Application Setting をクリックする

  5. APP_CONFIG_CONNECTION の名前で、App Configuration から取得した接続文字列を入れる

  6. 保存する

random desc

保存が終わると、インスタンスは再起動します。もう一度アクセスをすると以下のようにページが表示されました。

random desc

/env にアクセスをすると、設定を正しく読み込めているのがわかります。

random desc

これで middleware が起動しました。

Middleware に接続する

これまで Azure の Middleware ではなく localhost の Middleware を利用していました。Azure で動作するようになったため、ローカルの Seller および Buyer を Azure の Middleware に接続してテストします。

まず、 Buyer に関しては、２つのファイルを変更する必要があります。src\UI\Buyer\src\environments\environment.local.ts のファイルにある以下の項目を false に変更してください。

const useLocalMiddleware = false
const useLocalBuyerApiClient = false // set to true for running integration events locally

続いて src\UI\Buyer\src\assets\appConfigs\defaultbuyer-test.json のファイルに記載している以下の２つの行を実際に利用するサーバーの名前に変更してください。

  "baseUrl": "https://headstart-demo-buyer.azurewebsites.net",
  "middlewareUrl": "https://headstart-demo-middleware-test.azurewebsites.net/",

ローカルで Visual Studio で Middleware を起動せずに、buyer を起動します。

npm run start

エラーが表示された場合は、ブラウザの In Private モードでキャッシュの関係ない状況で動作させてください。以下のように表示されました。

random desc

同様に Seller に関しても変更をしていきます。src\UI\Seller\src\environments\environment.local.ts のファイルで以下のuseLocalMiddleware の値を false に変更してください。

const useLocalMiddleware = false
const localMiddlewareURL = 'https://localhost:5001'

また src\UI\Seller\src\assets\appConfigs\defaultadmin-test.json の設定ファイルに関して、middlewareUrl の値を buyer の時と同じく変更します。

javascript "middlewareUrl": "

,

こちらもローカルで実行して表示されるか確認をします。

powershell npm run start

しばらくするとログイン画面が表示されて、以下のようにログインをすることができました。

random desc

４つのファイルの更新を GitHub に反映させて、もう一度 Azure DevOps の Pipeline を走らせて Buyer および Seller に反映させてください。

Seller および Buyer サイトにアクセス

DevOps での展開が完了したあと、改めて Seller のテストインスタンスにアクセスをします。最初はログイン画面が表示されます。

random desc

ログインをすると、Welcome 画面が表示されます。これで Seller のアプリが OrderCloud のサービスおよびミドルウェアと正しく接続できていることがわかります。

random desc

続いて Buyer のサイトにアクセスをします。無事、ローカルと同じ環境が起動していることを確認できました。

random desc

まとめ

今回で Headstart を立ち上げるステップの紹介は全て整えることができました。Part 11 の公開に関しては、ずっと下書きのまま公開していなかったため、１年以上完了していませんでしたが、公開にあわせて Part 1 から Part 10 も最新の状況に更新しました。

明日は OrderCloud に関して、これまでの内容をまとめた記事を整理するための投稿をしたいと思います。