CodeCatalyst ソースリポジトリとシングルページアプリケーションのブループリントの使い方 - Amazon CodeCatalyst
ブループリントを使用してプロジェクトを作成するプロジェクトのリポジトリを表示する開発環境の作成プルリクエストの作成プルリクエストをマージするデプロイされたコードを表示するリソースのクリーンアップ

CodeCatalyst ソースリポジトリとシングルページアプリケーションのブループリントの使い方

このチュートリアルのステップに従って、Amazon CodeCatalyst でソースリポジトリを操作する方法について説明します。

Amazon CodeCatalyst でソースリポジトリの使用を開始する最も簡単な方法は、テンプレートを使用してプロジェクトを作成することです。テンプレートを使用してプロジェクトを作成すると、サンプルコードを含むソースリポジトリがあるリソースが作成されます。このリポジトリとコードの例を使用して、次を実行する方法について説明します。

  • プロジェクトのソースリポジトリを表示し、その内容を参照する

  • コードで作業できる新しいブランチを使用して開発環境を作成する

  • ファイルを変更し、変更をコミットしてプッシュする

  • プルリクエストを作成し、他のプロジェクトメンバーとコードの変更を確認する

  • プルリクエストの送信元ブランチの変更を自動的に構築してテストするプロジェクトのワークフローを確認する

  • 送信元ブランチから送信先ブランチに変更をマージし、プルリクエストをクローズする

  • マージされた変更が自動的に構築およびデプロイされたことを確認する

このチュートリアルを最大限に活用するには、プルリクエストで協働できるように、他のユーザーをプロジェクトに招待します。CodeCatalyst で、問題の作成やプルリクエストとの関連付け、関連するワークフローの実行時の通知の設定やアラートの取得など、その他の機能を調べることもできます。CodeCatalyst の詳細については、「入門チュートリアル」を参照してください。

ブループリントを使用してプロジェクトを作成する

プロジェクトの作成は、協働するための最初のステップです。ブループリントを使用してプロジェクトを作成できます。これにより、サンプルコードを含むソースリポジトリと、変更時にコードを自動的に構築してデプロイするワークフローも作成されます。このチュートリアルでは、単一ページのアプリケーションブループリントで作成されたプロジェクトについて説明しますが、ソースリポジトリがあるプロジェクトの手順に従うことができます。IAM ロールを選択するか、プロジェクトの作成の一環として IAM ロールがない場合は、IAM ロールを追加します。このプロジェクトの CodeCatalystWorkflowDevelopmentRole-spaceName サービスロールを使用することが推奨されます。

プロジェクトがすでに存在する場合は、プロジェクトのリポジトリを表示する に進みます。

注記

スペース管理者またはパワーユーザーロールが付与されているユーザーのみが CodeCatalyst でプロジェクトを作成できます。このロールが付与されていない場合で、このチュートリアルで作業するプロジェクトが必要な場合は、これらのロールのいずれかが付与されているユーザーにプロジェクトを作成して、作成したプロジェクトに追加してもらうよう依頼します。詳細については、「ユーザーロールによってアクセス権を付与する」を参照してください。

