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. [プロジェクトを作成] を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 リポジトリディレクトリに変更する必要がある場合があります。

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

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

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

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

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

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

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

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

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

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

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

   ヒント

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

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

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

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

   注記

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

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

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

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

    注記

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

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

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

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

   注記

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

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

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

   注記

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

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

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

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