チュートリアル: 構成可能なPDKブループリントを使用したフルスタックアプリケーションの作成

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

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

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

4. 設計図 で開始 を選択します。

5. PDK - モノレポの設計図を選択し、次へ を選択します。

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

7. プロジェクトリソース で、次の操作を行います。

   1. プライマリプログラミング言語 で、プロジェクトコードを開発する言語を選択します。 TypeScript、Java、または Python から選択できます。

   2. コード設定の選択

   3. ソースリポジトリのテキスト入力フィールドに、ソースリポジトリの名前を入力します。これにより、新しいリポジトリが作成されるか、既存のリンクされたリポジトリから選択します。既存のリポジトリは空である必要があります。詳細については、「ソースリポジトリのリンク」を参照してください。

   4. （オプション) パッケージマネージャーのドロップダウンメニューからパッケージマネージャーを選択します。これは、プライマリプログラミング言語 TypeScript として を選択した場合にのみ必要です。

8. （オプション) 行ったプロジェクトパラメータの選択に基づいて生成されるコードをプレビューするには、「プロジェクトプレビューの生成」から「コードを表示」を選択します。

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

10. モノレポプロジェクトを作成するには、プロジェクトの作成を選択します。作成されたルートレベルのプロジェクトは、モノレポ内のプロジェクト間の相互依存関係を管理し、ビルドキャッシュと依存関係の管理を提供します。

    プロジェクトのブループリントの詳細については、「」を参照してください CodeCatalyst ブループリントを使用した包括的なプロジェクトの作成。

1. モノレポプロジェクトのナビゲーションペインで、ブループリント を選択し、ブループリント を追加 を選択します。

2. PDK - 安全API設計図を選択し、次へ を選択します。