ブループリントを使用してプロジェクトを作成する

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

  2. スペースダッシュボードで、[プロジェクトの作成] を選択します。

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

    ヒント

    ブループリントを追加するには、Amazon Q にプロジェクト要件を入力すると、Amazon Q がブループリントを提案します。詳細については、「プロジェクトの作成時または機能の追加時に Amazon Q を使用してブループリントを選択する」と「Amazon Q を使用したプロジェクトの作成やブループリントの機能追加のベストプラクティス」を参照してください。この機能は、米国西部 (オレゴン) リージョンでのみ利用可能です。

    この機能を使用するには、スペースに対して生成 AI 機能を有効にする必要があります。詳細については、「Managing generative AI features」を参照してください。

  4. [CodeCatalyst ブループリント] タブまたは [スペースブループリント] タブで、ブループリントを選択し、[次へ] を選択します。

  5. [プロジェクトに名前を付ける] で、プロジェクトに割り当てる名前と、関連するリソース名を入力します。名前はスペース内で一意でなければなりません。

  6. (オプション) デフォルトでは、ブループリントが作成したソースコードは CodeCatalyst リポジトリに保存されます。または、ブループリントのソースコードをサードパーティーリポジトリに保存することもできます。詳細については、「CodeCatalyst で拡張機能を持つプロジェクトに機能を追加する」を参照してください。

    重要

    CodeCatalyst は、リンクされたリポジトリのデフォルトブランチの変更の検出をサポートしていません。リンクされたリポジトリのデフォルトブランチを変更するには、まず CodeCatalyst からリンクを解除し、デフォルトブランチを変更してから再度リンクする必要があります。詳細については、「CodeCatalyst での GitHub リポジトリ、Bitbucket リポジトリ、GitLab プロジェクトリポジトリ、および Jira プロジェクトのリンク」を参照してください。

    ベストプラクティスとして、リポジトリをリンクする前に、必ず最新バージョンの拡張機能があることを確認してください。

    使用するサードパーティーリポジトリプロバイダーに応じて、次のいずれかを実行します。

    • GitHub リポジトリ: GitHub アカウントを接続します。

      [高度] ドロップダウンメニューから、リポジトリプロバイダーとして GitHub を選択し、ブループリントによって作成されたソースコードを保存する GitHub アカウントを選択します。

      注記

      GitHub アカウントに接続している場合は、CodeCatalyst ID と GitHub ID 間の ID マッピングを確立するための個人用接続を作成する必要があります。詳細については、「個人用接続」と「個人接続を使用して GitHub リソースにアクセスする」を参照してください。

    • Bitbucket リポジトリ: Bitbucket ワークスペースを接続します。

      [高度] ドロップダウンメニューから、リポジトリプロバイダーとして Bitbucket を選択し、ブループリントによって作成されたソースコードを保存する Bitbucket ワークスペースを選択します。

    • GitLab リポジトリ: GitLab ユーザーを接続します。

      [高度] ドロップダウンメニューから、リポジトリプロバイダーとして GitLab を選択し、ブループリントによって作成されたソースコードを保存する GitLab アカウントを選択します。

  7. [プロジェクトリソース] で、ブループリントパラメータを設定します。ブループリントによっては、ソースリポジトリ名に名前を付けるオプションがある場合があります。

  8. (オプション) 選択したプロジェクトパラメータに基づいて更新を伴う定義ファイルを表示するには、[プロジェクトプレビューを生成] から [コードを表示] または [ワークフローを表示] を選択します。

  9. (オプション) ブループリントのカードから [詳細を表示] を選択すると、ブループリントのアーキテクチャの概要、必要な接続とアクセス許可、ブループリントで作成されるリソースの種類など、そのブループリントに関する具体的な情報が表示されます。

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

[プロジェクトの概要] ページは、プロジェクトを作成するか、プロジェクトへの招待を承認し、サインインプロセスを完了するとすぐに開きます。新しいプロジェクトの [プロジェクト概要] ページには、未解決の問題やプルリクエストは記載されません。オプションで、問題を作成して自分に割り当てることもできます。また、プロジェクトに他のユーザーを招待することもできます。詳細については、「CodeCatalyst で問題を作成する」と「プロジェクトへのユーザーの招待」を参照してください。

プロジェクトのリポジトリを表示する

プロジェクトのメンバーとして、プロジェクトのソースリポジトリを表示できます。追加のリポジトリを作成することもできます。スペース管理者ロールが付与されているユーザーが、GitHub リポジトリ、Bitbucket リポジトリ または GitLab リポジトリ拡張機能をインストールして設定した場合、拡張機能用に設定された GitHub アカウント、Bitbucket ワークスペースまたは GitLab ユーザーにサードパーティーリポジトリへのリンクを追加できます。詳細については、「ソースリポジトリを作成する」と「クイックスタート: CodeCatalyst での拡張機能のインストール、プロバイダーの接続、リソースのリンク」を参照してください。

注記

単一ページのアプリケーションブループリントで作成されたプロジェクトの場合、サンプルコードを含むソースリポジトリのデフォルト名は spa-app です。

プロジェクトのソースリポジトリに移動するには

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

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

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

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

リポジトリの [概要] ページには、このリポジトリとそのファイルのブランチ用に設定されたワークフローとプルリクエストに関する情報が記載されています。プロジェクトを作成したばかりの場合、コードを構築、テスト、デプロイするための初期ワークフローは、完了するまで数分かかるため、引き続き実行されます。関連するワークフローとそのステータスは、[関連するワークフロー] にある番号を選択して表示できますが、CI/CD の [ワークフロー] ページが開きます。このチュートリアルでは、[概要] ページにとどまり、リポジトリ内のコードを調べます。README.md ファイルの内容は、このページのリポジトリファイルでレンダリングされます。[ファイル] には、デフォルトブランチの内容が表示されます。別のブランチがある場合は、ファイルビューを変更すると、別のブランチの内容を表示できます。.codecatalyst フォルダには、ワークフロー YAML ファイルなど、プロジェクトの他の部分に使用されるコードが含まれています。

