チュートリアル: Modern 3 層ウェブアプリケーション設計図を使用したプロジェクトの作成 - Amazon CodeCatalyst

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

チュートリアル: Modern 3 層ウェブアプリケーション設計図を使用したプロジェクトの作成

設計図を使用してプロジェクトを作成することで、ソフトウェアの開発をより迅速に開始できます。ブループリントで作成されたプロジェクトには、コードを管理するためのソースリポジトリや、アプリケーションを構築してデプロイするためのワークフローなど、必要なリソースが含まれています。このチュートリアルでは、Modern の 3 層ウェブアプリケーションのブループリントを使用して Amazon でプロジェクトを作成する手順を説明します CodeCatalyst。このチュートリアルには、デプロイされたサンプルの表示、他のユーザーによる作業の招待、プルリクエストによるコードの変更も含まれます。プルリクエストは、プルリクエストがマージされた AWS アカウント ときに、接続された 内のリソースに自動的に構築およびデプロイされます。 CodeCatalyst がレポート、アクティビティフィード、その他のツールを使用してプロジェクトを作成する場合、ブループリントは AWS プロジェクト AWS アカウント に関連付けられた にリソースを作成します。ブループリントファイルを使用すると、サンプルの最新アプリケーションを構築してテストし、 のインフラストラクチャにデプロイできます AWS クラウド。

次の図 CodeCatalyst は、 のツールを使用して、変更を追跡、マージ、自動的に構築するための問題を作成し、プロジェクトで CodeCatalystワークフローを開始して、 AWS CDK を許可してインフラストラクチャ AWS CloudFormation をプロビジョニングするアクションを実行する方法を示しています。

アクションは、関連付けられた にリソースを生成 AWS アカウント し、API Gateway エンドポイントを持つサーバーレス AWS Lambda関数にアプリケーションをデプロイします。 AWS Cloud Development Kit (AWS CDK) アクションは、1 つ以上の AWS CDK スタックを AWS CloudFormation テンプレートに変換し、スタックを にデプロイします AWS アカウント。スタック内のリソースには、動的ウェブコンテンツを配信するための Amazon CloudFront リソース、アプリケーションデータの Amazon DynamoDB インスタンス、デプロイされたアプリケーションをサポートするロールとポリシーが含まれます。

ソースリポジトリの変更による問題の作成からのコード変更。ソースリポジトリは、自動的に構築され、 のリソースにデプロイされます。 AWS

Modern の 3 層ウェブアプリケーション設計図を使用してプロジェクトを作成すると、プロジェクトは次のリソースを使用して作成されます。

CodeCatalyst プロジェクト で

  • サンプルコードとワークフロー YAML を含むソースリポジトリ

  • デフォルトブランチに変更が加えられるたびにサンプルコードを構築してデプロイするワークフロー

  • 作業の計画と追跡に使用できる問題ボードとバックログ

  • サンプルコードに自動レポートが含まれているテストレポートスイート

関連付けられた で AWS アカウント

  • アプリケーションに必要なリソースを作成する 3 つの AWS CloudFormation スタック。

このチュートリアル CodeCatalyst の一部として AWS および で作成されるリソースの詳細については、「」を参照してくださいリファレンス

注記

プロジェクトに含まれるリソースとサンプルは、選択するブループリントによって異なります。Amazon CodeCatalyst は、定義された言語またはフレームワークに関連するリソースを定義するいくつかのプロジェクトブループリントを提供しています。ブループリントの詳細については、「」を参照してください CodeCatalyst ブループリントを使用した包括的なプロジェクトの作成

前提条件

このチュートリアルで最新のアプリケーションプロジェクトを作成するには、 でのセットアップと へのサインイン CodeCatalyst次のようにタスクを完了している必要があります。

ステップ 1: Modern 3 層ウェブアプリケーションプロジェクトを作成する