3. 「設計図の設定」で、設計図パラメータを設定します。

   • モデル言語 で、APIモデルが定義されている言語を選択します。

   • 名前空間テキスト入力フィールドに、 の名前空間を入力しますAPI。

   • API 名前テキスト入力フィールドに、 の名前を入力しますAPI。

   • CDK 言語 APIで、 をデプロイするCDKインフラストラクチャを記述する任意の言語を選択します。

   • ハンドラー言語 (複数可） ドロップダウンメニューを選択し、APIオペレーションのハンドラーを実装する言語を選択します。

   • ドキュメント形式 (複数可） ドロップダウンメニューを選択し、APIドキュメントの生成に使用する形式を選択します。

4. コード変更タブで、提案された変更を確認します。プルリクエストに表示される違いは、プルリクエストの作成時のプロジェクトへの変更を示しています。

5. ブループリントの適用時に提案された変更に満足したら、ブループリントの追加 を選択します。

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

   注記

   ブループリントは、プルリクエストが承認されてマージされるまで適用されません。詳細については、「プルリクエストの確認」および「プルリクエストのマージ」を参照してください。

6. Status 列から、「Pending pull request for the PDK - Type Safe API blueprint row」を選択し、開いているプルリクエストのリンクを選択します。

7. マージ を選択し、希望するマージ戦略を選択し、マージ を選択して適用されたブループリントからの変更を組み込みます。

   プルリクエストがマージされると、モノレポプロジェクト内に新しいpackages/apis/mypdkapiフォルダが生成されます。このフォルダには、設定されたタイプセーフ に関連するすべてのAPIソースコードが含まれますAPI。

8. ナビゲーションペインでブループリント を選択して、 PDK- タイプセーフAPIのステータスが最新 と表示されることを確認します。

1. モノレポプロジェクトのナビゲーションペインで、ブループリント を選択し、ブループリントの追加 を選択します。

2. PDK - Cloudscape React ウェブサイトの設計図を選択し、次へ を選択します。

3. 「設計図の設定」で、設計図パラメータを設定します。

   • ウェブサイト名テキスト入力フィールドに、ウェブサイトの名前を入力します。

   • Type Safe APIs ドロップダウンメニューを選択し、ウェブサイト内で統合するAPIブループリントを選択します。を渡すと、認証されたクライアントAPIが設定され、必要な依存関係、APIエクスプローラー、その他の機能が追加されます。

4. コード変更タブで、提案された変更を確認します。プルリクエストに表示される違いは、プルリクエストの作成時のプロジェクトへの変更を示しています。

5. ブループリントの適用時に提案された変更に満足したら、ブループリントの追加 を選択します。

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

   注記

   ブループリントは、プルリクエストが承認されてマージされるまで適用されません。詳細については、「プルリクエストの確認」および「プルリクエストのマージ」を参照してください。

6. ステータス 列から、 PDK - Cloudscape React ウェブサイトの設計図行のプルリクエストの保留中 を選択し、開いているプルリクエストのリンクを選択します。

7. マージ を選択し、希望するマージ戦略を選択し、マージ を選択して適用されたブループリントからの変更を組み込みます。

   プルリクエストがマージされると、モノレポプロジェクト内に新しいpackages/websites/my-website-nameフォルダが生成され、新しいウェブサイトのすべてのソースコードが含まれます。

8. ナビゲーションペインでブループリント を選択して、 PDK - Cloudscape React ウェブサイトのステータスに最新の が表示されることを確認します。

1. モノレポプロジェクトのナビゲーションペインで、ブループリント を選択し、ブループリントの追加 を選択します。

2. PDK - インフラストラクチャの設計図を選択し、次へ を選択します。

3. 「設計図の設定」で、設計図パラメータを設定します。

   • CDK 言語 で、インフラストラクチャを開発する言語を選択します。

   • スタック名テキスト入力フィールドに、設計図用に生成された CloudFormation スタックの名前を入力します。

     注記

     ワークフローを設定する次のステップでは、このスタック名に注意してください DevOps 。

   • Type Safe APIs ドロップダウンメニューを選択し、ウェブサイトに統合するAPIブループリントを選択します。

   • Cloudscape React TS Websites ドロップダウンメニューを選択し、インフラストラクチャ内にデプロイするウェブサイトの設計図を選択します (例: PDK - Cloudscape React Website ）。

4. コード変更タブで、提案された変更を確認します。プルリクエストに表示される違いは、プルリクエストの作成時のプロジェクトへの変更を示しています。

5. ブループリントの適用時に提案された変更に満足したら、ブループリントの追加 を選択します。

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

   注記

   ブループリントは、プルリクエストが承認されてマージされるまで適用されません。詳細については、「プルリクエストの確認」および「プルリクエストのマージ」を参照してください。

6. Status 列から、「Pending pull request for the PDK - Infrastructure blueprint row」を選択し、開いているプルリクエストのリンクを選択します。

7. マージ を選択し、希望するマージ戦略を選択し、マージ を選択して適用されたブループリントからの変更を組み込みます。

   プルリクエストがマージされると、モノレポプロジェクト内に新しいpackages/infraフォルダが生成されます。これには、プロジェクトをAWSクラウドにデプロイするインフラストラクチャが含まれます。

8. ナビゲーションペインで、ブループリント を選択して、 PDK - インフラストラクチャのステータスに最新の が表示されることを確認します。

1. モノレポプロジェクトのナビゲーションペインで、ブループリント を選択し、ブループリントの追加 を選択します。

2. PDK - DevOpsブループリントを選択し、次へ を選択します。

3. 「設計図の設定」で、設計図パラメータを設定します。

   • 現在の環境でブートストラップCDKを選択します。

   • スタック名テキスト入力フィールドに、デプロイする CloudFormation スタックの名前を入力します。これは、 PDK- インフラストラクチャ設計図ステップ 4: アプリケーションをAWSクラウドにデプロイするためのインフラストラクチャを生成するの で設定されたスタック名と一致する必要があります。

   • AWS アカウント接続ドロップダウンメニューを選択し、リソースに使用するAWSアカウントを選択します。詳細については、「スペース AWS アカウント への の追加」を参照してください。

   • アプリケーションのデプロイに使用するロールドロップダウンメニューを選択し、プロジェクトアプリケーションのデプロイに使用するIAMロールを選択します。

     注記

     IAM ロールを作成するときは、 SourceArnをプロジェクト設定内の現在の ProjectID に制限します。詳細については、「CodeCatalystWorkflowDevelopmentRole-spaceName サービスロールについて」を参照してください。

   • リージョンドロップダウンメニューを選択し、モノレポプロジェクトをデプロイするリージョンを選択します。デプロイは、必要なAWSサービスが存在するリージョンでのみ機能します。詳細については、AWS「リージョン別のサービス」を参照してください。

4. コード変更タブで、提案された変更を確認します。プルリクエストに表示される違いは、プルリクエストの作成時のプロジェクトへの変更を示しています。

5. ブループリントの適用時に提案された変更に満足したら、ブループリントの追加 を選択します。

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

   注記

   ブループリントは、プルリクエストが承認されてマージされるまで適用されません。詳細については、「プルリクエストの確認」および「プルリクエストのマージ」を参照してください。

6. Status 列から、「Pending pull request for the PDK - Infrastructure blueprint row」を選択し、開いているプルリクエストのリンクを選択します。

7. マージ を選択し、希望するマージ戦略を選択し、マージ を選択して適用されたブループリントからの変更を組み込みます。

   プルリクエストがマージされると、モノレポプロジェクト内に新しい.codecatalyst/workflowsフォルダが生成されます。

8. ナビゲーションペインでブループリント を選択して、 のステータス PDK - DevOps に最新の が表示されることを確認します。

1. モノレポプロジェクトのナビゲーションペインで、CI/CD を選択し、ワークフロー を選択します。

2. リリースワークフローでは、最新のワークフロー実行を選択して詳細を表示します。詳細については、「1 回の実行のステータスと詳細の表示」を参照してください。

3. ワークフローが正常に実行されたら、ワークフロー内の最後のアクション (Deploy-B eta-ap-souteast-2 など) を選択し、Variables を選択します。

   

4. Variables テーブルにあるリンクをコピーして貼り付けて、デプロイされたウェブサイトを表示します (例: MyPDKApiwebsiteDistributionDomainXXXXX) を新しいブラウザウィンドウに名前付けします。

   

   ウェブサイトにログインするには、Amazon Cognito アカウントが必要です。デフォルトでは、ユーザープールは自己登録を許可するように設定されていません。

   1. AWS Cognito コンソール に移動します。

   2. ユーザープールテーブルから、 PDK - DevOpsブループリントによって作成されたユーザープールと一致するユーザープール名を選択します。これは、変数テーブル (例: infracalculatebetaUserIdentityinfracalculatebetaUserIdentityIdentityPoolIdXXXXX。詳細については、「ユーザープールの開始方法」を参照してください。

      

   3. [ユーザーの作成] を選択します。

   4. ユーザー情報パラメータを設定します。

      • 「招待メッセージ」で、「招待メールを送信する」を選択します。

      • ユーザー名テキスト入力フィールドにユーザー名を入力します。

      • E メールアドレスのテキスト入力フィールドにユーザー名を入力します。

      • 一時パスワード で、パスワードの生成 を選択します。

   5. [ユーザーの作成] を選択します。

   6. ユーザー情報パラメータに入力した E メールアカウントに移動し、一時パスワードを含む E メールを開きます。パスワードを書き留めておきます。

   7. デプロイされたウェブサイトに戻り、作成したユーザー名と受け取った一時パスワードを入力し、「サインイン」を選択します。

5. （オプション) ワークフローの実行が正常に完了したら、生成された図を表示することもできます。のアーティファクトタブを選択し CodeCatalyst、ダイアグラム行のダウンロードを選択し、ダウンロードしたファイルを開きます (複数可）。

   
   

プロジェクト設定タブからメンバーをプロジェクトに招待するには

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

   ヒント

   上部のナビゲーションバーに表示するプロジェクトを選択できます。

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

3. [メンバー] タブを選択します。

4. プロジェクトメンバー で、新しいメンバーの招待 を選択します。

5. 新しいメンバーの E メールアドレスを入力し、このメンバーのロールを選択し、招待 を選択します。ロールの詳細については、「ユーザーロールによるアクセスの許可」をご参照ください。

プロジェクト概要ページからプロジェクトにメンバーを招待するには

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

   ヒント

   上部のナビゲーションバーに表示するプロジェクトを選択できます。

2. メンバー + ボタンを選択します。

3. 新しいメンバーの E メールアドレスを入力し、このメンバーのロールを選択し、招待 を選択します。ロールの詳細については、「ユーザーロールによるアクセスの許可」をご参照ください。

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

2. 問題を作成するモノレポプロジェクトに移動します。

3. プロジェクトのホームページで、「問題の作成」を選択します。または、ナビゲーションペインで問題 を選択します。

4. 問題の作成 を選択します。

   注記

   グリッドビューを使用するときに、問題をインラインで追加することもできます。

5. 問題のタイトルを入力します。

6. （オプション) 説明 を入力します。この問題については、次の説明を入力します: a change in the src/mysfit_data.json file.。Markdown を使用して書式を追加できます。

7. （オプション) 問題のステータス、優先度、推定を選択します。

8. （オプション) 既存のラベルを追加するか、新しいラベルを作成して + ラベルを追加 を選択して追加します。

   1. 既存のラベルを追加するには、リストからラベルを選択します。フィールドに検索語を入力すると、その語句を含むすべてのラベルをプロジェクトで検索できます。

   2. 新しいラベルを作成して追加するには、作成するラベルの名前を検索フィールドに入力し、Enter キーを押します。

9. （オプション) + 担当者を追加 を選択して、担当者を追加します。+ Add me を選択すると、自分自身を担当者としてすばやく追加できます。

   ヒント

   Amazon Q に問題を割り当てることで、Amazon Q で問題の解決を試みることができます。詳細については、「チュートリアル: CodeCatalyst 生成 AI 機能を使用して開発作業を高速化する」を参照してください。

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