フォルダの内容を表示するには、フォルダ名の横にある矢印を選択してフォルダを展開します。例えば、src の横にある矢印を選択すると、そのフォルダに含まれる単一ページのウェブアプリケーションのファイルが表示されます。ファイルの内容を表示するには、リストから選択します。これにより、[ファイルを表示] が開き、複数のファイルの内容を参照できます。コンソールで 1 つのファイルを編集することもできますが、複数のファイルを編集するには、開発環境を作成します。

開発環境の作成

Amazon CodeCatalyst コンソールのソースリポジトリにファイルを追加および変更できます。ただし、複数のファイルやブランチを効果的に操作するには、開発環境を使用するか、ローカルコンピュータにリポジトリをクローンすることが推奨されます。このチュートリアルでは、develop という名前のブランチがある AWS Cloud9 開発環境を作成します。別のブランチ名を選択できますが、ブランチ develop に名前を付けると、このチュートリアルの後半でプルリクエストを作成するときに、ワークフローが自動的に実行され、コードの構築とテストが行われます。

ヒント

開発環境の代わりに、または開発環境の使用に加えてリポジトリをローカルでクローンする場合は、ローカルコンピュータに Git がある、または IDE に Git が含まれていることを確認します。詳細については、「ソースリポジトリを使用するための設定を行う」を参照してください。

新しいブランチで開発環境を作成するには

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

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

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

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

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

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

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

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

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

開発環境を作成したら、ファイルを編集し、変更をコミットし、変更を test ブランチにプッシュできます。このチュートリアルでは、src フォルダの App.tsx ファイル内の <p> タグ間のコンテンツを編集して、ウェブページに表示されるテキストを変更します。変更をコミットしてプッシュしたら、[CodeCatalyst] タブに戻ります。

AWS Cloud9 開発環境から変更を加えてプッシュする

  1. AWS Cloud9 で、サイドナビゲーションメニューを展開してファイルを参照します。src を展開して、App.tsx を開きます。

  2. <p> タグ内のテキストを変更します。

  3. ファイルを保存し、Git メニューを使用して変更をコミットしてプッシュします。または、ターミナルウィンドウで、git commit および git push コマンドを使用して変更をコミットしてプッシュします。

    git commit -am "Making an example change"
git push
    ヒント

    Git コマンドを正常に実行する前に、ターミナルのディレクトリを Git リポジトリディレクトリに変更する必要がある場合があります。

プルリクエストの作成

プルリクエストを使用すると、わずかな変更や修正、主要な機能の追加、リリースされたソフトウェアの新しいバージョンのコード変更を共同で確認できます。このチュートリアルでは、メインブランチと比較してテストブランチに加えた変更を確認するプルリクエストを作成します。テンプレートを使用して作成されたプロジェクトでプルリクエストを作成すると、関連するワークフローがある場合は、そのワークフローも実行されます。

プルリクエストを作成するには

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

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

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

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

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

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

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

  5. [送信元ブランチ] でコミットしたコードを含むブランチを選択します。

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

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

    ヒント

    [説明を記述する] を選択すると、プルリクエストに含まれる変更の説明を CodeCatalyst が自動生成します。自動的に生成された説明をプルリクエストに追加した後に、その説明を変更できます。

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

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

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

    注記

    同じレビュアーを必須のレビュアーとオプションのレビュアーの両方に追加することはできません。自分をレビュアーとして追加することはできません。

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

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

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

    注記

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

このプルリクエストの作成によって開始された関連するワークフローに関する情報を表示するには、[概要] を選択し、[ワークフロー実行] の [プルリクエストの詳細] 領域の情報を確認します。ワークフロー実行を表示するには、[実行] を選択します。

ヒント

ブランチに develop 以外の名前を付けた場合、ワークフローが自動的に実行されて変更が構築およびテストされることはありません。これを設定する場合は、onPullRequestBuildAndTest ワークフローの YAML ファイルを編集します。詳細については、「ワークフローの作成」を参照してください。

