翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # Green Boost を使用したフルスタックのクラウドネイティブなウェブアプリケーション開発を探索する *Ben Stickley と Amiin Samatar、Amazon Web Services* ## 概要 変化する開発者のニーズに対応するため、Amazon Web Services（AWS は、クラウドネイティブなウェブアプリケーションを効率的に開発するための重要なニーズを認識しています。AWS は、AWS クラウドへのウェブアプリケーションのデプロイに関連する一般的な障害を克服できるようサポートすることに重点を置いています。このパターンは、TypeScript、AWS Cloud Development Kit (AWS CDK)、React、Node.js などの最新テクノロジーの機能を活用することで、開発プロセスを合理化および迅速化することを目的としています。 Green Boost (GB) ツールキットを基盤としたこのパターンは、AWS の広範な機能を最大限に活用するウェブアプリケーションをコンストラクトするための実践的なガイドとなります。Amazon Aurora PostgreSQL 互換エディションと統合された基本的な CRUD (作成、読み取り、更新、削除) ウェブアプリケーションをデプロイするプロセスを案内する、包括的なロードマップして機能します。これは、Green Boost コマンドラインインターフェイス (Green Boost CLI) を使用して、ローカル開発環境を確立することによって実現されます。 アプリケーションのデプロイが成功した後、このパターンではインフラストラクチャ設計、バックエンドとフロントエンドの開発、視覚化のための cdk-dia などの基本的なツールを含む、ウェブアプリケーションの主要なコンポーネントを詳細に調査し、効率的なプロジェクト管理を促進します。 ## 前提条件と制限 **前提条件** + インストール済み[Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) + [Visual Studio Code (VS Code)](https://code.visualstudio.com/download) をインストール済み + [AWS コマンドラインインターフェイス (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) をインストール済み + [AWS CDK ツールキット](https://docs.aws.amazon.com/cdk/v2/guide/cli.html) をインストール済み + [Node.js 18](https://nodejs.org/en/download) をインストール済み、または [pnpm を搭載した Node.js 18](https://pnpm.io/cli/env) がアクティブ + [pnpm](https://pnpm.io/installation) をインストール済み (Node.js のインストールに含まれない場合) + TypeScript、AWS CDK、Node.js、React に関する基本的な知識 + [アクティブな AWS アカウント](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + `us-east-1` の AWS CDK を使用して、[ブートストラップされた AWS アカウント](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html)。Amazon CloudFront Lambda @Edge 関数をサポートするには `us-east-1` AWS リージョンが必要です。**** + ターミナル環境における [AWS セキュリティ認証情報](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html) (`AWS_ACCESS_KEY_ID` を含む) の適切な設定 + Windows ユーザーの場合、管理者モードのターミナル (pnpm がノードモジュールを処理する方法に対応） **製品バージョン** + AWS SDK for JavaScript バージョン 3 + AWS CDK バージョン 2 + AWS CLI バージョン 2.2 + Node.js バージョン 18 + React バージョン 18 ## アーキテクチャ **ターゲットテクノロジースタック** + Amazon Aurora PostgreSQL 互換エディション + Amazon CloudFront + Amazon CloudWatch + Amazon Elastic Compute Cloud (Amazon EC2) + AWS Lambda + AWS Secrets Manager + Amazon Simple Notification Service (Amazon SNS) + Amazon Simple Storage Service (Amazon S3) + AWS WAF **ターゲット アーキテクチャ** 次の図は、ユーザーリクエストが Amazon CloudFront、AWS WAF、AWS Lambda を通過し S3 バケット、Aurora データベース、EC2 インスタンスとやり取りされ、最終的に開発者に届くことを示しています。一方、管理者は通知とモニタリングの目的で Amazon SNS と Amazon CloudWatch を使用します。 ![\[Green Boost CLI を使用して、Amazon Aurora PostgreSQL と統合された CRUD ウェブアプリケーションをデプロイするプロセス。\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/129691e9-7fd3-4208-ab8c-05b9f40a5c4c.png) デプロイ後のアプリケーションをより詳しく表示するには、次の例のように [cdk-dia](https://github.com/pistazie/cdk-dia) を使用して図を作成できます。 ![\[最初の図はユーザー中心のビュー、cdk-dia 図は技術インフラストラクチャビューを示しています。\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) これらの図は、ウェブアプリケーションのアーキテクチャを 2 つの異なる視点から示しています。cdk-dia 図では、AWS CDK インフラストラクチャの詳細な技術情報を示しており、Amazon Aurora PostgreSQL 互換や AWS Lambda などの特定の AWS サービスが強調されています。これとは対照的に、もう 1 つの図は、データの論理的な流れとユーザーとのやり取りを強調した、より広い視点を採用しています。主な違いは詳細レベルにあります。cdk-dia は技術的な複雑さについて詳しく調べていますが、最初の図はよりユーザー中心のビューを提供しています。 cdk-dia 図の作成については、「*AWS CDK を使用してアプリケーションのインフラストラクチャを理解する*」というエピックで説明しています。 ## ツール **AWS サービス** + [Amazon Aurora PostgreSQL 互換エディション](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html)は、PostgreSQL デプロイのセットアップ、運用、スケーリングを支援する、フルマネージド型で ACID 互換のリレーショナルデータベースエンジンです。 + [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) は、AWS クラウドインフラストラクチャをコードで定義してプロビジョニングするのに役立つソフトウェア開発フレームワークです。 + 「[AWS コマンドラインインターフェイス (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)」は、オープンソースのツールであり、コマンドラインシェルのコマンドを使用して AWS サービスとやり取りすることができます。 + [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) は、世界中のデータセンターネットワークを通じて配信することで、ウェブコンテンツの配信を高速化します。これにより、レイテンシーが減少し、パフォーマンスが向上します。 + [Amazon CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) は、AWS のリソースや、AWS で実行されるアプリケーションをリアルタイムにモニタリングします。 + 「[Amazon Elastic Compute Cloud (Amazon EC2)](https://docs.aws.amazon.com/ec2/)」は、AWS クラウドでスケーラブルなコンピューティング容量を提供します。必要な数の仮想サーバーを起動することができ、迅速にスケールアップまたはスケールダウンができます。 + [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) は、サーバーのプロビジョニングや管理を行うことなくコードを実行できるコンピューティングサービスです。必要に応じてコードを実行し、自動的にスケーリングするため、課金は実際に使用したコンピューティング時間に対してのみ発生します。 + [AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) は、コード内のハードコードされた認証情報 (パスワードを含む) を Secrets Manager への API コールに置き換えて、シークレットをプログラムで取得する上で役立ちます。 + 「[AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html)」は、AWS クラウドで実行されるアプリケーションとインフラストラクチャの管理に役立ちます。アプリケーションとリソースの管理が簡略化され、オペレーション上の問題の検出と解決時間が短縮され、AWS リソースを大規模かつセキュアに管理できるようになります。このパターンは、AWS Systems Manager Session Manager を使用します。 + [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) は、任意の数のデータを保存、保護、検索できるクラウドベースのオブジェクトストレージサービスです。[Amazon Simple Notification Service (Amazon SNS)](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) は、ウェブサーバーやメールアドレスを含む、パブリッシャーとクライアント間のメッセージの交換を調整して管理するのに役立ちます。 + [AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/what-is-aws-waf.html) は、保護されたウェブアプリケーションリソースに転送される HTTP と HTTPS リクエストをモニタリングするのに役立つウェブアプリケーションのファイアウォールです。 **その他のツール** + [Git](https://git-scm.com/docs) はオープンソースの分散バージョンの管理システムです。 + [Green Boost](https://awslabs.github.io/green-boost/overview/intro) は、AWS でウェブアプリケーションを構築するためのツールキットです。 + [Next.js](https://nextjs.org/docs) は、機能を追加したり最適化したりするための React フレームワークです。 + [Node.js](https://nodejs.org/en/docs/) は、スケーラブルなネットワークアプリケーションを構築するために設計された、イベント駆動型の JavaScript ランタイム環境です。 + [pgAdmin](https://www.pgadmin.org/) は PostgreSQL 用のオープンソース管理ツールです。データベースオブジェクトの作成、管理、使用を支援するグラフィカルインターフェイスを提供します。 + [pnpm](https://pnpm.io/motivation) は Node.js プロジェクトの依存関係を管理するパッケージマネージャーです。 ## ベストプラクティス 以下の推奨事項の詳細については、[エピック](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics) セクションを参照してください。 + Amazon CloudWatch ダッシュボードとアラームを使用してインフラストラクチャをモニタリングします。 + cdk-nag を使用して静的 Infrastructure as Code (IaC) 分析を実行することで、AWS のベストプラクティスを実施します。 + Systems Manager セッションマネージャを使用して、SSH (Secure Shell) トンネル経由でデータベースポートの転送を確立します。これは、公開 IP アドレスを使用するよりもセキュアです。 + `pnpm audit` を実行して脆弱性を管理します。 + [ESLint](https://eslint.org/) を使用して静的な TypeScript コード分析を実行し、[Prettier](https://prettier.io/) を使用してコードフォーマットを標準化することでベストプラクティスを実施します。 ## エピック ### Aurora PostgreSQL 互換の CRUD ウェブアプリケーションのデプロイ | タスク | 説明 | 必要なスキル | | --- | --- | --- | | Green Boost CLI をインストールします。 | Green Boost CLI をインストールするには、次のコマンドを実行します。
pnpm add -g gboost
| アプリ開発者 | | GB アプリを作成します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | 依存関係をインストールしてアプリをデプロイします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)デプロイが完了するまでお待ちください (約 20 分)。待っている間、CloudFormation コンソールで AWS CloudFormation スタックをモニタリングできます。コードマップで定義されたコンストラクトが、デプロイされたリソースにどのようにマッピングされるかに注目してください。CloudFormation コンソールの [CDK コンストラクトツリービュー](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html)を確認してください。 | アプリ開発者 | | アプリにアクセスします。 | GB アプリをローカルにデプロイしたら、CloudFront URL を使用してアクセスできます。URL はターミナル出力に表示されますが、見つけるのは少し難しいかもしれません。URL を素早く見つけるには、次の手順に従います。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)代わりに、Amazon CloudFront コンソールにアクセスして、Amazon CloudFront URL を確認することもできます。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)ディストリビューションに関連付けられた**ドメイン名**をコピーします。`your-unique-id.cloudfront.net` のようになります。 | アプリ開発者 | ### Amazon CloudWatch を使用してモニタリングする | タスク | 説明 | 必要なスキル | | --- | --- | --- | | CloudWatch ダッシュボードを表示します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | アラートを有効にします。 | CloudWatch ダッシュボードは、ウェブアプリケーションをアクティブにモニタリングするのに役立ちます。ウェブアプリを受動的にモニタリングするには、アラートを有効にします。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | ### AWS CDK を使用してアプリのインフラストラクチャを理解する | タスク | 説明 | 必要なスキル | | --- | --- | --- | | アーキテクチャ図を作成します。 | [cdk-dia](https://github.com/pistazie/cdk-dia) を使用して、ウェブアプリのアーキテクチャ図を生成します。アーキテクチャを視覚化することで、チームメンバー間の理解とコミュニケーションが向上します。システムコンポーネントとその関係の明確な概要が示されています。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | cdk-nag を使用してベストプラクティスを実施します。 | [cdk-nag](https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/check-aws-cdk-applications-or-cloudformation-templates-for-best-practices-by-using-cdk-nag-rule-packs.html) を使用すると、ベストプラクティスを実施し、セキュリティの脆弱性や設定ミスのリスクを軽減することで、セキュアでコンプライアンスを確保したインフラストラクチャを維持できます。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | ### データベース設定とスキーマを評価する | タスク | 説明 | 必要なスキル | | --- | --- | --- | | 環境変数を追加します。 | 必要な環境変数を取得するには、以下の手順に従います。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | ポート転送を確立します。 | ポート転送を確立するには、以下の手順に従います。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | Systems Manager Session Manager のタイムアウトを調整します。 | (オプション) デフォルトの 20 分のセッションタイムアウトが短すぎる場合は、Systems Manager コンソールで [**セッションマネージャ**]、[**設定**]、[**編集**]、[**アイドルセッションタイムアウト**] の順に選択して、最大 60 分まで増やすことができます。 | アプリ開発者 | | データベースを視覚化します。 | pgAdmin は、PostgreSQL データベースを管理するための使いやすいオープンソースツールです。データベースタスクを簡素化し、データベースを効率的に作成、管理、最適化できるようにします。　 このセクションでは、[pgAdmin のインストール](https://www.pgadmin.org/download/)から、その機能を PostgreSQL データベース管理に使用する方法について説明します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | ### Node.js でデバッグする | タスク | 説明 | 必要なスキル | | --- | --- | --- | | アイテム作成のユースケースをデバッグします。 | アイテム作成のユースケースをデバッグするには、次の手順に従います。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | ### フロントエンドを開発する | タスク | 説明 | 必要なスキル | | --- | --- | --- | | 開発サーバーを設定します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | ### Green Boost を使用したツーリング | タスク | 説明 | 必要なスキル | | --- | --- | --- | | monorepo と pnpm パッケージマネージャーを設定します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | pnpm スクリプトを実行します。 | リポジトリのルートで以下のコマンドを実行します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)これらのコマンドが、すべてのワークスペースでどのように実行されるかに注目してください。これらのコマンドは、各ワークスペースの `package.json#scripts` フィールドで定義されます。 | アプリ開発者 | | ESLint を使用して静的コード分析を行います。 | ESLint の静的コード分析機能をテストするには、以下の作業を行います。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | 依存関係と脆弱性を管理します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリ開発者 | | Husky を使用してフックをプリコミットします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)これらのツールは、不正なコードがアプリケーションに侵入するのを防止するためのメカニズムです。 | アプリ開発者 | ### インフラストラクチャをティアダウンする | タスク | 説明 | 必要なスキル | | --- | --- | --- | | アカウントからデプロイを削除します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | アプリデベロッパー | ## トラブルシューティング | 問題 | ソリューション | | --- | --- | | ポート転送を確立できない | AWS 認証情報が正しく設定され、必要な権限があることを確認してください。踏み台ホスト ID (`DB_BASTION_ID`) とデータベースエンドポイント (`DB_ENDPOINT`) の環境変数が正しく設定されていることを再確認してください。それでも問題が解決しない場合は、[SSH 接続と Session Manager のトラブルシューティングに関する](https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html) AWS ドキュメントを参照してください。 | | `localhost:3000` で、ウェブサイトが読み込まれない | ターミナルの出力に、転送アドレスを含めてポート転送が成功したことが示されていることを確認します。ローカルマシンでポート 3000 を使用しているプロセスが競合していないことを確認します。Green Boost アプリケーションが正しく設定され、想定されるポート (3000) で実行されていることを確認します。ウェブブラウザで、ローカル接続をブロックする可能性のあるセキュリティ拡張機能や設定がないか確認してください。 | | ローカルデプロイ中のエラーメッセージ (`pnpm deploy:local`) | エラー メッセージを注意深く確認して、問題の原因を特定します。必要な環境変数と設定ファイルが正しく設定されていることを確認します。 | ## 関連リソース + [AWS SDK ドキュメント](https://docs.aws.amazon.com/cdk/latest/guide/home.html) + [Green Boost ドキュメント](https://awslabs.github.io/green-boost/learn/m1-deploy-gb-app) + [Next.js ドキュメント](https://nextjs.org/docs) + [Node.js ドキュメント](https://nodejs.org/en/docs/) + [React ドキュメント](https://reactjs.org/docs/getting-started.html) + [TypeScript ドキュメント](https://www.typescriptlang.org/docs/)