Next.jsとLocalStackで構築するフルスタックサーバーレスアプリケーション

# はじめに

前回は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**

## 手順概要

1. LocalStack Starterのセットアップ
2. Next.jsアプリケーションの作成
3. AWSサービスの構築
4. フロントエンドとバックエンドの連携
5. 動作確認

---

## 1. LocalStack Starterのセットアップ

LocalStack Starterを利用することで、CloudFrontやCognito、RDSなどのサービスをエミュレートできます。

### LocalStack Starterのインストール

Dockerを使用してLocalStack を起動します。

```bash
export LOCALSTACK_API_KEY=your_api_key_here
docker run --rm -it -e LOCALSTACK_API_KEY -p 4566:4566 localstack/localstack
```

---

## 2. Next.jsアプリケーションの作成

### プロジェクトの作成

```bash
npx create-next-app my-app
cd my-app
```

### S3とCloudFrontへのデプロイ設定

ビルドした静的ファイルをS3にアップロードし、CloudFront経由で配信します。

---

## 3. AWSサービスの構築

### S3バケットの作成

```bash
aws s3api create-bucket --bucket my-app-bucket --endpoint-url=http://localhost:4566
```

### CloudFrontディストリビューションの作成

```bash
aws cloudfront create-distribution \
    --origin-domain-name my-app-bucket.s3.amazonaws.com \
    --endpoint-url=http://localhost:4566
```

### Cognitoユーザープールの作成

```bash
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と連携します。

```bash
npm install aws-amplify
```

```javascript
// 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. 動作確認

### アプリケーションの起動

```bash
npm run dev
```

### ブラウザでアクセス

`http://localhost:3000`にアクセスし、ユーザー登録やログインを試してみましょう。

### サービスの確認

AWS CLIで各サービスの状態を確認します。

```bash
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のサービスをエミュレートすることで、コストを抑えつつ開発・テストを効率的に行うことができます。
ぜひ、この方法を活用して、より実践的な開発を進めてみてください！

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/