このプルリクエストにコメントし、他のプロジェクトメンバーにコメントを求めることができます。オプションまたは必須のレビュアーを追加または変更することもできます。リポジトリの送信元ブランチはさらに変更でき、これらのコミットされた変更がプルリクエストのリビジョンを作成する方法を確認できます。詳細については、「プルリクエストのレビュー」、「プルリクエストの更新」、「Amazon CodeCatalyst でプルリクエストを用いてコードをレビューする」、および「ワークフロー実行のステータスと詳細の表示」を参照してください。

プルリクエストをマージする

プルリクエストがレビューされ、必須のレビュアーから承認を受けたら、CodeCatalyst コンソールで送信元ブランチを送信先ブランチにマージできます。プルリクエストをマージすると、送信先ブランチに関連付けられたワークフロー経由で変更の実行も開始されます。このチュートリアルでは、テストブランチをメインにマージし、onPushToMainDeployPipeline ワークフローの実行を開始します。

プルリクエストをマージする (コンソール)

  1. [プルリクエスト] で、前のステップで作成したプルリクエストを選択します。プルリクエストで、[マージ] を選択します。

  2. プルリクエストに使用可能なマージ戦略のいずれかを選択します。必要に応じて、プルリクエストをマージした後に送信元ブランチを削除するオプションを選択または選択解除し、[マージ] を選択します。マージが完了すると、プルリクエストのステータスは [マージ済み] に変わり、プルリクエストのデフォルトビューに表示されなくなります。デフォルトビューには、ステータスが [オープン] のプルリクエストが表示されます。マージされたプルリクエストは引き続き表示できますが、承認したり、ステータスを変更したりすることはできません。

    注記

    [マージ] ボタンが有効化されていない、または[マージ不可] ラベルが表示されている場合は、必須のレビュアーがまだプルリクエストを承認していないか、CodeCatalyst コンソールでプルリクエストをマージできない状態です。プルリクエストを承認していないレビュアーは、[プルリクエストの詳細] 領域の[概要] で時計アイコンで示されます。すべての必須のレビュアーがプルリクエストを承認したが、[マージ] ボタンがまだ有効でない場合、マージに矛盾があるか、スペースのストレージクォータを超えている場合があります。開発環境の送信先ブランチのマージの矛盾を解消し、変更をプッシュしてプルリクエストをマージするか、矛盾を解消し、ローカルにマージしてから、マージを含むコミットを CodeCatalyst にプッシュします。詳細については、「プルリクエストのマージ (Git)」または Git ドキュメントを参照してください。

デプロイされたコードを表示する

ここでは、デフォルトブランチに元々デプロイされていたコードと、自動的にビルド、テスト、デプロイされてマージされた変更を表示します。これを行うには、リポジトリの [概要] ページに戻り、関連するワークフローアイコンの横にある番号を選択するか、ナビゲーションペインで [CI/CD] > [ワークフロー] の順に選択します。

デプロイされたコードを表示する

  1. onPushToMainDeployPipeline の [ワークフロー] で、[最新の実行] を展開します。

    注記

    これは、単一ページアプリケーションブループリントで作成されたプロジェクトのワークフローのデフォルト名です。

  2. 最新の実行は、main ブランチへのマージされたプルリクエストコミットによって開始された実行であり、ほとんどの場合 [進行中] の状態で表示されます。リストから正常に完了した実行を選択して、その実行の詳細を開きます。

  3. [変数] を選択します。AppURL の値をコピーします。これは、デプロイされた単一ページウェブアプリケーションの URL です。新しいブラウザタブを開き、値を貼り付けて、構築/デプロイされたコードを表示します。タブは開いたままにします。

  4. ワークフロー実行のリストに戻り、最新の実行が完了するまで待機します。完了したら、開いたタブに戻り、ウェブアプリケーションを表示し、ブラウザを更新します。マージされたプルリクエストで行った変更が表示されます。

リソースのクリーンアップ

ソースリポジトリとプルリクエストの作業方法を把握したら、不要なリソースを削除できます。プルリクエストは削除できませんが、クローズできます。作成したブランチはすべて削除できます。

ソースリポジトリまたはプロジェクトが不要になった場合は、それらのリソースを削除することもできます。詳細については、「ソースリポジトリを削除する」と「プロジェクトの削除」を参照してください。