AWS SAM x Nuxt4 Demo

Nuxt4 + AWS を使ったサーバーレスアプリケーション（当サイト）

◆概要・目的

・Nuxt4 をベースとした Web アプリケーションを、AWS SAM を用いて Lambda + CloudFront + S3 のサーバーレス構成にデプロイする検証プロジェクトです。

・Nuxt4 アプリを自前のサーバーレス構成で効率的に運用可能かを確認する目的で開発

・運用面を見据えたログ収集・分析、認証基盤の検証を通して、実際のプロダクション展開に耐え得る仕組みを整備

・GitHub Actions による CI/CD パイプラインを構築し、コードの push に応じて上記 SAM テンプレートを含む複数の CloudFormation スタックのデプロイを実現しました。

◆主な特徴

・すべてのリソースへのアクセスについて CloudFront を介し静的ファイルは S3、動的リクエストは Lambda で処理するビヘイビアを設定

・CloudFront をフロントに置くことで HTTPS 配信とキャッシュ制御を実現

・SEO 対策の一環として動的サイトマップを生成し、公開 URL に反映

・CloudFront 標準ログ記録(v2) を Athena に取り込み、簡易的なアクセス解析を可能に

・認証認可は Cognito + Lambda@Edge、または Lambda@Edge による BASIC 認証を実装

　　- 認証処理をエッジロケーションで完結させることで、アプリケーション本体と切り離して制御可能

　　- 本番用/検証用など環境に応じて切り替えられるよう設計

・GitHub Actions からの AWS リソース操作には OIDC ID プロバイダーを構築し、IAM ユーザーを作成しないセキュアにデプロイフローを構築

・GitHub Environments の Variables/Secrets によって、CloudFront カスタムドメインや認証機能をオプションとして有効化/無効化できる仕組みを導入

・CI/CD パイプラインにより、E2Eテスト・ビルド・デプロイを自動化

◆この構成のメリット

・サーバーレス構成により低コストかつ自動スケーリングで運用負荷を最小化

・すべての AWS リソースを自前の SAM テンプレートで管理しているため、機能追加や構成変更が容易

　　- CloudFront への AWS WAF の導入

　　- Lambda への特定 EFS のアタッチや VPC 設定の追加

　　- 新しい API Gateway エンドポイントの追加など

・マネージドサービス活用により高可用性を確保し、メンテナンス作業を削減