作成後、プロジェクトはコードの開発とテスト、開発タスクの調整、プロジェクトメトリクスの表示を行う場所になります。プロジェクトには、開発ツールとリソースも含まれています。

このチュートリアルでは、 Modern の 3 層ウェブアプリケーションのブループリントを使用してインタラクティブアプリケーションを作成します。プロジェクトの一部として自動的に作成および実行されるワークフローは、アプリケーションを構築してデプロイします。ワークフローは、スペースにすべてのロールとアカウント情報が設定された後にのみ正常に実行されます。ワークフローが正常に実行されたら、エンドポイント URL にアクセスしてアプリケーションを表示できます。

ブループリントを使用してプロジェクトを作成するには
  1. https://codecatalyst.aws/ で CodeCatalyst コンソールを開きます。

  2. CodeCatalyst コンソールで、プロジェクトを作成するスペースに移動します。

  3. [プロジェクトを作成] を選択します。

  4. 設計図 で開始 を選択します。

  5. [Search] バーに「modern」と入力します。

  6. Modern の 3 層ウェブアプリケーションのブループリントを選択し、次へ を選択します。

  7. 「プロジェクトの名前」に、プロジェクト名を入力します。例:

    MyExampleProject.

    注記

    名前はスペース内で一意である必要があります。

  8. アカウント で、サインアップ時に追加 AWS アカウント した を選択します。ブループリントはこのアカウントにリソースをインストールします。

  9. デプロイロール で、サインアップ時に追加したロールを選択します。例えば、[CodeCatalystWorkflowDevelopmentRole-spaceName] を選択します。

    ロールがリストされていない場合は、追加します。ロールを追加するには、「IAM ロールを追加」を選択し、ロールを に追加します AWS アカウント。詳細については、「接続された AWS リソースへのアクセスを許可する AWS アカウント」を参照してください。

  10. コンピューティングプラットフォーム でLambda を選択します。

  11. フロントエンドホスティングオプション で、Amplify ホスティング を選択します。の詳細については AWS Amplify、「 AWS Amplify ユーザーガイド」のAWS Amplify 「ホスティングとは」を参照してください。

  12. デプロイリージョン で、ブループリントで AWS リージョン Mysfits アプリケーションとサポートリソースをデプロイする のリージョンコードを入力します。リージョンコードのリストについては、「」の「リージョンエンドポイント」を参照してくださいAWS 全般のリファレンス

  13. アプリケーション名 では、デフォルトは のままにしますmysfitsstring

  14. (オプション) 「プロジェクトプレビューの生成」で「コードを表示」を選択して、ブループリントがインストールするソースファイルをプレビューします。ワークフローを表示 を選択して、ブループリントがインストールする CI/CD ワークフロー定義ファイルをプレビューします。プレビューは、選択した内容に基づいて動的に更新されます。

  15. [プロジェクトを作成] を選択します。

プロジェクトワークフローは、プロジェクトを作成するとすぐに開始されます。コードの構築とデプロイが完了するまでに少し時間がかかります。その間、先に進み、他のユーザーをプロジェクトに招待します。

ステップ 2: プロジェクトに誰かを招待する

プロジェクトをセットアップしたので、他のユーザーを招待して協力してもらいます。

プロジェクトに誰かを招待するには
  1. ユーザーを招待するプロジェクトに移動します。

  2. ナビゲーションペインで、プロジェクト設定 を選択します。

  3. メンバー タブで、招待 を選択します。

  4. プロジェクトのユーザーとして招待するユーザーの E メールアドレスを入力します。複数の E メールアドレスをスペースまたはカンマで区切って入力できます。プロジェクトのメンバーではないスペースのメンバーから選択することもできます。

  5. ユーザーのロールを選択します。

    ユーザーの追加が完了したら、招待 を選択します。

ステップ 3: 作業を共同作業して追跡するための問題を作成する

