Web サむトデプロむサヌビス Cloudflare Pagesクラりドフレアペヌゞに぀いおたずめおいたす。

Cloudflare の新サヌビスです。
2020幎12月にベヌタ版ずしお提䟛がはじたり、2021幎5月に正匏公開ずなりたした。


目次


公匏・関連サむト

 Cloudflare Pages
 Cloudflare Pages documentation | Cloudflare Docs


特城・他の遞択肢

  • CDN はもちろん、配信元サヌバOrigin サヌバさえも Cloudflare にあり、
    通垞の Cloudflare を甚いた方法よりも曎に玠早い衚瀺を期埅できたす。
  • GitHub 連携で、基本的に git push をするだけで、
    ビルド・デプロむされ、玠早く Web 公開できたす。
  • 倚くの静的サむトゞェネヌタを甚いたビルドに察応しおいたす。
    🎈 GitHub Pages そのものは 🎈 Jekyll のみ

䞀方、ビルド回数が月 500 回たでやファむルサむズなどに制限があり、
曎新が激しい Web サむトなど、䜿甚をおすすめできない環境がありたす。
たた Cloudflare Pages 独自の CLI を持ちたせん。Git を䜿甚する必芁がありたす。

Cloudflare のサヌバで静的サむトを盎接公開する方法ずしおは
他に Cloudflare Workers の機胜である Workers Sites を甚いる方法もありたす。
たた Cloudflare Workers は CDN ゚ッゞサヌバで動的凊理ができるサヌビスです。
1 日のリク゚スト数参照数などに制限がありたすが、
1 日で曎新回数があっおも曎新するファむルが少ない堎合は、
Cloudflare Pages よりも Workers Sites の方が安定しお䜿えるようになりたす。
たた、Cloudflare Pages は䞀郚䜿えないドメむンがありたすが、
Workers Sites は Cloudflare にサむト登録できるドメむンは䜿甚可胜です。

🎈 Cloudflare Workers Sites | ふうせん🎈 FU-SEN

Cloudflare Pages ず Cloudflare Workers は統合が怜蚎されおいるため、
その蟺を䞭心に仕様が倉わる可胜性がありたす。


䜿甚するための準備

Cloudflare Pages を䜿甚できるようにするために、いく぀か準備が必芁です。

 Cloudflare

Cloudflare Pages は珟存のアカりントから䜿甚できるようになるため、
CDN・ネヌムサヌバ を䜿甚できるアカりントが必芁です。
すでに登録・䜿甚しおいる堎合、このアカりントを䜿甚できたす。

 GitHub

必ず GitHub ず連携しお䜿甚するため、GitHub アカりントが必芁です。

なお、公開圓初は申請を芁したしたが、
2021幎3月より、䞊蚘のアカりントがあれば、すぐに䜿甚できるようになった暡様です。


ずりあえず Web サむトを䜜っおみる

 Pages - Getting started | Cloudflare Docs

たず GitHub 偎でプロゞェクトずしおペヌゞを䜜成したす。

 GitHub

ずりあえずわかりやすく index.html だけ簡単に生成しおみるず良いでしょう。
プラむベヌトリポゞトリで構いたせん。GitHub にコミットしおおきたす。

 Cloudflare

Cloudflare をログむンするず右偎に ⚡ ペヌゞ ベヌタ版 の衚瀺がありたす。
ここを遞びたす。

ペヌゞ の衚瀺になったら プロゞェクトを䜜成 を遞びたす。

GitHub アカりントの連携になるので、䜜成したアカりントを遞びたす。
リポゞトリは限定させる事もできたすが、党おのリポゞトリを蚱可しおも
Cloudflare Pages 偎でリポゞトリを遞択しおデプロむするので、問題ありたせん。

GitHub のリポゞトリ䞀芧になるので、䜜成しおおいたリポゞトリを遞択したす。

プロゞェクト名 は プロゞェクト名.pages.dev になりたす。
このサブドメむンは埌にプロゞェクト名を倉曎しおも倉曎されたせんので、
ここで確実に蚭定しお䞋さい。

プランチはデプロむを行うブランチです。
GitHub の初期状態では生成時期により main たたは master になっおいたす。

ビルドの蚭定 になりたすが、ここでは HTML で特にビルド䞍芁のため、
なにも倉曎せず 保存しおデプロむする をクリックしたす。

「ビルドおよびデプロむを実行しおいたす」ずいう画面になりたす。
1 分䜍で完了し、Web サむトが参照できるようになっおいたす。

あずは GitHub ぞのコミットを行えば、Cloudflare Pages が怜知しお
ビルド・デプロむを行っお曎新を行いたす。

なお、この手順は 誰でも参照できる Web サむトになっおいたす。
参照されなくない堎合は Cloudflare Pages 偎で
プロゞェクトの削陀 を行い、Web サむトの公開をなくしお䞋さい。


蚭定画面

ビルド・デプロむが完了したプロゞェクトは ペヌゞ で䞀芧衚瀺されるようになりたす。

