SPA案件に向けた構成設計
この構成は、SPAプロジェクトにおける課題（配信・認証・API連携・運用管理）を一貫して解決できるよう設計されています。
AWSサービス群を体系的に学び、「語れる構成」から「任せられる構成」へ進化させた、ポートフォリオの集大成です。
また、構成の再現性・自動化・運用性を重視した設計は、SRE的な視点にも通じています。
上図はSPA構成のStep1として、React × Amplify × AWSサービス群による配信・認証・API連携の流れを示しています。
この構成のTerraformによる詳細設計・IaC構成、 および GitHub Actions を用いた CI/CD連携については こちらの技術解説ページをご覧ください。
- SPA配信 S3 × CloudFront × Route53 × ACM によるHTTPS対応・独自ドメイン・CDN配信
- 認証 Cognitoによるユーザ管理とトークン発行
- API処理 API Gateway × Lambda によるバックエンド連携
- データ保存 DynamoDBによるスケーラブルなデータストア
- CI/CD GitHub Actions による自動ビルド・デプロイ・Slack通知
- 構成管理 Terraform によるIaC化と環境分離
- 運用性・信頼性 Terraform × GitHub Actions による構成のコード化と自動化、Slack通知による可視化
- セキュリティ設計 WAFによるCloudFront・API Gatewayの保護、Cognito × JWTによる認証・認可
※
この構成は、SPA案件における「配信・認証・API・運用」の全体像を一貫して設計・構築できることを示すためのアピールページです。
今後は、承認フローやステージ管理の強化に加え、CloudWatchなどの監視機能の導入やSLI/SLOの設計など、SRE的な運用改善にも取り組んでいきます。
また、この構成はSPA構成の進化ステップにおける「ステップ1」に該当します。
今後は、SSR（サーバーサイドレンダリング）やBFF（Backend for
Frontend）、PWA（プログレッシブWebアプリ）など、より高度なSPA構成への拡張も視野に入れています。