DEV Community

hirooka kazuya
hirooka kazuya

Posted on

Roadmap to Full-Stack Application Completion with AWS amplify gen2 and Next.js

#aws #nextjs #typescript #tutorial

🗺️ ロードマップ: DynamoDB前提 (Amplify Gen 2 & Next.js)

アプリケーション開発は、主に バックエンド定義・デプロイ、フロントエンド開発、デプロイ・運用 の3つのフェーズで進行します。

🌟 Phase 1: バックエンド定義とデプロイ (Amplify Gen 2)

このフェーズでは、アプリケーションの核となるクラウドインフラストラクチャをコードとして定義し、AWS上に構築します。

詳細ステップ

1. データスキーマの定義 (DynamoDB/AppSync)

  • amplify/data/resource.ts で、GraphQLスキーマとしてデータモデル（例: Todo）を定義します。
  • a.model() を使用してスキーマを記述するだけで、AWSの DynamoDB テーブル と AppSync API が自動的に生成されます。
  • 認証ルール（例: allow.publicApiKey() や allow.owner()）もこのファイルで定義します。

2. 認証リソースのコード定義 (Cognito)

  • amplify/auth/resource.ts などのファイルで、ユーザー登録、ログイン、パスワード回復などの 認証機能 (Cognito) をコードで定義します（例: Eメールログインを有効化）。

3. ローカル環境の検証 (Sandbox)

  • npx ampx sandbox を実行し、開発リソースをAWSアカウント内にデプロイします。
  • デプロイ後、認証機能と DynamoDB へのデータアクセス（CRUD操作）が正しく機能するか検証します。 * ****

4. 設定ファイルの取得

  • サンドボックス実行によって生成される amplify_outputs.json ファイルを取得します。このファイルには、フロントエンドがバックエンドに接続するために必要な情報（API URL、Cognito IDなど）が含まれます。

💻 Phase 2: フロントエンド開発 (Next.js / aws-amplify)

このフェーズでは、ユーザーインターフェース (UI) とロジックを実装し、バックエンドと連携させます。

詳細ステップ

1. Amplify 設定の初期化

  • Next.js アプリケーションのエントリーポイント (app/providers.tsxなど) で、aws-amplify ライブラリと手順4で取得した amplify_outputs.json を使用して初期設定を行います。

2. 認証 UI の統合

  • @aws-amplify/ui-react ライブラリを使用して、サインアップ/ログイン画面を実装し、バックエンドの Cognito 認証機能と連携させます。

3. データアクセスレイヤーの実装

  • Amplify Data Client (aws-amplify/data から生成) を使用し、Next.jsのコンポーネント内で GraphQL を介して DynamoDB に直接アクセスする機能（データの表示、登録、更新など）を実装します。
    • ※RDSの場合と異なり、Lambdaを経由せず、直接データアクセスが可能です。

4. UI/UX の完成

  • 画面レイアウト、デザイン、ナビゲーションを含む、すべてのユーザー向け機能（CRUD操作）を完成させます。

🚀 Phase 3: デプロイと本番運用 (Amplify Hosting)

このフェーズでは、アプリケーションをグローバルに公開し、継続的な改善を行うための環境を整備します。

詳細ステップ

1. Amplify Hosting の設定

  • プロジェクトを GitHub などのバージョン管理システムにプッシュします。
  • AWSコンソールまたは npx ampx pipeline コマンドを使用して Amplify Hosting を設定し、リポジトリに連携させます。

2. CI/CD パイプラインの実行

  • Git Pushをトリガーとして、Amplifyが自動的に以下の処理を行うパイプラインを開始します。
    • バックエンドデプロイ: Amplify Gen 2 (CDK) 定義に基づき、本番用の AWSリソース（DynamoDB, AppSync, Cognito）をデプロイします。
    • Next.js ビルド: フロントエンドコードをビルドします。
    • ホスティング: ビルドされたアプリをデプロイします。

3. ドメインと SSL の設定

  • アプリケーションにカスタムドメインを設定し、HTTPS接続（SSL証明書）を有効化します。
項目 RDS (変更前) DynamoDB (変更後)
データベース PostgreSQL / MySQL DynamoDB (NoSQL)
データアクセス層 Lambda (VPC内) 経由 AppSync (GraphQL) 経由
VPC設定 必須 不要
ビジネスロジック Lambda (複雑) AppSync Resolver (シンプル) または Lambda (必要な場合のみ)
開発の複雑性 高 低

Top comments (0)