CodeCatalyst は、問題のあるプロジェクトに関連する機能、タスク、バグ、その他の作業を追跡するのに役立ちます。問題を作成して、必要な作業やアイデアを追跡できます。デフォルトでは、問題を作成すると、バックログに追加されます。進行中の作業を追跡するボードに問題を移動できます。特定のプロジェクトメンバーに問題を割り当てることもできます。

プロジェクトの問題を作成するには
  1. ナビゲーションペインで、問題 を選択します。

  2. 問題の作成 を選択します。

  3. 問題タイトル で、問題の名前を指定します。必要に応じて、問題の説明を入力します。この例では、 を使用します。 make a change in the src/mysfit_data.json file.

  4. 優先度、見積り、ステータス、ラベルを選択します。担当者 で +Add me を選択して、問題を自分に割り当てます。

  5. 問題の作成 を選択します。これで、問題がボードに表示されます。カードを選択して、問題を「進行中」列に移動します。

詳細については、「で問題のある作業を追跡して整理する CodeCatalyst」を参照してください。

ステップ 4: ソースリポジトリを表示する

ブループリントは、アプリケーションまたはサービスを定義してサポートするファイルを含むソースリポジトリをインストールします。ソースリポジトリ内のいくつかの注目に値するディレクトリとファイルは次のとおりです。

  • .cloud9 ディレクトリ – AWS Cloud9 開発環境のサポートファイルが含まれています。

  • .codecatalyst ディレクトリ – 設計図に含まれる各YAMLワークフローのワークフロー定義ファイルが含まれます。

  • .idea ディレクトリ – JetBrains 開発環境のサポートファイルが含まれています。

  • .vscode ディレクトリ — Visual Studio Code Dev Environment のサポートファイルが含まれています。

  • cdkStacks ディレクトリ – のインフラストラクチャを定義する AWS CDK スタックファイルが含まれます AWS クラウド。

  • src ディレクトリ — アプリケーションのソースコードが含まれます。

  • テストディレクトリ – アプリケーションの構築とテスト時に実行される自動 CI/CD ワークフローの一部として実行される統合テストとユニットテストのファイルが含まれます。

  • ウェブディレクトリ – フロントエンドソースコードが含まれます。その他のファイルには、プロジェクトに関する重要なメタデータを含む package.json ファイル、ウェブサイトのindex.htmlページ、コードのリンティング用の .eslintrc.cjs ファイル、ルートファイルとコンパイラオプションを指定するための tsconfig.json ファイルなどのプロジェクトファイルが含まれます。

  • Dockerfile file – アプリケーションのコンテナを記述します。

  • README.md file – プロジェクトの設定情報が含まれます。

プロジェクトのソースリポジトリに移動するには
  1. プロジェクトに移動し、次のいずれかを実行します。

    • プロジェクトの概要ページで、リストから目的のリポジトリを選択し、リポジトリの表示 を選択します。

    • ナビゲーションペインで [コード] を選択してから、[ソースリポジトリ] を選択します。ソースリポジトリ で、リストからリポジトリの名前を選択します。リポジトリのリストをフィルタリングするには、フィルターバーにリポジトリ名の一部を入力します。

  2. リポジトリのホームページで、リポジトリの内容と、プルリクエストやワークフローの数など、関連するリソースに関する情報を表示します。デフォルトでは、デフォルトのブランチの内容が表示されます。ドロップダウンリストから別のブランチを選択して、ビューを変更できます。

ステップ 5: テストブランチを使用して開発環境を作成し、コードをすばやく変更する

開発環境を作成することで、ソースリポジトリ内のコードをすばやく操作できます。このチュートリアルでは、次のことを前提としています。

  • AWS Cloud9 開発環境を作成します。

  • 開発環境を作成するときに、メインブランチから新しいブランチで作業するオプションを選択します。

  • この新しいブランチの名前testを使用します。

後のステップでは、開発環境を使用してコードを変更し、プルリクエストを作成します。

