実装パターン#Cloudflare#デプロイ#ホスティング
Cloudflare Pagesの使い方
Cloudflare Pagesで静的サイトをホスティングする方法。無料で高速なデプロイを実現。
Cloudflare Pagesの使い方
無料で高速なCloudflare Pagesでサイトをデプロイしましょう。
Cloudflare Pagesとは
- 無料の静的サイトホスティング
- 高速なグローバルCDN
- 自動ビルド・デプロイ
- 無制限の帯域幅
Vercelとの比較
| 項目 | Cloudflare | Vercel |
|---|---|---|
| 無料枠 | 無制限 | 月100GB |
| 速度 | 非常に速い | 速い |
| 機能 | シンプル | 豊富 |
| SSR | Functions | 標準対応 |
デプロイ方法
1. GitHubと連携
- Cloudflareダッシュボード → Pages
- 「プロジェクトを作成」
- GitHubリポジトリを選択
2. ビルド設定
フレームワーク: Next.js
ビルドコマンド: npm run build
出力ディレクトリ: .next
3. 環境変数
Settings → Environment variables で設定
カスタムドメイン
- Pages → プロジェクト → カスタムドメイン
- ドメインを入力
- DNS設定（自動）
Workers連携（SSR）
// functions/api/hello.js
export async function onRequest(context) {
return new Response('Hello World')
}
次のステップ
参考文献・引用元
- [1]Cloudflare Pages Documentation- Cloudflare
- [2]Cloudflare Workers Documentation- Cloudflare