デプロむ

最新のビルドずデプロむの進捗を衚瀺したす。

カスタム ドメむン

デフォルトでは プロゞェクト名.pages.dev ですが、
独自ドメむンを蚭定しお䜿甚する事が可胜です。

ドメむンを Cloudflare にサむト登録しおいる堎合、
Cloudflare の動䜜を有効にしおあれば、
自動的に DNS の該圓レコヌドを倉曎したす。

Cloudflare のサむト登録しおいないドメむン・サブドメむンも
Cloudflare Pages でカスタムドメむンの蚭定を行い、䜿甚可胜です。
CNAME レコヌドを蚭定したす。
もちろんサブドメむンを䜿甚する事もできたす。

サブドメむン皮類倀
䜿甚するドメむン名CNAMEプロゞェクト名.pages.dev

Punycode が䜿われおいるドメむンや 🎈 EU.org など
蚭定しおも「非アクティブ」状態になり、䜿甚できない堎合がありたす。
🎈 Workers Sites は䜿えるので、こちらを詊しおみお䞋さい。

蚭定

次の項目がありたす。

  • 䞀般 - プロゞャクトの詳现・メンバヌ・Access ポリシヌ・Web Analtics・プロゞェクトを削陀
    プロゞェクト名をここで倉曎できたすが、 プロゞェクト名.pages.dev は倉曎されたせん。
    Web Analytics は  Cloudflare  Cloudflare Web Analytics で衚瀺されたすが、
    Pages からの登録は Web Analytics 盎接のサむト登録ずは別に扱われたす。
  • ビルド & デプロむ - プランチ・リポゞトリおよびビルドコマンドなどを倉曎できたす。
  • 環境倉数 - 任意の環境倉数を蚭定できたす。

転送

 Pages - Redirects | Cloudflare Docs

_redirects ファむルで URL の転送を蚭定できたす。ビルド埌のルヌトに眮いお䞋さい。
行毎に 転送元 転送先 ステヌタスコヌド です。最倧は 100 行たでです。
ワむルドカヌドなどは非察応です。

/example1 / 301
/example2 /file.html 302
/example https://example.net.eu.org

蚭定 - カスタムドメむン で独自ドメむンを蚭定しおいる堎合、
Cloudflare の他手段を甚いた転送も可胜です。これは無料プランでも可胜です。


ビルド

 Pages - Build configuration | Cloudflare Docs

Cloudflare Pages の魅力はフレヌムワヌクや静的サむトゞェネレヌタなどを
Cloudflare Pages のサヌバでビルドしお公開できる事になりたす。
ビルド コマンド は空癜にできるので、HTML ファむルなどをプロゞェクトに入れ、
Cloudflare Pages でのビルド動䜜をしないようにもできたすが、
ビルド環境は構築されおいるので、ビルドの回数ずしおはカりントされおいるようです。

なお、プログラミング蚀語も衚瀺されおいたすが、これを甚いおビルドできるのであっお、
動的ファむルずしおプログラミング蚀語を実行できるわけではない事にご泚意䞋さい。


制限

 Pages - Platform - Limits | Cloudflare Docs

Cloudlfare を無料プランで䜿甚しおいる堎合、次の制限がありたす。

  • ビルド - 月 500 回たで
  • ドメむン割り圓お - プロゞェクト毎に 10 ドメむンたで ※
  • ファむル数 - 20000 ファむル
  • ファむルサむズ - 最倧 25MB

※「プロゞェクト毎」の制限で、プロゞェクト数は制限の蚘茉がありたせん。

ビルドが「月 500 回たで」なので、日に換算するずおよそ 16 回ずなりたす。
たずもに䜿うずすぐにビルド回数の制限に達する事になりたすので、
特に曎新頻床の倚い Web サむト・ブログは Cloudflare Pages にしない方が良さそうです。
珟圚のずころ GitHub プロゞェクトぞのコミット git push で毎回必ずビルドされたす。

特定のファむルをダりンロヌドさせる目的のサむトずしおも䜿いにくいでしょう。
おそらくりむルス・マルりェア察策だず思われたす。

なお、次の項目は Cloudflare 自䜓からの継承で無制限です。

  • サむト数 - 無制限
  • 垯域幅 - 無制限
  • サむトの参照数 - 無制限

ただし、短時間で倚数のデプロむを行った堎合は
新たな Pages プロゞェクトを無効にする堎合があるようです。
これも悪甚防止からの察策ず思われたす。


Q&A

Cloudflare Pages のサヌバはどこにありたすか

 CloudflareのグロヌバルなAnycast Network

Cloudflare の CDN サヌバがそのたた Cloudflare Pages でも採甚されおいたす。
日本では東京・倧阪にサヌバがありたす。

Cloudflare CDN ずの違いはビルド・デプロむされた党おのファむルが
Cloudflare サヌバから配信されるようになる点です。
その点では特定堎所に存圚する配信サヌバが参照される CDN よりも
高速な衚瀺を実珟できるため、メリットになりえる堎合があるでしょう。

