Qmonus Value Stream Docs

Appearance

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

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

5-1. AssemblyLineの確認 ​

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

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

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

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

5-2. Deployment Configの登録 ​

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

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

    CI/CD パイプラインの実行手順Deployment Configの登録

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

    CI/CD パイプラインの実行手順Deployment Configの登録

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

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

    yaml
    buildTargetDir: todo-app/frontend
deployTargetDir: todo-app/forntend/dist
dnsZoneName: qvs-gcp-dns
dnsZoneProjectId: 2nd-tutorial-projectid
gcpFirebaseHostingCustomDomainName: 2nd-tutorial.gcp.vsdev.axis-dev.io.
gcpFirebaseHostingSiteId: 2nd-tutorial-gcp

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

    パラメータ説明
    buildTargetDirビルドするフォルダのパス
    deployTargetDirデプロイするフォルダのパス（ビルド実行後にdistフォルダが生成される）
    dnsZoneName事前に用意したCloud DNSゾーン名(例:qvs-gcp-dns)
    dnsZoneProjectId事前に用意したCloud DNSゾーンが所属するGoogle CloudプロジェクトID
    gcpFirebaseHostingCustomDomainName新たに作成するCNAMEレコードに設定するカスタムドメインのFQDN(例：2nd-tutorial.gcp.vsdev.axis-dev.io.)
    gcpFirebaseHostingSiteIdデプロイするアプリケーションのデフォルトドメインに使用されるサイトID

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

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

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

5-3. AssemblyLineの実行 ​

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

  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 の実行が完了します。

CI/CD パイプラインの実行手順AssemblyLineの実行結果

TIP

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

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

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

Firebase consoleにログイン後に、Provisioning Target 設定時に入力したプロジェクトIDに移動し、左側のメニューの構築から Hosting に移動します。 ダッシュボードを確認し、AssemblyLine Results に表示された defaultDomain の値と同じサイトが存在していればデプロイは完了です。

CI/CD パイプラインの実行手順Firebaseリソースの確認

CI/CD パイプラインの実行手順Firebaseリソースの確認

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

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

CI/CD パイプラインの実行手順アプリケーションの実行確認

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

CI/CD パイプラインの実行手順アプリケーションの実行確認

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

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