チュートリアル:「Modern three-tier web application」ブループリントでプロジェクトを作成する

https://codecatalyst.aws/ で CodeCatalyst コンソールを開きます。

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

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

[ブループリントから始める] を選択します。

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

[Modern three-tier web application] ブループリントを選択し、[次へ] を選択します。

[プロジェクトに名前を付ける] でプロジェクトの名前を入力します。以下に例を示します。

MyExampleProject.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[問題の作成] を選択します。

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

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

[問題の作成] を選択します。問題がボードに表示されるようになりました。カードを選択して、問題を [進行中] の列に移動します。

プロジェクトに移動して、次のいずれかを実行します。

• プロジェクトの要約ページで、リストから必要なリポジトリを選択し、[リポジトリの表示] を選択します。

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

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

https://codecatalyst.aws/ で CodeCatalyst コンソールを開きます。

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

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

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

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

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

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

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

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

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

ファイルで、"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"
    },

ファイルを保存します。

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

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

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

CodeCatalyst コンソールのナビゲーションペインで [CI/CD]、[ワークフロー] の順に選択します。

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

ワークフローのリストを確認します。次の 4 つのワークフローが表示されているはずです。

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

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

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

[定義] タブ (上部付近) を選択します。[ワークフロー定義ファイル] が右側に表示されます。ファイルの主なセクション:

[最新の情報] タブ (上部付近) を選択し、ワークフロー図の任意のアクションを選択します。

右側の [設定] タブを選択すると、最新の実行時にこのアクションで使用された設定が表示されます。各設定は、ワークフロー定義ファイルのプロパティに対応しています。

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

[最新の状態] タブを選択します。

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

アクションが完了するまで待ちます。「進行中」アイコン ( ) が「成功」アイコン ( ) に変わるのを確認します。

[build_backend] アクションを選択します。

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

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

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

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

ApplicationDeploymentPipeline ワークフローに戻り、最新の実行の Run-string リンクを選択します。

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

Twilight Glitter という名前のペガサス Mysfit を検索します。年齢の値を書き留めます。6 です。年齢を更新するために、コードを変更します。

プロジェクトに移動します。

次のいずれかを行います：

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

• リポジトリのホームページで、[その他]、[プルリクエストの作成] の順に選択します。

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

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

[ターゲットブランチ] で、コードのレビュー後、マージ先となるブランチを選択します。

[ソースブランチ] でコミットしたコードを含むブランチを選択します。

[プルリクエストのタイトル] に、ユーザーが確認すべき内容と理由が理解しやすい件名を入力します。

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

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

(オプション) [必須のレビュアー] で、[必須のレビュアーを追加] を選択します。プロジェクトメンバーのリストから、追加するメンバーを選択します。プルリクエストをターゲットブランチにマージする前に、必須のレビュアーが変更を承認する必要があります。

(オプション) [任意のレビュアー] で、[任意のレビュアーを追加] を選択します。プロジェクトメンバーのリストから、追加するメンバーを選択します。プルリクエストをターゲットブランチにマージする前に、任意のレビュアーが変更を承認する必要はありません。

ブランチ間の違いをレビューします。プルリクエストに表示される違いは、ソースブランチのリビジョンと、マージベース (プルリクエストが作成された際のターゲットブランチのヘッドコミット) の間の変更です。変更が表示されない場合、ブランチがまったく同じであるか、ソースとターゲットの両方に同じブランチを選択している可能性があります。

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

モダンアプリケーションプロジェクトに移動します。

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

プルリクエストに使用可能なマージ戦略のいずれかを選択します。必要に応じて、プルリクエストをマージした後にソースブランチを削除するオプションを選択または選択解除し、[マージ] を選択します。

ナビゲーションペインで [CI/CD]、[ワークフロー] の順に選択します。

[ワークフロー] の [ApplicationDeploymentPipeline] で、[最近の実行] を展開します。マージコミットによって開始されたワークフロー実行を確認できます。実行を選択して、進行状況を監視することもできます。

実行が完了したら、以前アクセスした URL を再読み込みします。ペガサスを表示して、年齢が変更されたことを確認します。

プロジェクトに移動します。

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

問題を [完了] 列にドラッグアンドドロップします。

プロジェクトに移動し、[プロジェクト設定] を選択します。

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

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

CodeCatalyst スペースに追加したのと同じアカウント AWS Management Console で にサインインします。

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

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

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

CDKToolkit スタックを選択します (削除はしないでください)。[リソース] タブを選択してください。StagingBucket リンクをクリックし、Amazon S3 でバケットとバケットの内容を削除します。

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