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

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

CodeCatalyst ソースリポジトリと 1 ページのアプリケーション設計図の開始方法

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

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

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

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

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

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

  • プルリクエストのソースブランチの変更を自動的に構築してテストするプロジェクトのワークフローを参照してください。

  • ソースブランチから宛先ブランチに変更をマージし、プルリクエストを閉じます。

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

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

ブループリントを使用したプロジェクトの作成

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

既にプロジェクトがある場合は、 にスキップできますプロジェクトのリポジトリの表示。

注記

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

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

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

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

  3. ブループリント で開始 を選択します。

    ヒント

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

    この機能を使用するには、空間に対して生成 AI 機能を有効にする必要があります。詳細については、「生成 AI 機能の管理」を参照してください。

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

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

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

    重要

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

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

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

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

      詳細ドロップダウンメニューを選択し、リポジトリプロバイダーとして を選択し GitHub、設計図によって作成されたソースコードを保存する GitHub アカウントを選択します。

      注記

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

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

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

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

      詳細ドロップダウンメニューを選択し、リポジトリプロバイダーとして を選択し GitLab、設計図によって作成されたソースコードを保存する GitLab ユーザーを選択します。

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

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

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

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

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

プロジェクトのリポジトリの表示

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

注記

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

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

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

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

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

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

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

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

開発環境の作成

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

ヒント

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

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

  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 push コマンドを使用して変更をコミットgit commitしてプッシュします。

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

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

プルリクエストの作成

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

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

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

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

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

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

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

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

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

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

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

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

    ヒント

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

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

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

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

    注記

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

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

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

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

    注記

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

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

ヒント

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

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

プルリクエストのマージ

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

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

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

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

    注記

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

デプロイされたコードの表示

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

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

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

    注記

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

  2. 最新の実行は、マージされたプルリクエストのコミットによってmainブランチに開始された実行であり、 のステータスが進行中 と表示される可能性があります。リストから正常に完了した実行を選択して、その実行の詳細を開きます。

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

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

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

ソースリポジトリとプルリクエストの使用を検討したら、不要なリソースを削除できます。プルリクエストは削除できませんが、閉じることができます。作成したブランチはすべて削除できます。

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