🚀 ニフティ’s Notion

WebサイトをCSRやSSRなどをDockerなどで開発し、公開（デプロイ）するときの構成について紹介する。

MVCはサーバを建てるだけなので省略。

ビルドした静的ファイルをストレージに配置。静的なファイルのみを使う場合は、これだけで良い。

• ReactやVue.js, SvelteでCSRの場合はHTML, CSS, JavaScriptをクライアントのブラウザ上で動かすため、レンダリング用のサーバは不要
  • ブラウザの機能でJavaScriptを動かしてやってもらうため
• そのため、HTML, CSS, JavaScriptのビルドファイルを置くコンテンツサーバが有ればよい
• CDN ( Content Delivery Network or Content Distribution Network ）
  • 地理的にユーザーに近い CDN サーバーを用意し、そこにキャッシュを保存することでレスポンスを高速にする
  • 例: AWS Cloudfront , Cloudflare

• Amazon S3
  • 社内ツールならバケットポリシーでIP制限
• GitHub Pages
  • GitHub Enterprise Cloud のOrganizationリポジトリなので、リポジトリのread権限で絞れる

• SPA(CSR), SSG

• 安い
• サーバ運用しなくてよい（サーバレス）

• SSRができないので、機能が絞られる

• サーバを建てるのでサーバの機能が使える。よってSSRが使える
• 常時起動にしろ、スポットで起動するにしろ、サーバを建てるのでお金はかかる

Amazon ECS, Amazon EC2

CSR, SSR, SSG, ISR

• SSRを使用できる

• サーバーがあるのでその分費用が掛かる
• サーバーを運用する場合、デプロイとライフサイクルを考える必要がある

ソースを上げることで一連の流れをやってくれるPaaSがある。費用は掛かるが、手っ取り早く、運用が楽

• AWS Amplify, Cloudflare Pages, Vercel, Heroku

• プラットフォームに依存
• CSR, SSR, SSG, ISR

• ソースを渡すだけでデプロイできる（CD）
• 運用コストがかからない

• やりたいことが出来るかはPlatformに依存する
• 費用が高い

プロダクション環境へ上げるための構成とデプロイについて触れた。次に継続的な開発をするにあたり、使われるフロントエンドのエコシステムについて紹介する。