新しいブランチを使用して開発環境を作成するには
  1. https://codecatalyst.aws/ で CodeCatalyst コンソールを開きます。

  2. 開発環境を作成するプロジェクトに移動します。

  3. プロジェクトのソースリポジトリのリストからリポジトリの名前を選択します。または、ナビゲーションペインでコード を選択し、ソースリポジトリ を選択し、開発環境を作成するリポジトリを選択します。

  4. リポジトリのホームページで、開発環境の作成 を選択します。

  5. サポートされている IDE をドロップダウンメニューから選択します。詳細については、「開発環境でサポートされている統合開発環境」を参照してください。

  6. クローンするリポジトリを選択し、[新しいブランチで作業する] を選択し、[ブランチ名] フィールドにブランチ名を入力し、[ブランチの作成元] ドロップダウンメニューから新しいブランチを作成するブランチを選択します。

  7. オプションで、開発環境のエイリアスを追加します。

  8. オプションで、[開発環境設定] 編集ボタンを選択して、開発環境のコンピューティング、ストレージ、またはタイムアウト設定を編集します。

  9. [作成] を選択します。開発環境の作成中は、開発環境のステータス列に [開始中] と表示され、開発環境が作成されると、ステータス列に [実行中] と表示されます。新しいタブが開き、選択した IDE で開発環境が表示されます。コードを編集し、変更をコミットしてプッシュできます。

このセクションでは、プルリクエストがマージされた AWS アカウント ときに、接続された 内のリソースに自動的に構築およびデプロイされるプルリクエストを使用してコードを変更 CodeCatalyst することで、 で生成されたサンプルアプリケーションを使用します。

src/mysfit_data.json ファイルを変更するには
  1. プロジェクトの開発環境に移動します。で AWS Cloud9、サイドナビゲーションメニューを展開してファイルを参照します。mysfits、 を展開しsrc、 を開きますsrc/mysfit_data.json

  2. ファイルで、 "Age":フィールドの値を 6 から 12 に変更します。行は次のようになります。

    { "Age": 12, "Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.", "GoodEvil": "Good", "LawChaos": "Lawful", "Name": "Twilight Glitter", "ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png", "Species": "Pegasus", "ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png" },
  3. ファイルを保存します。

  4. cd /projects/mysfits コマンドを使用して mysfits リポジトリに変更します。

  5. git add 、git commit 、および git push コマンドを使用して、変更を追加、コミットプッシュします。

    git add . git commit -m "make an example change" git push

ステップ 6: 最新のアプリケーションを構築するワークフローを表示する

最新のアプリケーションプロジェクトを作成した後、 はワークフローを含む複数のリソースをユーザーに代わって CodeCatalyst 生成します。ワークフローは、コードの構築、テスト、デプロイの方法を記述する .yaml ファイルで定義された自動手順です。

このチュートリアルでは、 がワークフロー CodeCatalyst を作成し、プロジェクトの作成時にワークフローを自動的に開始しました。(プロジェクトを作成した期間によっては、ワークフローがまだ実行されている場合があります。) 以下の手順を使用して、ワークフローの進行状況を確認し、生成されたログとテストレポートを確認し、最後にデプロイされたアプリケーションの URL に移動します。