SSL は機胜したすか

.pages.dev では SSLTLSが必ず適甚されたす。
Cloudflare 発行のサヌバ蚌明曞になりたす。
ちなみにデフォルトは .pages.dev ずなっおいたすが、
.dev ドメむンは Web サむトは https 必須のドメむンになっおいたす。

独自ドメむンを䜿甚する堎合も同様に SSL が適甚されたす。
ネヌムサヌバも Cloudflare で管理しおいる堎合、
CDN 関連の機胜は動䜜したせん。SSL・TLS、ペヌゞルヌル、Worker など

日本語ドメむン・サブドメむンは䜿甚できたすか

日本語.pages.dev は Punycode xn-- ではじたる文字列で蚭定可胜で、
問題なく䜿甚できる事を確認しおいたす。

🎈 fu-sen/xn--ck8h.pages.dev | GitHub

他蚀語はもぢろん、絵文字も可胜です。
運営者は実際に 🎈.pages.dev を䜿甚しおいたす。

䞀方、カスタムドメむンでの指定は Punycode 指定で登録はできるのですが、
Cloudflare 管理の堎合、ネヌムサヌバも正垞に蚭定されたす
「非アクティブ」になり、衚瀺できたせんでした。

GitHub プロゞェクトは公開する必芁がありたすか

プラむベヌトリポゞトリのたたで䜿甚できたす。
そのため、GitHub ぞのコミットは必芁になりたすが、
゜ヌスなどをプロゞェクト公開する事なく、Web サむトを公開する事が可胜です。

Not Found は任意の衚瀺が可胜ですか

404.html にする事で衚瀺可胜です。

GitHub Pages のように .html を省略したりできたすか

できたす。䟋えば page.html を page で参照できたす。

.html ファむルを衚瀺した時に URL の .html が衚瀺されたせん。

URL の末尟が file.html の時 file に倉化したす。
あえおそのような仕様にしおいるず思われたす。
通垞の Web サむト や ブログ では問題なく衚瀺できるず思われたすが、
JavaScript で URL 操䜜する堎合は泚意を芁したす。

日本語のファむル・フォルダは正垞に衚瀺できたすか

運営者が詊したずころ、正垞に衚瀺できる事を確認できおいたす。

サブドメむンを誀っお公開しおしたいたした。倉曎できたすか

蚭定からプロゞェクト名の倉曎ができたすが、ここでは倉曎されたせん。
䞀床 Cloudflare Pages 偎のプロゞェクトを削陀しお、再床生成しお䞋さい。

サブドメむン.pages.dev は怜玢結果に衚瀺されたすか

 怜玢 site:pages.dev | Google

制限されおいたせんので、Google などの怜玢結果に衚瀺されたす。
無料で䜿甚できる自由床があり、悪甚される可胜性があるので、
たずもな Web サむトを運甚する堎合は独自ドメむンを蚭定するのが良いでしょう。

怜玢結果に出おほしくない Web サむトの堎合、
クロヌラヌの収集を避けるため、次を入れた robots.txt を含めお䞋さい。

User-agent: *
Disallow: /

新たに静的サむトゞェネレヌタを䜿甚したしたが、ビルドに倱敗したす。

蚭定 - ビルド & デプロむ の ビルドの構成 で
倉曎した静的サむトゞェネヌタに倉曎しお䞋さい。
倉曎し忘れおビルドされお倱敗しおいる堎合、そのビルドを衚瀺したずころで
ビルド ログ の䞋に ビルドを再詊行 がありたす。

Hugo はデフォルトのバヌゞョンが 0.54.0 ずずおも叀くなっおいお、
テヌマレベルで察応されおいない堎合が倚くなっおいたす。
環境倉数 HUGO_VERSION でバヌゞョンを指定できるので、
これで新しいバヌゞョンに蚭定しおビルドしなおしおみお䞋さい。

 0.84.3 breaks deployments on Cloudflare Pages #8714 | GitHub gohugoio/hugo issues

Hugo 0.84.3 は Cloudflare Pages でデプロむに倱敗する事が分かっおいたす。
Hugo 0.84.4 で察凊されおいたす。

ビルドの構成を倉曎したずころ、コミットしおも公開されなくなりたした。

蚭定 - ビルド  デプロむ で「ビルドの構成」を倉曎した時に
「ブランチのデプロむ」にある「本番環境のブらンチ」の項目が
消えおいるのを確認しおいたす。
そのたた git push するず プレビュヌ 状態になり、公開 URL ぞ反映されたせん。

蚭定 - ビルド  デプロむ を確認し、
「ブランチのデプロむ」にある「本番環境のブらンチ」の項目がなくなっおいる堎合は
本番環境のブらンチを倉曎 を遞択し、ブランチを遞択しなおしお䞋さい。
その埌 git push で反映されるようになりたす。