SWA/Amplifyってなんでしょう？
- どちらも、SPA形式のWebアプリをホスティングするためのサービス
- SWA：Azure
- Amplify：AWS
要は・・・
- 静的ファイルの配信
- APIバックエンド環境の提供
何が嬉しいのか
- SPA形式のWebアプリにて必要なのは・・・
静的ファイルの配信 + API - この２つの環境を統合した形で提供するのが、SWA/Amplify
利点
- 安い：サーバーレスアーキクチャにより動作した分のみ課金となる
休眠期間があったり、スモールスタートしたい場合に最適
※ストレージはデータ量に応じた課金もあり - 認証が組み込まれている：楽かつ堅牢に実装できる
- CI/CD（ビルドとデプロイ）が組み込まれていて公開が簡単
- GitHubなどのプルリクと連動して検証用サイトが自動で作成される
etc...
使えるフロントエンドフレームワーク
- SWA：Angular/Blazor(WASM)/Next.js/Nuxt/React/Vue.js
- Amplify：Angular/Next.js/Nuxt/React/Vue.js/
- 理論上はnpmでビルド出来ればなんでもいける
(蛇足)ElmはSWA/Amplifyのどちらも実績あり！
仕組み
- 複数のPaaSの組み合わせで実現されている
- 手動でも構築できるが、非常に手間がかかる
APIについて
- SWA：Azure FunctionによるAPIで実装
- Amplify：GraphQLがデフォルト。ストレージはDynamoDB
- アクセス制御は慎重に設定する必要あり
SWA/Amplify（というかサーバーレスアーキテクチャ）を扱う際の最大の鬼門
最後に
グローバルに稼働するWebアプリを数百円（どうかしたら数十円）で公開できるってすごいと思いませんか？
Gitと連携できるので、バックエンドなしで静的サイトとして使うのもアリだと思います。
ぜひ一度使ってみてください。