ワークフローの進行状況を確認するには
  1. CodeCatalyst コンソールのナビゲーションペインで CI/CD を選択し、ワークフロー を選択します。

    ワークフローのリストが表示されます。これらは、プロジェクトの作成時に CodeCatalyst ブループリントが生成および開始したワークフローです。

  2. ワークフローのリストを確認します。次の 4 つが表示されます。

    • 上部の 2 つのワークフローは、 で前に作成したtestブランチに対応していますステップ 5: テストブランチを使用して開発環境を作成し、コードをすばやく変更する。これらのワークフローは、mainブランチ上のワークフローのクローンです。ApplicationDeploymentPipelinemainブランチで使用するように設定されているため、アクティブではありません。プルリクエストが行われていないため、OnPullRequestワークフローは実行されませんでした。

    • 下部の 2 つのワークフローは、以前にブループリントを実行したときに作成されたmainブランチに対応しています。ApplicationDeploymentPipeline ワークフローはアクティブで、進行中 (または終了済み) の実行があります。

      注記

      ApplicationDeploymentPipeline 実行が Build@cdk_bootstrap または DeployBackend エラーで失敗した場合、以前に Modern 3 層ウェブアプリケーションを実行し、古いリソースが現在のブループリントと競合していたことが原因である可能性があります。これらの古いリソースを削除してから、ワークフローを再実行する必要があります。詳細については、「リソースをクリーンアップする」を参照してください。

  3. main ブランチに関連付けられているApplicationDeploymentPipelineワークフローを下部で選択します。このワークフローは、mainブランチのソースコードを使用して実行されました。

    ワークフロー図が表示されます。この図は、タスクまたはアクション を表す複数のブロックを示しています。ほとんどのアクションは垂直に配置され、上部のアクションは、以下のアクションの前に実行されます。並べて並べられたアクションは、並行して実行されます。グループ化されたアクションは、その下のアクションを開始する前に、すべて正常に実行する必要があります。

    メインブロックは次のとおりです。

    • WorkflowSource – このブロックはソースリポジトリを表します。特に、ソースリポジトリ名 (mysfits ) と、ワークフロー実行を自動的に開始したコミットが表示されます。 は、プロジェクトの作成時にこのコミット CodeCatalyst を生成しました。

    • ビルド — このブロックは、次のアクションを開始するには、両方が正常に完了する必要がある 2 つのアクションのグループを表します。

    • DeployBackend – このブロックは、アプリケーションのバックエンドコンポーネントを AWS クラウドにデプロイするアクションを表します。

    • テスト — このブロックは、次のアクションを開始するには、両方が正常に完了する必要がある 2 つのテストアクションのグループを表します。

    • DeployFrontend – このブロックは、アプリケーションのフロントエンドコンポーネントを AWS クラウドにデプロイするアクションを表します。

  4. 定義タブ (上部付近) を選択します。ワークフロー定義ファイルが右側に表示されます。このファイルには、次の注目すべきセクションがあります。

    • 上部Triggersのセクション。このセクションでは、コードがソースリポジトリのmainブランチにプッシュされるたびにワークフローを開始する必要があることを示します。他のブランチ ( などtest) にプッシュしても、このワークフローは開始されません。ワークフローは、mainブランチ上のファイルを使用して実行されます。

    • の下の ActionsセクションTriggers。このセクションでは、ワークフロー図に表示されるアクションを定義します。

  5. 最新状態タブ (上部付近) を選択し、ワークフロー図で任意のアクションを選択します。

  6. 右側で、Configuration タブを選択すると、最新の実行中に アクションで使用される設定が表示されます。各設定には、ワークフロー定義ファイルに一致するプロパティがあります。

  7. コンソールを開いたままにして、次の手順に進みます。

ビルドログとテストレポートを確認するには
  1. 最新の状態タブを選択します。

  2. ワークフロー図で、 DeployFrontendアクションを選択します。

  3. アクションが終了するのを待ちます。「進行中」アイコン ( Workflow in progress. ) が「成功」アイコン () に変わるのを確認します Workflow success.

  4. build_backend アクションを選択します。

  5. ログタブを選択し、いくつかのセクションを展開して、これらのステップのログメッセージを表示します。バックエンド設定に関連するメッセージを表示できます。

  6. レポートタブを選択し、backend-coverage.xmlreport. CodeCatalyst displays を選択します。このレポートには、実行されたコードカバレッジテストと、テストによって正常に検証されたコード行の割合が 80% などで表示されます。

    テストレポートの詳細については、「」を参照してくださいワークフローを使用したテスト

    ヒント

    ナビゲーションペインでレポートを選択して、テストレポートを表示することもできます。

  7. CodeCatalyst コンソールを開いたままにして、次の手順に進みます。

