Cloudflare Pages + Astro で独自ドメインを綺麗に公開する手順

kofonte.jp を Cloudflare Pages で公開しつつ、独自ドメインに紐づける際の DNS / リダイレクト構成をまとめます。

ゴール#

https://www.kofonte.jp で本サイトを配信
https://kofonte.jp （apex）にアクセスされたら 301 で www に集約
hello@kofonte.jp などの M365 メール（MX/SPF/DKIM/DMARC）は維持

DNS レコード構成#

Cloudflare DNS で以下のように設定します。

TYPE    NAME         CONTENT                                PROXY
CNAME   www          kofonte-portfolio.pages.dev            Proxied (orange)
AAAA    @            100::                                  Proxied (orange)  ← apex リダイレクト用ダミー
MX      @            <M365 の MX>                           DNS only
TXT     @            v=spf1 include:spf.protection.outlook.com -all
TXT     selector1._domainkey   <DKIM>
TXT     _dmarc       v=DMARC1; p=quarantine; ...

apex を www にリダイレクト#

Cloudflare の Rules → Redirect Rules で 1 件追加。

When incoming requests match:
  hostname equals "kofonte.jp"
Then:
  Type: Static
  URL redirect: https://www.kofonte.jp$1
  Status code: 301
  Preserve query string: ON

AAAA @ 100:: はあくまで Cloudflare のプロキシを経由させるためのダミーターゲットで、実体はリダイレクトされるので応答しません。

CSP・セキュリティヘッダー#

public/_headers に以下を入れてあります。

/*
  Content-Security-Policy: default-src 'self'; img-src 'self' data:; ...
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Resource-Policy: same-origin
  Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

これで securityheaders.com で A+ 評価になります。

反映確認#

# DNS 伝搬
nslookup www.kofonte.jp

# リダイレクト
Invoke-WebRequest https://kofonte.jp/ -MaximumRedirection 0 -SkipHttpErrorCheck |
  Select-Object StatusCode, @{N='Location';E={$_.Headers.Location}}

# セキュリティヘッダー
(Invoke-WebRequest https://www.kofonte.jp/ -Method Head).Headers

まとめ#

www にコンテンツを CNAME proxied で紐付ける
apex は AAAA 100:: proxied + Redirect Rule で 301 を返す
M365 メールレコードはそのまま温存

この構成なら自前メール運用と静的サイト配信を両立できます。