10. （オプション) 既存のカスタムフィールドを追加するか、新しいカスタムフィールドを作成します。問題には複数のカスタムフィールドを含めることができます。

    1. 既存のカスタムフィールドを追加するには、リストからカスタムフィールドを選択します。フィールドに検索語を入力すると、プロジェクト内のその語を含むすべてのカスタムフィールドを検索できます。

    2. 新しいカスタムフィールドを作成して追加するには、検索フィールドに作成するカスタムフィールドの名前を入力し、Enter キーを押します。次に、作成するカスタムフィールドのタイプを選択し、値を設定します。

11. 問題の作成 を選択します。右下隅に通知が表示されます。問題が正常に作成された場合は、問題が正常に作成されたことを示す確認メッセージが表示されます。問題が正常に作成されなかった場合は、失敗の理由を示すエラーメッセージが表示されます。その後、再試行を選択して問題を編集して作成を再試行するか、破棄を選択して問題を破棄します。どちらのオプションも通知を却下します。

    注記

    プルリクエストを作成するときに、プルリクエストを問題にリンクすることはできません。ただし、作成後に編集してプルリクエストへのリンクを追加できます。

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

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

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

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

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

1. monorepo プロジェクトのナビゲーションペインで、次のいずれかを実行します。

   • 概要 を選択し、「開発環境」セクションに移動します。

   • コード を選択し、開発環境 を選択します。

   • コード を選択し、ソースリポジトリ を選択し、開発環境を作成するモノレポリポジトリを選択します。

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