最新のアプリケーションが正常にデプロイされたことを確認するには
  1. ApplicationDeploymentPipeline ワークフローに戻り、最新の実行の Run-string リンクを選択します。

  2. ワークフロー図で、 DeployFrontendアクションを検索し、アプリを表示リンクを選択します。Mysfit ウェブサイトが表示されます。

    注記

    DeployFrontend アクション内にアプリの表示リンクが表示されない場合は、実行 ID リンクを選択していることを確認してください。

  3. Twilight G™ という名前のペガサス Mysfit を検索します。経過時間の値を書き留めます。これは です6。コードを変更して経過時間を更新します。

ステップ 7: 変更を確認するよう他のユーザーに依頼する

という名前のブランチに変更があったのでtest、プルリクエストを作成して、他のユーザーに確認を求めることができます。次の手順を実行して、testブランチからブランチに変更をマージするプルリクエストを作成しますmain

プルリクエストを作成するには
  1. プロジェクトに移動します。

  2. 次のいずれかを行います。

    • ナビゲーションペインで、コード を選択し、プルリクエスト を選択し、プルリクエストの作成 を選択します。

    • リポジトリのホームページで、「その他」を選択し、「プルリクエストの作成」を選択します。

    • プロジェクトページで、プルリクエストの作成 を選択します。

  3. ソースリポジトリ で、指定されたソースリポジトリがコミットされたコードを含むリポジトリであることを確認します。このオプションは、リポジトリのメインページからプルリクエストを作成していない場合にのみ表示されます。

  4. 送信先ブランチ で、レビュー後にコードをマージするブランチを選択します。

  5. ソースブランチ で、コミットされたコードを含むブランチを選択します。

  6. プルリクエストのタイトル に、他のユーザーがレビューする必要がある内容と理由を理解するのに役立つタイトルを入力します。

  7. (オプション) プルリクエストの説明 で、問題へのリンクや変更の説明などの情報を入力します。

    ヒント

    プルリクエストに含まれる変更の説明 CodeCatalyst を自動的に生成するには、説明の書き込み を選択します。プルリクエストに追加した後、自動的に生成された説明を変更できます。

    この機能を使用するには、生成 AI 機能が領域に対して有効になっており、リンクされたリポジトリのプルリクエストでは使用できません。詳細については、「生成 AI 機能の管理」を参照してください。

  8. (オプション) 問題 問題 をリンク を選択し、リストから問題を選択するか、その ID を入力します。問題のリンクを解除するには、リンク解除アイコンを選択します。

  9. (オプション) 必要なレビューワー で必要なレビューワーを追加 を選択します。追加するプロジェクトメンバーのリストから選択します。必要なレビューワーは、プルリクエストを送信先ブランチにマージする前に、変更を承認する必要があります。

    注記

    レビューワーを必要なレビューワーとオプションのレビューワーの両方として追加することはできません。自分自身をレビューワーとして追加することはできません。

  10. (オプション) オプションのレビューワー でオプションのレビューワーを追加 を選択します。追加するプロジェクトメンバーのリストから選択します。オプションのレビューワーは、プルリクエストを送信先ブランチにマージする前に、変更を要件として承認する必要はありません。

  11. ブランチの違いを確認します。プルリクエストに表示される違いは、ソースブランチのリビジョンと、プルリクエストの作成時の送信先ブランチのヘッドコミットであるマージベースとの間の変更です。変更が表示されない場合、ブランチは同じであるか、送信元と送信先の両方に同じブランチを選択している可能性があります。

  12. プルリクエストにレビューするコードと変更が含まれていることを確認したら、の作成」を選択します。

    注記

    プルリクエストを作成したら、コメントを追加できます。コメントは、プルリクエスト、またはファイル内の個々の行、およびプルリクエスト全体に追加できます。ファイルなどのリソースへのリンクを追加するには、@ 記号の後にファイルの名前を付けます。

