GitHub PagesをクリーンURL化した記録 〜Cloudflareプロキシ + Transform Rules〜

TECH TALK GitHub Pagesを クリーンURL化した記録 〜Cloudflareプロキシ + Transform Rules〜 2026/07/31 @unsoluble_sugar

この発表の位置づけ 現在個人で開発中（未リリース）のWebアプリの話 リリースに先立って、ドメイン・ホスティング・配信の公開基盤を進めてきた その基盤づくりの最後に残ったのが、URLの見た目の問題だった URLは共有もブックマークも通る場所。リリース前に片付けたかった 今回の題材: 公開基盤を整える中でぶつかった、URLまわりの記録 2

今日話すこと 1 URLが汚い問題 消せないURLと構成 2 設定手順 順序が命の4手順 3 ハマりどころと運用 落とし穴と運用メモ 3

CHAPTER 01 URLが汚い問題

前提：どこに何を置いているか GitHub Pages 1 HTML/CSS/JSを配信 Cloudflare R2 2 75MBのアセット配信 Cloudflare DNS 3 apexドメイン管理 つまり: Cloudflareはすでに構成の中にある。足りないのはリライトの仕組みだけ 5

なぜURLが汚れるのか 本体のHTMLはランタイムの制約で index.dc.html / app.dc.html になる。アプリ側 では変えられない GitHub Pagesがルートに自動配信するのは index.html だけ。リライトエンジンもない 結果、訪問者のアドレスバーに .dc.html が残ってしまう 6

従来の対処と、その限界 これまで リダイレクトスタブ index.htmlを置いて.dc.htmlへ飛ばす。動 くがアドレスバーが書き換わるのは避けら れない 採用 Cloudflareプロキシ オレンジ雲（＝プロキシON）+ Transform Rulesで、見えるURLはそのままに背後だ け書き換える 7

見えるURLは / と /app のまま 8

CHAPTER 02 設定手順

順序が命 Step0 証明書の発行完了を → 確認 Step1 SSL/TLSをFull (Strict) → Step2 Aレコードを プロキシ化 → Step3 Transform Rules 作成 ポイント: 順序を崩すと、リダイレクトループや証明書の発行失敗に直面する 10

⓪ 前提：証明書の発行完了を待つ
発行中にオレンジ雲化すると、GitHub側のDNSチェックを妨げることがある
プロキシ化は「証明書が発行されたあと」でなければならない
gh api repos/<owner>/<repo>/pages \
--jq '{cert_state: .https_certificate.state}'

11

① SSL/TLSをFull (Strict)へ Flexibleのままオレンジ雲にすると、Cloudflare ↔ オリジンがHTTPになる GitHub PagesのHTTPS強制と衝突してリダイレクトループが発生する ダッシュボード → SSL/TLS → 概要 → 暗号化モード を変更 順序の理由: ここを飛ばして雲を切り替えると、この後で必ずループにハマる 12

② apexのAレコードをプロキシ化 Pages用のAレコード4本すべてを「プロキシ済み」へ wwwのCNAMEはグレー雲のまま触らない www → apexのリダイレクトと、約90日ごとの証明書自動更新を維持するため 185.199.108.153 185.199.109.153 nslookup myapp.app 1.1.1.1 185.199.110.153 185.199.111.153 # CloudflareのIPに変わるか確認 13

③ Transform Rulesを2本 ルール名 フィルタ式（http.request.uri.path） 書き換え先（Static） index.dc.html clean-url-root eq "/" app.dc.html clean-url-app eq "/app" or eq "/app/" クエリ: 「保持」に設定して ?theme=dark などを落とさない 14

CHAPTER 03 ハマりどころと運用

踏んだ落とし穴 パスが二重スラッシュに → 入力欄の / は固定表示。 値はスラッシュなしで書く /app/ だけ404 → 末尾スラッシュは別のパ ス。 or で両方を拾う デプロイ直後に古い応答 → エッジ伝播のラグ。数十秒 待って再検証すれば収束する 16

確認はリダイレクト数で行う
check() { curl -s -o /dev/null \
-w "$1 -> %{http_code} (redirects:%{num_redirects})\n" -L "$1"; }
check https://myapp.app/

# 200 redirects:0

check https://myapp.app/app

# 200 redirects:0

check "https://myapp.app/app?theme=dark"

# クエリ保持を確認

diff <(curl -s https://myapp.app/) \
<(curl -s https://myapp.app/index.dc.html)

見るべき値: redirects:0 なら書き換えが効いている
17

R2のCORSにwwwを足す wwwはapexへリダイレクトする。それ でも外から到達しうるオリジンではある { "AllowedOrigins": [ "https://myapp.app", "https://www.myapp.app" apexだけ許可していると、wwwを起点 にした参照でR2が弾かれる コードが参照しうるオリジンを洗い出 し、Origin付きcurlで1つずつ確認する ], "AllowedMethods": ["GET", "HEAD"], "MaxAgeSeconds": 86400 } 18

運用メモ 証明書の更新に失敗したら「グレー雲へ戻す → 再発行 → オレンジ雲」で復旧 リダイレクトスタブは削除しない。プロキシ外時のフォールバックになる 副産物として、Cloudflareのゾーン解析（リクエスト数・帯域）が使えるようになる 19

まとめ 1 順序が全て。証明書の発行完了 → Full 3 経路が増えたら許可リストを見直す。R2 2 wwwのCNAMEはグレー雲のまま。リダイ 4 切り戻せる状態を残す。リダイレクトス (Strict) → オレンジ雲 → Transform Rules レクトと証明書の更新はGitHubに任せる のCORSにwwwを足す タブはフォールバックとして温存 20

リポジトリ変更ゼロ ダウンタイムゼロで クリーンURL化 21

元記事 Cloudflareプロキシ + Transform Rules で GitHub Pages をクリーンURL化した記録 zenn.dev/unsoluble_sugar/articles/f62f1fdc63b8e5 22

• https://zenn.dev/unsoluble_sugar/articles/f62f1fdc63b8e5

ご清聴ありがとうございました @unsoluble_sugar