3. [リポジトリのクローン] を選択します。

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

   注記

   ソースリポジトリページまたは特定のソースリポジトリから開発環境を作成する場合、リポジトリを選択する必要はありません。開発環境は、ソースリポジトリページから選択したソースリポジトリから作成されます。

5. （オプション) エイリアス - オプションで、開発環境のエイリアスを入力します。

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

7. （オプション) Amazon Virtual Private Cloud (Amazon VPC) - オプション で、ドロップダウンメニューから開発環境に関連付けるVPC接続を選択します。

   スペースにデフォルトVPCが設定されている場合、開発環境はその に接続された状態で実行されますVPC。これを上書きするには、別のVPC接続を関連付けます。また、 VPCに接続された開発環境は AWS Toolkit をサポートしていないことに注意してください。

   注記

   VPC 接続を使用して開発環境を作成すると、 内に新しいネットワークインターフェイスが作成されますVPC。 CodeCatalyst は、関連付けられたVPCロールを使用してこのインターフェイスとやり取りします。また、IPv4CIDRブロックが 172.16.0.0/12 IP アドレス範囲に設定されていないことを確認してください。

8. [Create] (作成) を選択します。開発環境の作成中は、開発環境のステータス列に [開始中] と表示され、開発環境が作成されると、ステータス列に [実行中] と表示されます。

1. 開発環境の作業ターミナルでモノレポプロジェクトに移動し、次のコマンドを実行してプロジェクトの依存関係をインストールします。

   npx projen install

2. API オペレーション例packages/apis/mypdkapi/model/src/main/smithy/operations/say-hello.smithyを定義する に移動します。このチュートリアルでは、2 つの数値を一緒に追加するシンプルなCalculateオペレーションを構築します。コードを変更して、入力と出力を含むこのオペレーションを定義します。

   例:

   $version: "2"
   namespace com.aws
   
   @http(method: "POST", uri: "/calculate")
   @handler(language: "typescript")
   operation Calculate {
       input := {
           @required
           numberA: Integer
           @required
           numberB: Integer
       }
       output := {
           @required
           result: Integer
       }
   }

   この@handler特性は、このオペレーションを で記述された AWS Lambda ハンドラーとして実装APIすることを Type Safe に指示します TypeScript。Type Safe APIは、このオペレーションのスタブを生成し、 に実装できるようにします TypeScript。@required 特性が追加されます。つまり、デプロイされるAPIゲートウェイによって実行時に適用されます。詳細については、「Smithy ドキュメント」を参照してください。