プルリクエストを作成すると、OnPullRequestワークフローはtestブランチ内のソースファイルの使用を開始します。レビューワーがコード変更を承認する間、ワークフローを選択し、テスト出力を表示することで結果を確認できます。

変更を確認したら、コードをマージできます。コードをデフォルトのブランチにマージすると、変更をビルドしてデプロイするワークフローが自動的に開始されます。

CodeCatalyst コンソールからプルリクエストをマージするには
  1. 最新のアプリケーションプロジェクトに移動します。

  2. プロジェクトページの「プルリクエストを開く」で、マージするプルリクエストを選択します。プルリクエストが表示されない場合は、すべて表示を選択し、リストから選択します。[Merge (マージ)] を選択します。

  3. プルリクエストに使用できるマージ戦略から選択します。オプションで、プルリクエストをマージした後にソースブランチを削除するオプションを選択または選択解除し、マージ を選択します。

    注記

    マージボタンがアクティブでないか、マージ不可ラベルが表示されている場合、1 人以上の必要なレビューワーがプルリクエストをまだ承認していないか、 CodeCatalyst コンソールでプルリクエストをマージできません。プルリクエストを承認していないレビューワーは、プルリクエストの詳細エリアの概要のクロックアイコンで示されます。必要なレビューワーがすべてプルリクエストを承認したが、マージボタンがまだアクティブでない場合、マージの競合が発生する可能性があります。コンソールで CodeCatalyst送信先ブランチのマージ競合を解決してからプルリクエストをマージするか、競合を解決してローカルでマージしてから、マージを含むコミットを にプッシュできます CodeCatalyst。詳細については、プルリクエストのマージ (Git)「」および Git ドキュメントを参照してください。

test ブランチからmainブランチに変更をマージすると、変更によって変更が構築およびデプロイされるApplicationDeploymentPipelineワークフローが自動的に開始されます。

ワークフローでマージされたコミットの実行を確認するには ApplicationDeploymentPipeline
  1. ナビゲーションペインで CI/CD を選択し、ワークフロー を選択します。

  2. ワークフロー で、 でApplicationDeploymentPipeline最近の実行 を展開します。マージコミットによって開始されたワークフロー実行を確認できます。オプションでこれを選択して、実行の進行状況を確認します。

  3. 実行が完了したら、前にアクセスした URL を再ロードします。ペガサスを表示して、経過時間が変更されたことを確認します。

    マージ、構築、デプロイされたコード変更がアプリケーションに表示される

ステップ 8: 問題を閉じる

問題が解決されると、 CodeCatalyst コンソールで閉じることができます。

プロジェクトの問題をクローズするには
  1. プロジェクトに移動します。

  2. ナビゲーションペインで、問題 を選択します。

  3. rag-and-drop 「完了」列に問題があります。

詳細については、「で問題のある作業を追跡して整理する CodeCatalyst」を参照してください。

リソースをクリーンアップする

CodeCatalyst および でクリーンアップ AWS して、このチュートリアルのトレースを環境から削除します。

このチュートリアルで使用したプロジェクトを引き続き使用するか、プロジェクトとそれに関連するリソースを削除するかを選択できます。

注記

このプロジェクトを削除すると、すべてのメンバーのプロジェクト内のすべてのリポジトリ、問題、アーティファクトが削除されます。

プロジェクトを削除するには
  1. プロジェクトに移動し、プロジェクト設定 を選択します。

  2. [General] (全般) タブを選択します。

  3. プロジェクト名で、プロジェクトの削除 を選択します。

AWS CloudFormation および Amazon S3 でリソースを削除するには
  1. スペースに追加したのと同じアカウント AWS Management Console で にサインインします CodeCatalyst。

  2. AWS CloudFormation サービスに移動します。

  3. mysfitsstring スタックを削除します。

  4. development-mysfitsstring スタックを削除します。

  5. CDKToolkit スタックを選択します (ただし、削除しないでください)。[リソース] タブを選択します。StagingBucket リンクを選択し、Amazon S3 のバケットとバケットコンテンツを削除します。

    注記

    このバケットを手動で削除しない場合、Modern 3 層ウェブアプリケーションのブループリントを再実行すると、エラーが表示されることがあります。

  6. (オプション) CDKToolkit スタックを削除します。

