第6章：Cloudflare Pages / Functions / R2 運用標準

【Cloudflare Pages】自動デプロイ連携

Cloudflare ダッシュボード＞ コンピュート (Workers / Pages) ＞ アプリケーションを作成する ＞ Pagesを導入しようとお考えですか？始める ＞ 既存のGitリポジトリをインポートする ＞始める を開きます。
GitHub Teamのリポジトリ を選択します。
ビルド設定を行います：
- フレームワークプリセット: Astro
- ビルドコマンド: npm run build
- ビルド出力ディレクトリ: dist
「環境変数」 を展開し、以下を登録します：
- MICROCMS_SERVICE_DOMAIN
- MICROCMS_API_KEY
「保存してデプロイ」 をクリック（約1分で本番URLが発行されます）。
（オプション）Deploy Hookの作成:
- Pagesの 設定＞ビルド＞デプロイフック でフックを作成し、URLをmicroCMSのWebhookに設定（記事公開時の自動再ビルド用）。

環境変数（`.env`）の管理ルール

API キーなどの機密情報を GitHub に流出させないための絶対ルールです。

環境	設定場所	備考
ローカル開発	各自 PC の `.env` ファイル	`.gitignore` に記載し、絶対に GitHub へプッシュしない。（`.env.example` のみ共有）
本番環境 (Production)	Cloudflare ダッシュボード＞ Pages ＞設定＞環境変数（本番）	`MICROCMS_API_KEY` などを登録
プレビュー環境 (Preview)	Cloudflare ダッシュボード＞ Pages ＞設定＞環境変数（プレビュー）	本番と同じ、または検証用 API キーを登録

お問い合わせフォーム標準（Cloudflare Pages Functions）

サイトに必須のお問い合わせフォームは、外部のフォームサービスを使わず、Cloudflare Pages Functions（SSR エンドポイント） で完結させます。

配置場所：src/pages/api/contact.ts（Astro の Hybrid モード / API エンドポイント）

import type { APIRoute } from 'astro';

export const prerender = false; // このエンドポイントのみサーバーサイド(SSR)で実行

export const POST: APIRoute = async ({ request }) => {
  try {
    const data = await request.formData();
    const name = data.get('name')?.toString();
    const email = data.get('email')?.toString();
    const message = data.get('message')?.toString();

    // 1. バリデーション
    if (!name || !email || !message) {
      return new Response(JSON.stringify({ error: '必須項目が未入力です。' }), { status: 400 });
    }

    // 2. メール送信処理（例: Resend や SendGrid 等のAPIを叩く）
    /*
    await fetch('https://api.resend.com/emails', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.RESEND_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        from: 'info@yourdomain.com',
        to: 'contact-receive@yourdomain.com',
        subject: `【Webお問い合わせ】${name}様より`,
        text: `お名前: ${name}\nメール: ${email}\n\n内容:\n${message}`,
      }),
    });
    */

    return new Response(JSON.stringify({ success: true, message: '送信が完了しました。' }), { status: 200 });
  } catch (error) {
    return new Response(JSON.stringify({ error: 'サーバーエラーが発生しました。' }), { status: 500 });
  }
};

大容量アセット配信標準（Cloudflare R2）

大学のシラバス・入試要項 PDF、BtoB のホワイトペーパー・製品カタログ、会社説明動画など、容量が数 MB〜数十 MB を超えるファイルは Cloudflare R2（オブジェクトストレージ） を利用します。

[クライアント / 制作チーム] ──(アップロード)──► 【Cloudflare R2 バケット】
                                                    │
                                                    ├─ AWS S3等と違い「データ転送料（Egress料金）が完全無料」
                                                    └─ 独自ドメイン（assets.example.com）を割り当てて配信

R2 運用の標準ルール

公開バケットの作成
- Cloudflare ダッシュボード＞ R2 ＞ バケットを作成（例: clientname-assets）。
カスタムドメインの設定
- バケット設定の「パブリックアクセス」から、assets.clientname.com などのサブドメインを割り当てます。
HTML / Astro 内でのリンク記述
- リポジトリ内には重いファイルを置かず、URL 参照のみで記述します。

<!-- リポジトリを圧迫せず、何万回ダウンロードされても転送料金ゼロ -->
<a href="https://assets.clientname.com/pdf/admission-guide-2026.pdf" target="_blank" class="download-link">
  入試要項（PDF / 15MB）をダウンロード
</a>

独自ドメインと SSL / DNS の標準ルール

ドメイン管理（Cloudflare DNS）
- ネームサーバーを Cloudflare に向けることで、完全無料・自動更新の SSL 証明書、DDoS 攻撃防御、CDN キャッシュ、高速 DNS（1.1.1.1） がすべて一元管理されます。
Pages への割り当て
- Pages プロジェクト＞ 「カスタムドメイン」 ＞ドメイン名（例: www.clientname.co.jp）を入力するだけで、DNS レコードの設定から SSL 発行まで全自動で完了します。