はじめに
前回はLocalStackを使って0円でサーバーレスアーキテクチャを構築する方法をご紹介しました。
今回は、Next.jsをフロントエンドに採用し、より具体的で実践的なシステムを構築していきます。
AWSの主要サービスをローカルでエミュレートしながら、フルスタックな開発を始めましょう！
※有料プランである LocalStack Starter 以上に加入する必要があります。
システム構成
今回構築するシステムは、以下のような構成になります。
フロントエンド層
- Next.jsによるフロントエンド開発
- S3による静的ファイルのホスティング
- CloudFrontによるコンテンツ配信
セキュリティ層
- WAFとShieldによる保護
- KMSによる暗号化
- Secrets Managerによる機密情報管理
コンピューティング層
- ALB（Application Load Balancer）による負荷分散
- Fargateによるコンテナ実行
- Cognitoによる認証
- RDSによるデータベース
- ElastiCacheによるキャッシュ
監視層
- CloudWatchによるメトリクス監視とログ管理
- AWS Configによる設定管理
- CloudTrailによる操作ログ記録
- SNS/SESによる通知
前提条件
- LocalStack Starter（一部のサービスを利用するため）
- Docker
- AWS CLI
- Node.jsとnpm
- Next.js
手順概要
- LocalStack Starterのセットアップ
- Next.jsアプリケーションの作成
- AWSサービスの構築
- フロントエンドとバックエンドの連携
- 動作確認
1. LocalStack Starterのセットアップ
LocalStack Starterを利用することで、CloudFrontやCognito、RDSなどのサービスをエミュレートできます。
LocalStack Starterのインストール
Dockerを使用してLocalStack を起動します。
export LOCALSTACK_API_KEY=your_api_key_here
docker run --rm -it -e LOCALSTACK_API_KEY -p 4566:4566 localstack/localstack
2. Next.jsアプリケーションの作成
プロジェクトの作成
npx create-next-app my-app
cd my-app
S3とCloudFrontへのデプロイ設定
ビルドした静的ファイルをS3にアップロードし、CloudFront経由で配信します。
3. AWSサービスの構築
S3バケットの作成
aws s3api create-bucket --bucket my-app-bucket --endpoint-url=http://localhost:4566
CloudFrontディストリビューションの作成
aws cloudfront create-distribution \
--origin-domain-name my-app-bucket.s3.amazonaws.com \
--endpoint-url=http://localhost:4566
Cognitoユーザープールの作成
aws cognito-idp create-user-pool --pool-name my-user-pool --endpoint-url=http://localhost:4566
Fargateによるバックエンドのセットアップ
ECSクラスターとタスク定義を作成し、Fargateでコンテナを実行します。
4. フロントエンドとバックエンドの連携
環境変数の設定
.env.localファイルにAWSサービスのエンドポイントや認証情報を設定します。
NEXT_PUBLIC_COGNITO_USER_POOL_ID=your_user_pool_id
NEXT_PUBLIC_COGNITO_CLIENT_ID=your_client_id
AWS_ENDPOINT=http://localhost:4566
Next.jsでのCognito認証の実装
AWS Amplifyを使用して、Cognitoと連携します。
npm install aws-amplify
// pages/_app.js
import Amplify from 'aws-amplify';
Amplify.configure({
Auth: {
region: 'us-east-1',
userPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID,
userPoolWebClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
endpoint: process.env.AWS_ENDPOINT,
},
});
5. 動作確認
アプリケーションの起動
npm run dev
ブラウザでアクセス
http://localhost:3000にアクセスし、ユーザー登録やログインを試してみましょう。
サービスの確認
AWS CLIで各サービスの状態を確認します。
aws s3 ls --endpoint-url=http://localhost:4566
aws cognito-idp list-users --user-pool-id your_user_pool_id --endpoint-url=http://localhost:4566
まとめ
今回は、LocalStack StarterとNext.jsを使って、フルスタックなサーバーレスアプリケーションを構築しました。
ローカル環境でAWSのサービスをエミュレートすることで、コストを抑えつつ開発・テストを効率的に行うことができます。
ぜひ、この方法を活用して、より実践的な開発を進めてみてください！