リファレンス

Modern の 3 層ウェブアプリケーションのブループリントは、 AWS クラウドの CodeCatalyst スペースとアカウントに AWS リソースをデプロイします。これらのリソースは次のとおりです。

  • CodeCatalyst スペース

    • 次のリソースを含む CodeCatalyst プロジェクト。

      • ソースリポジトリ – このリポジトリには、「Mysfits」ウェブアプリケーションのサンプルコードが含まれています。

      • ワークフロー — このワークフローは、デフォルトのブランチに変更が加えられるたびに Mysfits アプリケーションコードを構築してデプロイします。

      • 問題ボードとバックログ – このボードとバックログは、作業の計画と追跡に使用できます。

      • テストレポートスイート – このスイートには、サンプルコードに含まれる自動レポートが含まれています。

  • 関連付けられた で AWS アカウント

    • CDKToolkit スタック — このスタックは次のリソースをデプロイします。

      • Amazon S3 ステージングバケット、バケットポリシー、およびバケットの暗号化に使用される AWS KMS キー。

      • デプロイアクションの IAM デプロイロール。

      • AWS スタック内のリソースをサポートする IAM ロールとポリシー。

      注記

      CDKToolkit は、デプロイごとに破棄および再作成されません。これは、 をサポートするために各アカウントで開始されるスタックです AWS CDK。

    • development-mysfitsstringBackEnd スタック — このスタックは、次のバックエンドリソースをデプロイします。

      • Amazon API Gateway エンドポイント。

      • AWS スタック内のリソースをサポートする IAM ロールとポリシー。

      • AWS Lambda 関数とレイヤーは、最新のアプリケーション用のサーバーレスコンピューティングプラットフォームを提供します。

      • バケットデプロイと Lambda 関数の IAM ポリシーとロール。

    • mysfitsstring スタック — このスタックは AWS Amplify フロントエンドアプリケーションをデプロイします。

このチュートリアルの一部としてリソースが作成される AWS サービスの詳細については、以下を参照してください。

  • Amazon S3 – フロントエンドアセットをオブジェクトストレージサービスに保存するためのサービスで、業界最高レベルのスケーラビリティ、データの高可用性、セキュリティ、パフォーマンスを提供します。詳細については、Amazon S3ユーザーガイド」を参照してください。

  • Amazon API Gateway – REST、HTTP、API をあらゆる規模で作成、公開、保守、モニタリング、保護するためのサービス。詳細については、「API Gateway デベロッパーガイド WebSocket APIs 」を参照してください。

  • Amplify – フロントエンドアプリケーションをホストするためのサービス。詳細については、AWS Amplify 「ホスティングユーザーガイド」を参照してください。

  • AWS Cloud Development Kit (AWS CDK) – コードでクラウドインフラストラクチャを定義し、 を通じてプロビジョニングするためのフレームワーク AWS CloudFormation。 AWS CDK には AWS CDK 、 AWS CDK アプリケーションやスタックを操作するためのコマンドラインツールです。詳細については、「AWS Cloud Development Kit (AWS CDK) デベロッパーガイド」を参照してください。

  • Amazon DynamoDB — データを保存するためのフルマネージド NoSQL データベースサービス。詳細については、Amazon DynamoDB開発者ガイドを参照してください。

  • AWS Lambda – サーバーのプロビジョニングや管理を行わずに、高可用性コンピューティングインフラストラクチャでコードを呼び出すためのサービス。詳細については、「AWS Lambda デベロッパーガイド」を参照してください。

  • AWS IAM – AWS とそのリソースへのアクセスを安全に制御するためのサービス。詳細については、IAM ユーザーガイドを参照してください。