サーバーレスと静的ホスティング
このページで学ぶこと
Section titled “このページで学ぶこと”- サーバーレスは「サーバーが存在しない」という意味ではないこと
- Web制作で使われる静的ホスティング、CDN、サーバーレス機能の関係
- S3＋CloudFront、Cloudflare Pages、Vercelなどの構成が何を代行しているか
- サーバーレスによって減る作業と、新たに必要になる設計
- サーバー型とサーバーレス型を案件に応じて比較する方法
サーバーレスとは、サーバーを一切使わない構成ではありません。物理サーバーやOSの準備、台数調整などをサービス事業者へ任せ、利用者はコンテンツ、プログラム、設定、データへ集中する考え方です。
Web制作では、関数を実行するサービスだけでなく、静的ファイルの保存・配信、ビルド、CDN、フォーム、画像変換などをマネージドサービスとして利用する構成も、広い意味でサーバーレスな構成として扱われます。
flowchart LR
subgraph 従来のサーバー型
U1[利用者] --> S1[常時稼働するWebサーバー]
S1 --> F1[HTML・画像]
S1 --> P1[プログラム]
P1 --> D1[データベース]
end
subgraph サーバー管理を減らした構成
U2[利用者] --> C2[CDN・静的ホスティング]
C2 --> F2[生成済みHTML・画像]
C2 --> FN2[必要時に動く処理]
FN2 --> API2[CMS・API・データサービス]
end
サーバーレス化は、管理対象をなくすのではなく、自社管理からサービス利用へ移すことです。
サーバーレスという言葉の範囲
Section titled “サーバーレスという言葉の範囲”狭い意味では、アクセスやイベントに応じて短時間だけプログラムを実行するFaaS（Function as a Service）を指します。
広い意味では、利用者がサーバー台数やOSを直接管理せずに利用する、次のようなサービスも含めて考えられます。
- 静的ホスティング
- CDN
- サーバーレス関数
- マネージドデータベース
- SaaS型CMS
- フォームサービス
- 認証サービス
- 画像変換サービス
- 検索サービス
Web制作PMは、「サーバーレスか否か」を厳密に分類するより、何を事業者へ任せ、何が制作側に残るかを整理する方が実務的です。
Web制作でよくある静的ホスティング
Section titled “Web制作でよくある静的ホスティング”静的ホスティングでは、あらかじめ用意したHTML、CSS、JavaScript、画像などを配信します。
代表的な構成例には、次があります。
- Amazon S3へファイルを保存し、Amazon CloudFrontから配信する
- Cloudflare Pagesへビルド済みファイルを配置する
- VercelやNetlifyでGit連携・ビルド・配信を行う
- CDN一体型ホスティングへAstroなどの生成結果を配置する
sequenceDiagram
participant E as 編集者
participant C as CMS
participant G as Git・ビルド
participant H as 静的ホスティング・CDN
participant U as 利用者
E->>C: コンテンツを更新
C->>G: Webhookなどで更新通知
G->>G: HTMLを生成
G->>H: 生成済みファイルを配置
U->>H: ページを要求
H-->>U: HTML・画像を配信
この構成では、利用者のアクセスごとにWebサーバーがページを組み立てる必要がありません。生成済みファイルをCDNから配信できるため、高速・堅牢・低コストにしやすくなります。
一方で、CMS更新後にビルドとデプロイが必要になることがあります。
S3＋CloudFrontを概念的に理解する
Section titled “S3＋CloudFrontを概念的に理解する”Amazon S3はファイルを保存するサービスです。CloudFrontは、保存元からファイルを取得し、利用者に近い配信拠点から届けるCDNです。
単純化すると、次のような役割分担です。
| 要素 | 役割 |
|---|---|
| S3 | HTML、CSS、JavaScript、画像などを保存する |
| CloudFront | ファイルをキャッシュし、HTTPSで広く配信する |
| DNS | 独自ドメインをCloudFrontへ案内する |
| 証明書 | HTTPS通信を成立させる |
| ビルド環境 | CMSやソースコードから配信用ファイルを作る |
S3＋CloudFrontはサーバーが存在しないわけではありません。AWSが多数のサーバーと配信基盤を管理し、利用者は個々のサーバーを直接管理しない構成です。
静的ホスティングとサーバーレス関数は別の役割
Section titled “静的ホスティングとサーバーレス関数は別の役割”静的ホスティングだけでは、次のようなサーバー側処理は行えません。
- 秘密のAPIキーを使う
- フォーム内容を安全に送信する
- ログイン状態を確認する
- 利用者ごとに異なるデータを返す
- 決済処理を行う
- ファイルを変換する
その場合、必要な部分だけサーバーレス関数や外部APIを組み合わせます。
flowchart LR
U[ブラウザ] --> P[静的ページ]
P -->|公開情報| C[ヘッドレスCMS API]
P -->|フォーム送信| F[サーバーレス関数]
F --> M[メール・CRM]
P -->|検索| S[検索サービス]
このように、一つの巨大なサーバーへすべてを置くのではなく、機能ごとにサービスを組み合わせる設計が増えています。
サーバー型とサーバーレス型の比較
Section titled “サーバー型とサーバーレス型の比較”| 観点 | サーバー型 | サーバーレス・マネージド型 |
|---|---|---|
| OS・サーバー管理 | 利用者側に残りやすい | 事業者へ任せやすい |
| 自由度 | 高い | サービス仕様の制約を受ける |
| 拡張 | 台数・性能の設計が必要 | 自動スケールしやすい |
| 課金 | 常時稼働・契約単位が多い | 利用量・ビルド・通信量などが多い |
| 初期構築 | 環境構築が必要 | 比較的短期間で開始できる |
| 障害調査 | 一つの環境で追いやすい場合がある | 複数サービスにまたがる場合がある |
| 移行 | 独自構成ほど難しくなる | 特定サービスへの依存が強いと難しくなる |
| 向く案件 | 特殊処理、既存システム、常時処理 | 静的サイト、API連携、アクセス変動 |
どちらが常に優れているわけではありません。
サーバーレスで減る作業
Section titled “サーバーレスで減る作業”- 物理機器の準備
- OSのインストール
- サーバー台数の調整
- 一部のセキュリティ更新
- Webサーバーの常時監視
- 大量アクセス時の基盤増強
- サーバー停止時の交換対応
ただし、サービスによって任せられる範囲は異なります。
サーバーレスでも残る作業
Section titled “サーバーレスでも残る作業”- コンテンツやプログラムの品質管理
- アカウントと権限管理
- APIキー・秘密情報の管理
- ビルド設定
- キャッシュと更新反映
- ログ・監視
- 外部サービス障害時の対応
- 料金監視
- ベンダー仕様変更への対応
- データ移行とバックアップ
- ライブラリのアップデート
「保守不要」ではなく、保守対象が変わると考えます。
サーバーレスで起きやすい課題
Section titled “サーバーレスで起きやすい課題”ビルドに時間がかかる
Section titled “ビルドに時間がかかる”ページ数が多いSSGサイトでは、CMS更新のたびに多数のページを生成すると、公開まで時間がかかる場合があります。
サービスが分散する
Section titled “サービスが分散する”配信、CMS、フォーム、検索、認証、画像などが別サービスになると、障害箇所や契約管理が増えます。
ベンダー依存
Section titled “ベンダー依存”特定サービス独自の機能を多用すると、移行時に作り直しが必要になる場合があります。
料金の予測が難しい
Section titled “料金の予測が難しい”通常時は安価でも、大量アクセス、過剰なAPI呼び出し、長いビルド、ログ増加などで費用が上がることがあります。
サーバーレス関数には、実行時間、メモリ、ファイルシステム、接続方法などの制約があります。静的ホスティングにもファイル数、ビルド回数、独自ヘッダーなどの制限があります。
実案件ではどう考えるか
Section titled “実案件ではどう考えるか”コーポレートサイト・ブランドサイト
Section titled “コーポレートサイト・ブランドサイト”更新頻度が適度で、ログインや複雑な動的処理が少なければ、静的ホスティング＋CDNと相性がよいケースが多いです。
大規模メディア
Section titled “大規模メディア”ページ数が多く、更新が頻繁な場合、全ページを毎回ビルドする構成では反映時間が問題になることがあります。差分生成、オンデマンド再生成、動的配信なども比較します。
会員サイト・業務システム
Section titled “会員サイト・業務システム”利用者ごとのデータや複雑な処理が多い場合、静的ホスティングだけでは成立しません。サーバー、コンテナ、PaaS、サーバーレス関数などを組み合わせます。
キャンペーンサイト
Section titled “キャンペーンサイト”短期間にアクセスが集中する場合、CDNと自動スケールするサービスが有効です。ただし、応募フォーム、在庫、抽選、個人情報などの処理は別途設計が必要です。
PMチェックリスト
Section titled “PMチェックリスト”- サーバーレスを採用する目的が明確である
- 静的配信する範囲と、動的処理する範囲を分けている
- CMS更新から公開反映までの手順と所要時間を把握している
- ビルド失敗時の通知先と復旧方法を決めている
- プレビュー方法を確認している
- CDN・ブラウザキャッシュの削除方法を確認している
- 外部サービスの契約者・管理者・料金を一覧化している
- サービス障害時の代替表示を決めている
- 利用量増加時の料金と上限通知を確認している
- 解約・サービス移行時にデータとソースを取得できる
- 特定ベンダー独自機能への依存度を把握している
よくある誤解・失敗
Section titled “よくある誤解・失敗”「サーバーレスなのでサーバーは使っていない」
Section titled “「サーバーレスなのでサーバーは使っていない」”実際には事業者のサーバー上で動いています。利用者がサーバーの調達、OS管理、台数調整などを直接行わないという意味です。
「静的サイトなら更新は即時」
Section titled “「静的サイトなら更新は即時」”ファイルを直接更新する場合は即時に近くても、CMS、ビルド、デプロイ、CDNキャッシュを経由する場合は時間がかかります。
「S3に置くだけで本番サイトになる」
Section titled “「S3に置くだけで本番サイトになる」”独自ドメイン、HTTPS、アクセス制御、CDN、エラー表示、ログなどを考える必要があります。実務ではS3単体ではなくCloudFront等を組み合わせることがあります。
「サーバーレスなら障害対応は事業者が全部行う」
Section titled “「サーバーレスなら障害対応は事業者が全部行う」”事業者は基盤障害を担当しますが、自社の設定ミス、コード、データ、連携失敗、代替表示などは利用者側の責任です。
「従量課金なので絶対に安い」
Section titled “「従量課金なので絶対に安い」”アクセスや実行量が増えると料金も増えます。月額の最低費用、上限、転送費、ビルド費、ログ費なども確認します。
理解度チェック
Section titled “理解度チェック”Q1. サーバーレスにサーバーは存在しないのでしょうか。
Section titled “Q1. サーバーレスにサーバーは存在しないのでしょうか。”回答と解説
存在します。事業者がサーバーや実行基盤を管理し、利用者が個々のサーバーを意識・管理しない方式です。Q2. S3＋CloudFront構成で、S3とCloudFrontはそれぞれ何を担当しますか。
Section titled “Q2. S3＋CloudFront構成で、S3とCloudFrontはそれぞれ何を担当しますか。”回答と解説
単純化すると、S3はHTMLや画像等のファイルを保存し、CloudFrontはそれらをキャッシュして利用者へ高速・安全に配信します。Q3. 静的ホスティングで問い合わせフォームを作る場合、何を検討しますか。
Section titled “Q3. 静的ホスティングで問い合わせフォームを作る場合、何を検討しますか。”回答と解説
フォーム送信を処理するサーバーレス関数や外部フォームサービス、スパム対策、個人情報、エラー表示、通知、ログ、障害時対応などを検討します。Q4. CMS更新後すぐにWebサイトへ反映されない原因として、何が考えられますか。
Section titled “Q4. CMS更新後すぐにWebサイトへ反映されない原因として、何が考えられますか。”回答と解説
Webhook未発火、ビルド待ち・失敗、デプロイ失敗、CDNキャッシュ、ブラウザキャッシュ、CMS側の公開状態などが考えられます。Q5. サーバーレス構成の最大の判断軸は何でしょうか。
Section titled “Q5. サーバーレス構成の最大の判断軸は何でしょうか。”回答と解説
新しさではなく、要件、アクセス特性、更新頻度、運用体制、費用、サービス制約に対して、管理を事業者へ移す価値があるかどうかです。- Cloudflare Learning Center「サーバーレスコンピューティングとは？」
https://www.cloudflare.com/ja-jp/learning/serverless/what-is-serverless/
サーバーレスの定義、利用量ベース、オートスケール、基盤を意識しない考え方を理解するための公式解説。 - Cloudflare Learning Center「サーバーレスを使用する理由」
https://www.cloudflare.com/learning/serverless/why-use-serverless/
利点と注意点を確認するための公式解説。 - AWS「Get started with a secure static website」
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/getting-started-secure-static-website-cloudformation-template.html
S3、CloudFront、HTTPSを組み合わせた静的サイト構成の公式例。 - Cloudflare Pages Documentation
https://developers.cloudflare.com/pages/
Gitやビルド済みファイルからグローバル配信するホスティングの公式資料。