Qmonus Value Stream Docs

Appearance

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

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

5-1. AssemblyLineの確認 ​

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

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

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

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

5-2. Deployment Configの登録 ​

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

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

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

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

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

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

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

    今回設定する必要のあるパラメータは、以下の通りです。

    パラメータ説明
    bucketName新たに作成する S3 バケットの名前。任意の名前を設定してください
    buildTargetDirビルドするフォルダのパス
    customDomainNameフロントエンドアプリケーションに設定したいカスタムドメイン名
    deployTargetDirデプロイするフォルダのパス（ビルド実行後にdistフォルダが生成される）
    dnsZoneId事前に用意した Route 53 ホストゾーンのホストゾーン ID
    enableWafAWS WAF の Web ACL を使用するか否か。本チュートリアルでは "true" を指定してください
    indexDocumentNameアプリケーションのトップページとして指定するファイル名

    以下のようにパラメータを入力します。入力内容は適宜読み替えてください。

    yaml
    bucketName: bucket-name-xxxxxxxxxx
buildTargetDir: todo-app/frontend
customDomainName: forntend.axis-dev.io
deployTargetDir: todo-app/frontend/dist
dnsZoneId: XXXXXXXXXXXXXXXXXXXX
enableWaf: "true"
indexDocumentName: index.html

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

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

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

5-3. AssemblyLineの実行 ​

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

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

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

TIP

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

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

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

AWS マネジメントコンソールにログイン後に、リソースを確認し、以下の種類のリソースが生成されていればデプロイは完了です。

* S3 バケット
* CloudFront ディストリビューション
* Certificate Manager パブリック証明書
* Web ACL

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

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

AssemblyLine Resultsを確認する

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

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

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

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