3. /say-hello.smithy ファイル名をコードの変更と一致する名前に変更します (例: calculate.smithy）。

4. に移動しpackages/apis/mypdkapi/model/src/main/smithy/main.smithy、コードを変更してオペレーションをフックします。で定義されたCalculateオペレーションを公開/calculate.smithyするには、このファイルの operationsフィールドに一覧表示します。

   例:

   $version: "2"
   namespace com.aws
   
   use aws.protocols#restJson1
   
   /// A sample smithy api
   @restJson1
   service MyPDKApi {
       version: "1.0"
       operations: [Calculate]
       errors: [
         BadRequestError
         NotAuthorizedError
         InternalFailureError
       ]
   }

5. 次のコマンドを実行して、変更を構築します。

   npx projen build

   注記

   オプションで、 --parallel Xフラグを渡すことができます。これにより、ビルドがXコア全体に分散されます。

   @handler 特性が追加されているため、ビルドが完了すると次のファイルが生成されます。

   • /packages/apis/mypdkapi/handlers/typescript/src/calculate.ts

   • /packages/apis/mypdkapi/handlers/typescript/test/calculate.test.ts

6. に移動しpackages/apis/mypdkapi/handlers/typescript/src/calculate.ts、コードを変更します。このファイルは、 に対して呼び出されるサーバーハンドラーですAPI。

   import {
     calculateHandler,
     CalculateChainedHandlerFunction,
     INTERCEPTORS,
     Response,
     LoggingInterceptor,
   } from 'mypdkapi-typescript-runtime';
   
   /**
    * Type-safe handler for the Calculate operation
    */
   export const calculate: CalculateChainedHandlerFunction = async (request) => {
     LoggingInterceptor.getLogger(request).info('Start Calculate Operation');
   
     const { input } = request;
   
     return Response.success({
       result: input.body.numberA + input.body.numberB,
     });
   };
   
   /**
    * Entry point for the AWS Lambda handler for the Calculate operation.
    * The calculateHandler method wraps the type-safe handler and manages marshalling inputs and outputs
    */
   export const handler = calculateHandler(...INTERCEPTORS, calculate);

7. /packages/apis/mypdkapi/handlers/typescript/test/calculate.test.ts ファイルに移動し、コードを変更してユニットテストを更新します。

   例:

   import {
     CalculateChainedRequestInput,
     CalculateResponseContent,
   } from 'mypdkapi-typescript-runtime';
   import {
     calculate,
   } from '../src/calculate';
   
   // Common request arguments
   const requestArguments = {
     chain: undefined as never,
     event: {} as any,
     context: {} as any,
     interceptorContext: {
       logger: {
         info: jest.fn(),
       },
     },
   } satisfies Omit<CalculateChainedRequestInput, 'input'>;
   
   describe('Calculate', () => {
   
     it('should return correct sum', async () => {
       const response = await calculate({
         ...requestArguments,
         input: {
           requestParameters: {},
           body: {
             numberA: 1,
             numberB: 2
           }
         },
       });
   
       expect(response.statusCode).toBe(200);
       expect((response.body as CalculateResponseContent).result).toEqual(3);
     });
   
   });

8. /packages/infra/main/src/constructs/apis/mypdkapi.ts ファイルに移動し、コードを変更して、CDKインフラストラクチャ内の Calculate オペレーションの統合を追加します。API コンストラクトには統合プロパティがあり、前に追加した実装を渡すことができます。Calculate オペレーションには Smithy モデルで @handler特性を使用しているため、事前に設定された生成されたCalculateFunctionCDKコンストラクトを使用して、ハンドラーの実装をポイントできます。

   例:

   import { UserIdentity } from "@aws/pdk/identity";
   import { Authorizers, Integrations } from "@aws/pdk/type-safe-api";
   import { Stack } from "aws-cdk-lib";
   import { Cors } from "aws-cdk-lib/aws-apigateway";
   import {
     AccountPrincipal,
     AnyPrincipal,
     Effect,
     PolicyDocument,
     PolicyStatement,
   } from "aws-cdk-lib/aws-iam";
   import { Construct } from "constructs";
   import { Api, CalculateFunction } from "calculateapi-typescript-infra";
   
   /**
    * Api construct props.
    */
   export interface CalculateApiProps {
     /**
      * Instance of the UserIdentity.
      */
     readonly userIdentity: UserIdentity;
   }
   
   /**
    * Infrastructure construct to deploy a Type Safe API.
    */
   export class CalculateApi extends Construct {
     /**
      * API instance
      */
     public readonly api: Api;
   
     constructor(scope: Construct, id: string, props?: CalculateApiProps) {
       super(scope, id);
   
       this.api = new Api(this, id, {
         defaultAuthorizer: Authorizers.iam(),
         corsOptions: {
           allowOrigins: Cors.ALL_ORIGINS,
           allowMethods: Cors.ALL_METHODS,
         },
         integrations: {
           calculate: {
             integration: Integrations.lambda(new CalculateFunction(this, "CalculateFunction"))
           }
         },
         policy: new PolicyDocument({
           statements: [
             // Here we grant any AWS credentials from the account that the prototype is deployed in to call the api.
             // Machine to machine fine-grained access can be defined here using more specific principals (eg roles or
             // users) and resources (ie which api paths may be invoked by which principal) if required.
             // If doing so, the cognito identity pool authenticated role must still be granted access for cognito users to
             // still be granted access to the API.
             new PolicyStatement({
               effect: Effect.ALLOW,
               principals: [new AccountPrincipal(Stack.of(this).account)],
               actions: ["execute-api:Invoke"],
               resources: ["execute-api:/*"],
             }),
             // Open up OPTIONS to allow browsers to make unauthenticated preflight requests
             new PolicyStatement({
               effect: Effect.ALLOW,
               principals: [new AnyPrincipal()],
               actions: ["execute-api:Invoke"],
               resources: ["execute-api:/*/OPTIONS/*"],
             }),
           ],
         }),
       });
   
       // Grant authenticated users access to invoke the api
       props?.userIdentity.identityPool.authenticatedRole.addToPrincipalPolicy(
         new PolicyStatement({
           effect: Effect.ALLOW,
           actions: ["execute-api:Invoke"],
           resources: [this.api.api.arnForExecuteApi("*", "/*", "*")],
         }),
       );
     }
   }

9. 次のコマンドを実行して、変更を構築します。

   npx projen build

• 次のコマンドを実行して、変更をコミットして特徴量ブランチにプッシュします。

  git add .

  git commit -m "my commit message"

  git push

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

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

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

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

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

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

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

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

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

   ヒント

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

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

7. 「問題」で「問題にリンク」を選択し、「」で作成した問題を選択しますステップ 2: 共同作業と追跡作業に関する問題を作成する。問題のリンクを解除するには、リンク解除アイコンを選択します。

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

   注記

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

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

10. プルリクエストは、レビュー担当者または自分自身によってレビューされ、メインブランチにマージされる必要があります。詳細については、「プルリクエストのマージ」を参照してください。

    変更がソースリポジトリのメインブランチにマージされると、新しいワークフローが自動的にトリガーされます。

11. マージが完了したら、問題を「完了」に移動できます。

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

    2. で作成された問題を選択しステップ 2: 共同作業と追跡作業に関する問題を作成する、ステータスドロップダウンを選択し、完了 を選択します。

1. モノレポプロジェクトのナビゲーションペインで、CI/CD を選択し、ワークフロー を選択します。

2. リリースワークフローでは、最新のワークフロー実行を選択して詳細を表示します。詳細については、「1 回の実行のステータスと詳細の表示」を参照してください。

3. ワークフローが正常に実行されたら、ワークフローの最後のアクション (Deploy-B eta-ap-souteast-2) を選択し、変数 を選択します。

4. からリンクをコピーして貼り付けて、デプロイされたウェブサイトを表示する MyPDKApiwebsiteDistributionDomain新しいブラウザウィンドウに行に名前XXXXXを付けます。

5. で作成したユーザー名とパスワードを入力しステップ 6: リリースワークフローを確認し、ウェブサイトを表示する、「サインイン」を選択します。

6. （オプション) アプリケーションの変更をテストします。

   1. POST ドロップダウンメニューを選択します。

   2. numberA と に 2 つの値を入力しnumber B、実行 を選択します。

   3. レスポンス本文 で結果を確認します。