Qmonus Value Stream Docs

Appearance

5. CI/CD パイプラインの実行 ​

Qmonus Value Stream に登録した CI/CD パイプラインを実行し、Frontend アプリケーションをデプロイします。

5-1. AssemblyLineの確認 ​

azure-frontend の AssemblyLine を確認して、登録された CI/CD パイプラインの内容を確認してみましょう。

Pipeline Stages を確認すると、deploy publish-site の Pipeline が存在していることがわかります。これらの Pipeline は、本チュートリアルで選択した構成（Architecture, Option）に基づいて生成された Pipeline であり、azure-frontend の AssemblyLine はこれらの Pipeline から構成されています。 各 Pipeline は、それぞれ以下の機能を担っています。

  • deploy : azure-frontend 用のクラウドリソースをデプロイする。
  • publish-site : 静的 Web アプリケーションをビルドし、Azure Static Web Apps にデプロイする。

また、Pipeline Stages が deploy publish-site の順番で配置されていることに注目してください。このため、この AssemblyLine を実行すると、まず deploy Pipeline が実行され、deploy Pipeline の実行が完了すると publish-site Pipeline が実行され、publish-site Pipeline の実行が完了すると AssemblyLine の実行が完了することになります。

5-2. Deployment Configの登録 ​

以下の手順に従って azure-frontend の AssemblyLine の Deployment Config を登録してください。

  1. AssemblyLine の Pipeline Stagesで deploy カードを選択します。

    Azure CI/CD パイプラインの実行手順

  2. 画面下部のパラメータ一覧で、赤色となっている箇所を確認します。これらの赤くなっている空欄の箇所のパラメータを Deployment Config で設定します。

    Azure CI/CD パイプラインの実行手順

  3. 同様に、Pipeline Stages で publish-site カードを選択し、画面下部のパラメータ一覧で、赤色となっている箇所が空欄かを確認します。

  4. EDIT DEPLOYMENT CONFIG ボタンを押下し、表示される Edit Deployment Config ダイアログで、以下のパラメータを設定します。

    yaml
    azureDnsZoneName: 2nd-tutorial.azure.vsdev.axis-dev.io
azureDnsZoneResourceGroupName: azure-dns-rg
buildTargetDir: todo-app/frontend
deployTargetDir: todo-app/frontend/dist
relativeRecordSetName: frontend

    入力する上記のパラメータの概要はそれぞれ以下の通りです。

    パラメータ説明
    azureDnsZoneName事前準備で作成したDNSゾーン名(例:2nd-tutorial.azure.vsdev.axis-dev.io)
    azureDnsZoneResourceGroupName事前準備で作成したDNSゾーンが所属するリソースグループ名(例:azure-dns-rg)
    buildTargetDirビルドするフォルダのパス
    deployTargetDirデプロイするフォルダのパス（ビルド実行後にdistフォルダが生成される）
    relativeRecorSetNameFrontend アプリケーションのレコードとして指定したい文字列

  5. SAVE ボタンを押下しダイアログを閉じます。

  6. Pipeline Stages で deploy カードを選択し、画面下部のパラメータ一覧が、すべて青色になっていることを確認します。

  7. Pipeline Stages で publish-site カードを選択し、画面下部のパラメータ一覧が、すべて青色になっていることを確認します。

5-3. AssemblyLineの実行 ​

azure-frontend の AssemblyLine を実行し、リソースを Azure にデプロイします。

  1. 手順2-2でコピーした Git コミットのハッシュ値を確認します。

  2. 画面上部の Input Parameters に以下を入力し、RUN ボタンを押下して AssemblyLine を実行します。

    • gitRevision: Gitコミットのハッシュ値

5-4. AssemblyLineの実行結果の確認(frontend-application) ​

AssemblyLine を実行すると、自動的に AssemblyLine の進捗画面に遷移します。

1.ステータスの確認 ​

  • Pipelines (Stages) に、各 Pipeline のステータスが表示されます。
  • 表示されている deploy publish-site カードを選択することで、それぞれの Pipeline の中で実行される Task のステータスを確認できます。
  • すべての Task および Pipeline のステータスが完了になると、AssemblyLine の実行が完了します。

Azure CI/CD パイプラインの実行手順

TIP

AssemblyLine の実行には10分程度かかりますが、リアルタイムで状況が反映されます。実行が完了するまでお待ちください。

5-5. 作成されたAzureリソースの確認 ​

Task および Pipeline のステータスがすべて完了となり、AssemblyLine の実行が完了したら、Azure にリソースが作成されたかを確認します。

Azure portalにログイン後に、Provisioning Target 設定時に入力したリソースグループに移動し、リソースを表示します。 リソース一覧を確認し、以下の種類のリソースが生成されていればデプロイは完了です。

AssemblyLineの実行状態を確認する

リソース一覧
* 静的 Web アプリ

5-6. デプロイされたサンプルアプリケーションの実行確認 ​

デプロイが完了すると、AssemblyLine Results の publicUrl にアプリケーションの URL が表示されるので、アクセスします。

AssemblyLine Resultsを確認する

以下のようにアプリケーションが表示されていれば、デプロイに成功しています。

デプロイしたアプリケーション画面

以上で Frontend のデプロイはすべて完了です。

本チュートリアルで作成したリソースを削除する際は、リソースの削除手順がありますのでそちらを参考にリソースを削除してください。 リソースの削除