WebサイトをCSRやSSRなどをDockerなどで開発し、公開（デプロイ）するときの構成について紹介する（基本 node だけあれば良いので、nvm など、 docker を使わない人もいるらしい）。
MVCはサーバを建てるだけなので省略。
静的ホスティング
ビルドした静的ファイルをストレージに配置。静的なファイルのみを使う場合は、これだけで良い。
- ReactやVue.js, SvelteでCSRの場合はHTML, CSS, JavaScriptをクライアントのブラウザ上で動かすため、レンダリング用のサーバは不要
- ブラウザの機能でJavaScriptを動かしてやってもらうため
- そのため、HTML, CSS, JavaScriptのビルドファイルを置くコンテンツサーバが有ればよい
-
CDN(Content Delivery NetworkorContent Distribution Network）- 地理的にユーザーに近い CDN サーバーを用意し、そこにキャッシュを保存することでレスポンスを高速にする
- 例:
AWS Cloudfront,Cloudflare
例
- Amazon S3 / Azure Blob Storage
- GitHub Pages
どのフロントエンドの構築方法で使用できるか
- SPA(CSR), SSG
メリット
- 安い
- サーバ運用しなくてよい（サーバレス）
デメリット
- SSRができないので、機能が絞られる
サーバを建てる
- サーバを建てるのでサーバの機能が使える。よってSSRが使える
- 常時起動にしろ、スポットで起動するにしろ、サーバを建てるのでお金はかかる
- 例: 手前に ALB を置いて OIDC 認証する
例
- Amazon ECS
- Amazon EC2
どのフロントエンドの構築方法で使用できるか
- CSR, SSR, SSG, ISR
メリット
- SSRを使用できる
デメリット
- サーバーがあるのでその分費用が掛かる
- サーバーを運用する場合、デプロイとライフサイクルを考える必要がある
Cloudfront + ALB + ECS
サーバレスで動かす
常時起動するサーバを持たず、リクエスト単位で処理を実行する構成。
SSRやAPI処理をサーバレスに実現できる。
例
- AWS Lambda
- Cloudflare Workers
- Azure Functions
- Google Cloud Functions
どのフロントエンドの構築方法で使用できるか
- CSR, SSR, SSG, ISR
- ただし利用するフレームワークや実行基盤に依存する
メリット
- サーバ運用が不要
- アクセス量に応じてスケールしやすい
- リクエスト単位で課金されるため、小規模では安く済むことがある
- Edge Runtimeを使うとユーザーに近い場所で処理できる
デメリット
- 実行時間やメモリなどの制約がある
- デプロイパッケージや一時ストレージに容量制限がある
- 静的ファイルは S3 や CDN に配置するなどの工夫が必要
- コールドスタートを考慮する必要がある
- Node.jsの全機能が使えない場合がある
- Next.jsなどを動かす場合、OpenNextのような変換レイヤーが必要になることがある
- PaaSと比べると構成の理解や運用設計が必要
PaaS
ソースを上げることで一連の流れをやってくれるPaaSがある。費用は掛かるが、手っ取り早く、運用が楽。
例
- AWS Amplify
- Cloudflare Pages / Cloudflare Workers
- Vercel
- Heroku
どのフロントエンドの構築方法で使用できるか
- プラットフォームに依存
- CSR, SSR, SSG, ISR
メリット
- ソースを渡すだけでデプロイできる（CD）
- 運用コストがかからない
デメリット
- やりたいことが出来るかはPlatformに依存する
- 費用が高い