翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
CodeCatalyst ソースリポジトリと単一ページのアプリケーション設計図の開始方法
このチュートリアルのステップに従って、Amazon でソースリポジトリを操作する方法を学びます CodeCatalyst。
Amazon でソースリポジトリの使用を開始する最も簡単な方法は CodeCatalyst 、テンプレートを使用してプロジェクトを作成することです。テンプレートを使用してプロジェクトを作成すると、サンプルコードを含むソースリポジトリを含むリソースが自動的に作成されます。このリポジトリとコード例を使用して、次の方法について説明します。
-
プロジェクトのソースリポジトリを表示し、その内容を参照する
-
コードを操作できる新しいブランチを使用して開発環境を作成する
-
ファイルを変更し、変更をコミットしてプッシュする
-
プルリクエストを作成し、他のプロジェクトメンバーとコードの変更を確認します。
-
プルリクエストのソースブランチの変更を自動的に構築してテストするプロジェクトのワークフローを参照してください。
-
送信元ブランチから送信先ブランチに変更をマージし、プルリクエストを閉じます。
-
自動的に構築およびデプロイされたマージされた変更を確認する
このチュートリアルを最大限に活用するには、他のユーザーをプロジェクトに招待して、プルリクエストで協力できるようにします。また、問題の作成やプルリクエストへの関連付け CodeCatalyst、関連するワークフローの実行時の通知の設定やアラートの取得など、 の追加機能を調べることもできます。の詳細については、 CodeCatalyst「」を参照してください入門チュートリアル。
設計図を使用したプロジェクトの作成
プロジェクトの作成は、連携するための最初のステップです。ブループリントを使用してプロジェクトを作成できます。これにより、サンプルコードを含むソースリポジトリと、変更時にコードを自動的に構築してデプロイするワークフローも作成されます。このチュートリアルでは、単一ページのアプリケーション設計図で作成されたプロジェクトについて説明しますが、ソースリポジトリを持つプロジェクトの手順に従います。プロジェクトの作成の一環として IAM ロールを選択したり、 ロールがない場合は、必ず IAMロールを追加してください。を使用することをお勧めします。 CodeCatalystWorkflowDevelopmentRole-spaceName
このプロジェクトの サービスロール。
既にプロジェクトがある場合は、「」にスキップできますプロジェクトのリポジトリの表示。
注記
Space 管理者または Power ユーザーロールを持つユーザーのみが、 でプロジェクトを作成できます CodeCatalyst。このロールがなく、このチュートリアルで作業するプロジェクトが必要な場合は、これらのロールのいずれかを持つユーザーにプロジェクトを作成して、作成したプロジェクトに追加してもらいます。詳細については、「ユーザーロールによるアクセスの許可」を参照してください。
ブループリントを使用してプロジェクトを作成するには
-
CodeCatalyst コンソールで、プロジェクトを作成するスペースに移動します。
-
スペースダッシュボードで、[プロジェクトの作成] を選択します。
-
設計図 で開始 を選択します。
ヒント
Amazon Q に設計図を提案させるプロジェクト要件を Amazon Q に与えることで、設計図を追加することを選択できます。詳細については、「プロジェクトの作成時または機能の追加時に Amazon Q を使用してブループリントを選択する」および「Amazon Q を使用してプロジェクトを作成したり、ブループリントで機能を追加したりする際のベストプラクティス」を参照してください。この機能は、米国西部 (オレゴン) リージョンでのみ使用できます。
この機能を使用するには、空間に対して生成 AI 機能を有効にする必要があります。詳細については、「生成 AI 機能の管理」を参照してください。
-
CodeCatalyst ブループリントまたはスペースブループリントタブからブループリントを選択し、次へ を選択します。
-
「プロジェクトの名前」に、プロジェクトに割り当てる名前とそれに関連するリソース名を入力します。名前はスペース内で一意でなければなりません。
-
(オプション) デフォルトでは、ブループリントによって作成されたソースコードはリポジトリに 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 ユーザーを選択します。
-
-
プロジェクトリソース で、設計図パラメータを設定します。設計図によっては、ソースリポジトリ名に名前を付けるオプションがある場合があります。
-
(オプション) 行ったプロジェクトパラメータの選択に基づいて更新を含む定義ファイルを表示するには、「プロジェクトプレビューの生成」から「コードを表示」または「ワークフローを表示」を選択します。
-
(オプション) 設計図のカードから詳細を表示 を選択すると、設計図のアーキテクチャの概要、必要な接続とアクセス許可、設計図が作成するリソースの種類など、設計図に関する特定の詳細が表示されます。
-
[プロジェクトを作成] を選択します。
プロジェクト概要ページは、プロジェクトを作成するか、プロジェクトへの招待を承諾してサインインプロセスを完了するとすぐに開きます。新しいプロジェクトのプロジェクト概要ページには、未解決の問題やプルリクエストはありません。オプションで、問題を作成して自分に割り当てることもできます。また、他のユーザーをプロジェクトに招待することもできます。詳細については、「での問題の作成 CodeCatalyst」および「プロジェクトへのユーザーの招待」を参照してください。
プロジェクトのリポジトリの表示
プロジェクトのメンバーとして、プロジェクトのソースリポジトリを表示できます。追加のリポジトリを作成することもできます。Space 管理者ロールを持つユーザーがリポジトリ 、Bitbucket GitHub リポジトリ 、またはリポジトリGitLab 拡張をインストールして設定している場合は、 GitHub アカウント、Bitbucket ワークスペース、または拡張用に設定された GitLab ユーザー内のサードパーティーリポジトリへのリンクを追加することもできます。 詳細については、「ソースリポジトリの作成」および「クイックスタート: 拡張機能のインストール、プロバイダーの接続、 でのリソースのリンク CodeCatalyst」を参照してください。
注記
単一ページのアプリケーション設計図で作成されたプロジェクトの場合、サンプルコードを含むソースリポジトリのデフォルト名は です。 spa-app
.
プロジェクトのソースリポジトリに移動するには
-
プロジェクトに移動し、次のいずれかを実行します。
プロジェクトの概要ページで、リストから目的のリポジトリを選択し、リポジトリの表示 を選択します。
-
ナビゲーションペインで [コード] を選択してから、[ソースリポジトリ] を選択します。ソースリポジトリ で、リストからリポジトリの名前を選択します。リポジトリのリストをフィルタリングするには、フィルターバーにリポジトリ名の一部を入力します。
-
リポジトリのホームページで、リポジトリの内容と、プルリクエストやワークフローの数など、関連するリソースに関する情報を表示します。デフォルトでは、デフォルトのブランチの内容が表示されます。ビューを変更するには、ドロップダウンリストから別のブランチを選択します。
リポジトリの概要ページには、このリポジトリとそのファイルのブランチ用に設定されたワークフローとプルリクエストに関する情報が含まれています。プロジェクトを作成したばかりの場合、コードを構築、テスト、デプロイするための初期ワークフローは、完了するまで数分かかるため、引き続き実行されます。関連するワークフローとそのステータスを表示するには、関連するワークフロー の下にある番号を選択しますが、CI/CD のワークフローページが開きます。このチュートリアルでは、概要ページにとどまり、リポジトリ内のコードを調べます。README.md
ファイルの内容は、このページのリポジトリファイルの下にある でレンダリングされます。ファイル には、デフォルトのブランチの内容が表示されます。ファイルビューを変更して、別のブランチの内容がある場合はそれを表示できます。.codecatalyst
フォルダには、ワークフローYAMLファイルなど、プロジェクトの他の部分に使用されるコードが含まれています。
フォルダの内容を表示するには、フォルダ名の横にある矢印を選択して展開します。例えば、 の横にある矢印を選択すると、そのフォルダに含まれる単一ページのウェブアプリケーションのファイルsrc
が表示されます。ファイルの内容を表示するには、リストから選択します。これにより、ビューファイル が開き、複数のファイルの内容を参照できます。コンソールで 1 つのファイルを編集することもできますが、複数のファイルを編集するには、開発環境を作成します。
開発環境の作成
Amazon CodeCatalyst コンソールのソースリポジトリでファイルを追加および変更できます。ただし、複数のファイルやブランチを効果的に操作するには、開発環境を使用するか、ローカルコンピュータにリポジトリをクローンすることをお勧めします。このチュートリアルでは、 という名前のブランチを使用して AWS Cloud9 開発環境を作成しますdevelop
。別のブランチ名を選択できますが、ブランチに という名前を付けるとdevelop
、このチュートリアルの後半でプルリクエストを作成するときに、ワークフローが自動的に実行され、コードの構築とテストが行われます。
ヒント
開発環境を使用する代わりに、または使用に加えてリポジトリのクローンをローカルで作成する場合は、ローカルコンピュータに Git があるか、 に Git IDEが含まれていることを確認してください。詳細については、「ソースリポジトリを操作するための のセットアップ」を参照してください。
新しいブランチを使用して開発環境を作成するには
https://codecatalyst.aws/
で CodeCatalyst コンソールを開きます。 開発環境を作成するプロジェクトに移動します。
プロジェクトのソースリポジトリのリストからリポジトリの名前を選択します。または、ナビゲーションペインでコード を選択し、ソースリポジトリ を選択し、開発環境を作成するリポジトリを選択します。
リポジトリのホームページで、開発環境の作成 を選択します。
サポートされている をドロップダウンメニューIDEから選択します。詳細については、「開発環境でサポートされている統合開発環境」を参照してください。
クローンするリポジトリを選択し、[新しいブランチで作業する] を選択し、[ブランチ名] フィールドにブランチ名を入力し、[ブランチの作成元] ドロップダウンメニューから新しいブランチを作成するブランチを選択します。
オプションで、開発環境のエイリアスを追加します。
オプションで、[開発環境設定] 編集ボタンを選択して、開発環境のコンピューティング、ストレージ、またはタイムアウト設定を編集します。
[作成] を選択します。開発環境の作成中は、開発環境のステータス列に [開始中] と表示され、開発環境が作成されると、ステータス列に [実行中] と表示されます。IDE 選択した で開発環境を含む新しいタブが開きます。コードを編集し、変更をコミットしてプッシュできます。
開発環境を作成したら、ファイルを編集し、変更をコミットして、変更をtest
ブランチにプッシュできます。このチュートリアルでは、 src
フォルダ内の App.tsx
ファイル内の<p>
タグ間のコンテンツを編集して、ウェブページに表示されるテキストを変更します。変更をコミットしてプッシュし、 CodeCatalyst タブに戻ります。
AWS Cloud9 開発環境から変更を加えてプッシュするには
-
で AWS Cloud9、サイドナビゲーションメニューを展開してファイルを参照します。を展開し
src
、 を開きますApp.tsx
。 -
<p>
タグ内のテキストを変更します。 -
ファイルを保存し、Git メニューを使用して変更をコミットしてプッシュします。または、ターミナルウィンドウで、 および git push コマンドを使用して変更をコミットgit commitしてプッシュします。
git commit -am "Making an example change" git push
ヒント
Git コマンドを正常に実行する前に、ターミナルのディレクトリを Git リポジトリディレクトリに変更する必要がある場合があります。
プルリクエストの作成
プルリクエストを使用して、リリースされたソフトウェアのマイナーな変更や修正、主要な機能の追加、または新しいバージョンについて、コードの変更を共同で確認できます。このチュートリアルでは、 に加えた変更を確認するプルリクエストを作成します。test
ブランチとメインブランチの比較。テンプレートを使用して作成されたプロジェクトでプルリクエストを作成すると、関連するワークフローの実行も開始されます。
プルリクエストを作成するには
-
プロジェクトに移動します。
-
次のいずれかを行います。
-
ナビゲーションペインで、コード を選択し、プルリクエスト を選択し、プルリクエストの作成 を選択します。
-
リポジトリのホームページで、「その他」を選択し、「プルリクエストの作成」を選択します。
-
プロジェクトページで、プルリクエストの作成 を選択します。
-
-
ソースリポジトリ で、指定されたソースリポジトリがコミットされたコードを含むリポジトリであることを確認します。このオプションは、リポジトリのメインページからプルリクエストを作成していない場合にのみ表示されます。
-
送信先ブランチ で、レビュー後にコードをマージするブランチを選択します。
-
ソースブランチ で、コミットされたコードを含むブランチを選択します。
-
プルリクエストのタイトル に、他のユーザーがレビューする必要がある内容と理由を理解するのに役立つタイトルを入力します。
-
(オプション) プルリクエストの説明 で、問題へのリンクや変更の説明などの情報を入力します。
ヒント
プルリクエストに含まれる変更の説明 CodeCatalyst を自動的に生成するには、説明の書き込み を選択します。プルリクエストに追加した後、自動的に生成された説明を変更できます。
この機能を使用するには、生成 AI 機能がスペースに対して有効になっており、リンクされたリポジトリのプルリクエストでは使用できません。詳細については、「生成 AI 機能の管理」を参照してください。
-
(オプション) 問題 で問題 をリンク を選択し、リストから問題を選択するか、その ID を入力します。問題のリンクを解除するには、リンク解除アイコンを選択します。
-
(オプション) 必要なレビューワー で、必要なレビューワーを追加 を選択します。プロジェクトメンバーのリストから選択して追加します。必要なレビューワーは、プルリクエストを送信先ブランチにマージする前に、変更を承認する必要があります。
注記
レビューワーを必要なレビューワーとオプションのレビューワーの両方として追加することはできません。自分自身をレビューワーとして追加することはできません。
-
(オプション) オプションのレビューワー で、オプションのレビューワーを追加 を選択します。プロジェクトメンバーのリストから選択して追加します。オプションのレビューワーは、プルリクエストを送信先ブランチにマージする前に、変更を要件として承認する必要はありません。
-
ブランチの違いを確認します。プルリクエストに表示される違いは、ソースブランチのリビジョンと、プルリクエストの作成時の宛先ブランチのヘッドコミットであるマージベースとの間の変更です。変更が表示されない場合、ブランチは同じであるか、送信元と送信先の両方に同じブランチを選択している可能性があります。
-
プルリクエストにレビューするコードと変更が含まれていることを確認したら、「 の作成」を選択します。
注記
プルリクエストを作成したら、コメントを追加できます。コメントは、プルリクエスト、またはファイル内の個々の行、およびプルリクエスト全体に追加できます。ファイルなどのリソースへのリンクを追加するには、@ 記号の後にファイルの名前を付けます。
このプルリクエストの作成によって開始された関連するワークフローに関する情報を表示するには、概要を選択し、ワークフロー実行のプルリクエストの詳細エリアの情報を確認します。ワークフロー実行を表示するには、実行を選択します。
ヒント
ブランチに 以外の名前を付けた場合develop
、変更を構築してテストするためのワークフローは自動的に実行されません。これを設定する場合は、onPullRequestBuildAndTestワークフローの YAML ファイルを編集します。詳細については、「ワークフローの作成」を参照してください。
このプルリクエストにコメントし、他のプロジェクトメンバーにコメントを求めることができます。オプションまたは必要なレビューワーを追加または変更することもできます。リポジトリのソースブランチをさらに変更することを選択し、コミットされた変更がプルリクエストのリビジョンを作成する方法を確認できます。詳細については、、プルリクエストの確認、プルリクエストの更新、Amazon でのプルリクエストによるコードの確認 CodeCatalystおよび を参照してくださいワークフローの実行ステータスと詳細の表示。
プルリクエストのマージ
プルリクエストがレビューされ、必要なレビューワーから承認を受けたら、そのソースブランチをコンソールの送信先ブランチに CodeCatalystマージできます。プルリクエストをマージすると、送信先ブランチに関連付けられたワークフローを通じて変更の実行も開始されます。このチュートリアルでは、テストブランチを main にマージし、onPushToMainDeployPipelineワークフローの実行を開始します。
プルリクエストをマージするには (コンソール)
-
プルリクエスト で、前のステップで作成したプルリクエストを選択します。プルリクエストで、「マージ」を選択します。
-
プルリクエストに使用できるマージ戦略から選択します。オプションで、プルリクエストをマージした後にソースブランチを削除するオプションを選択または選択解除し、マージを選択します。マージが完了すると、プルリクエストのステータスが Merged に変わり、プルリクエストのデフォルトビューに表示されなくなります。デフォルトのビューには、ステータスが Open のプルリクエストが表示されます。マージされたプルリクエストは引き続き表示できますが、承認やステータスの変更はできません。
注記
マージボタンがアクティブでない場合、またはマージ不可ラベルが表示される場合は、必要なレビューワーがプルリクエストをまだ承認していないか、 CodeCatalyst コンソールでプルリクエストをマージできません。プルリクエストを承認していないレビューワーは、プルリクエストの詳細エリアの概要のクロックアイコンで示されます。必要なレビューワーがすべてプルリクエストを承認したが、マージボタンがまだアクティブでない場合、マージの競合が発生したり、スペースのストレージクォータを超えたりする可能性があります。開発環境の送信先ブランチのマージ競合を解決し、変更をプッシュしてからプルリクエストをマージするか、競合を解決してローカルにマージしてから、マージを含むコミットを にプッシュできます CodeCatalyst。詳細については、プルリクエストのマージ (Git)「」および Git ドキュメントを参照してください。
デプロイされたコードの表示
ここで、デフォルトブランチに最初にデプロイされたコードと、マージされた変更が自動的に構築、テスト、デプロイされたら、それらを表示する番です。これを行うには、リポジトリの概要ページに戻り、関連するワークフローアイコンの横にある番号を選択するか、ナビゲーションペインで CI/CD を選択し、ワークフロー を選択します。
デプロイされたコードを表示するには
-
ワークフロー で、 で
onPushToMainDeployPipeline
、最近の実行 を展開します。注記
これは、単一ページのアプリケーションブループリントで作成されたプロジェクトのワークフローのデフォルト名です。
-
最新の実行は、マージされたプルリクエストコミットによって
main
ブランチに開始された実行であり、おそらく進行中 のステータスが表示されます。リストから正常に完了した実行を選択して、その実行の詳細を開きます。 -
変数 を選択します。AppURL の値をコピーします。これは、デプロイされた単一ページウェブアプリケーションの URL です。新しいブラウザタブを開き、 値に貼り付けて、ビルドおよびデプロイされたコードを表示します。タブは開いたままにします。
-
ワークフロー実行のリストに戻り、最新の実行が完了するまで待ちます。その場合は、開いたタブに戻り、ウェブアプリケーションを表示し、ブラウザを更新します。マージされたプルリクエストで行った変更が表示されます。
リソースのクリーンアップ
ソースリポジトリとプルリクエストの使用を検討したら、不要なリソースを削除できます。プルリクエストは削除できませんが、閉じることができます。作成したブランチはすべて削除できます。
ソースリポジトリまたはプロジェクトが不要になった場合は、それらのリソースを削除することもできます。詳細については、「ソースリポジトリの削除」および「プロジェクトの削除」を参照してください。