Hugo プロジェクトを Cloudflare Pages へデプロイ

Hugo なサイトのホスティングに Cloudflare Pages を使ってみた所感

最終更新: 2021-06-29

Hugo なサイトのホスティングに Cloudflare Pages を使ってみた所感

目次

Cloudflare Pages

Build fast sites. In record time. Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.

Cloudflare Pages

つい先日から Beta として利用可能になったので Hugo プロジェクト (このサイト) をデプロイしてみた。

2021-04-13: 一般公開された Cloudflare Pages is now Generally Available

公式ドキュメント

現状では更新が追いついていないように見える。

Deploy your dynamic frontend applications using Cloudflare Pages! Pages are super fast, always up-to-date, and deployed directly from your GitHub account.

Cloudflare Pages docs

料金

  • 並列ビルド上限: 同時に1ビルドまで
  • ビルド回数の上限: 1カ月に500ビルドまで
  • サイト数: 無制限
  • リクエスト数: 無制限
  • Bandwidth: 無制限

が無料で利用可能。個人利用なら十分。 Netlify など他のホスティングサービスの無料枠と比べても格安の部類に入る。

例えば Netlify だと認証周りは有料だが Cloudflare Pages なら Cloudflare Access が無料で利用可能な点は注目すべきところのように感じる。

デプロイ方法

GitHub リポジトリを連携させ、ビルドコマンドとビルド出力ディレクトリを指定するだけで簡単。

  • ビルドコマンド: e.g. hugo --minify
  • ビルド出力ディレクトリ: e.g. public

フレームワークプリセットが用意されているのでその中から選択することもできる。 例えば Hugo を選択すると上記の設定から --minify を抜いたものがセットされる。

Production 環境

デフォルトブランチのコミットは Production 環境としてデプロイされる。 このサイトの場合 https://peaceiris.pages.dev

コミットごとに https://d1826938.peaceiris.pages.dev/ のような URL が発行され、 https://peaceiris.pages.dev は最新のコミットを反映する。

以下のようにコミットステータスでビルド・デプロイ状況を確認可能。

Cloudflare Pages のビルド・デプロイ状況は GitHub のコミットステータスで確認可能
Cloudflare Pages のビルド・デプロイ状況は GitHub のコミットステータスで確認可能

Cloudflare Pages の Production, Preview 環境の URL やログには GitHub からアクセスしやすい
Cloudflare Pages の Production, Preview 環境の URL やログには GitHub からアクセスしやすい

カスタムドメイン

もちろん割り当て可能。

Preview 環境

現状ではすべてのデフォルトブランチ以外のコミットは Preview 環境としてデプロイされる。 例えばこのサイトの場合 https://d38132a7.peaceiris.pages.dev/ のような URL がコミットごとに発行される。

特定ブランチを指定してデプロイを有効・無効にしたりする機能は今のところ実装されていない。

x-robots-tag: noindex

Netlify などと同様に Preview 環境の HTTP ヘッダーには x-robots-tag: noindex が付与されるので、 (検索エンジン側が正しくこれに従っていれば) 検索エンジンにインデックスされることはない。

$ curl -I https://d38132a7.peaceiris.pages.dev/
HTTP/2 200
date: Mon, 08 Mar 2021 09:18:57 GMT
content-type: text/html; charset=utf-8
set-cookie: __cfduid=d265510bd98b1afab2c88fe9efde784c81615195137; expires=Wed, 07-Apr-21 09:18:57 GMT; path=/; domain=.peaceiris.pages.dev; HttpOnly; SameSite=Lax; Secure
cache-control: public, max-age=0, must-revalidate
etag: 798682abae81fd58d85674ba317d22c1
cf-cache-status: MISS
x-robots-tag: noindex
x-server: Cloudflare Pages
cf-request-id: 08b2bafdeb0000f8b71fbbd000000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"group":"cf-nel","endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=5YcM8m8ngR9bZlgvUfCmEhbHtkqkU15LUDIudB9yYd1q5zvCqXylq1RrtZ%2Bkna7EFg%2Fl5XgYeeRwh8L4MGNQ4YuM9gz5vnw0wVwJ%2B6ySLViu1SwSMbWb0VFZmD2G"}],"max_age":604800}
nel: {"max_age":604800,"report_to":"cf-nel"}
server: cloudflare
cf-ray: 62cafaa97c13f8b7-NRT
alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400

認証

Preview 環境でも Access ポリシーを Cloudflare Access で管理できるようになるらしい。 2021-03-08 現在はまだ利用できない。

2021-04-13: GA アナウンスとともに利用可能となった。

Pull Request Comment

Netlify Deploy Preview と同じようにその Pull Request で最新の Preview URL をコメントに書いてくれる。

Cloudflare Pages は Netlify Deploy Preview と同じようにその Pull Request で最新の Preview URL をコメントに書いてくれる
Cloudflare Pages は Netlify Deploy Preview と同じようにその Pull Request で最新の Preview URL をコメントに書いてくれる

Hugo Version

Hugo は extended version がインストールされる。

現在のデフォルトバージョンは 0.54 で大分古いが HUGO_VERSION でバージョン指定が可能。

HUGO_VERSION 環境変数をセットすることで指定バージョンの Hugo を Cloudflare Pages の runtime へインストール可能
HUGO_VERSION 環境変数をセットすることで指定バージョンの Hugo を Cloudflare Pages の runtime へインストール可能

ただ現状では管理画面から設定するしか方法がないので更新が面倒。 netlify.toml, amplify.yml みたいに設定をファイルで管理できるようになると嬉しい。

Hugo Modules

Cloudflare Pages のビルド環境にはデフォルトで go 1.14.4 がインストールされているため、 Hugo Modules が利用可能。

環境変数 GO_VERSION で指定バージョンの Go をインストールすることも可能で、 Go の他に Elixir, Erlang, Java, Node.js, PHP, Python, Ruby などのプログラミング言語がプリインストールされている。

make, ImageMagick, jq, OptiPNG, Pipenv などのツールも利用可能。

Cloudflare Pages' build environment has broad support for a variety of languages, such as Ruby, Node.js, Python, PHP, and Go (and many more).

If you need to use a specific version of a language, e.g. Node.js or Ruby, you can specify it by providing an associated environment variable in your build configuration, or setting the relevant file in your source code.

Build configuration - Language support and tools | Cloudflare Pages docs

デプロイ完了までにけっこう時間かかる

  • 環境の初期化でだいたい平均2分40秒
  • Go Modules がキャッシュされないので毎回ダウンロードに30~40秒ほど要している

GitHub Actions なら25秒で完了できるビルドに合計3分半の時間が掛かっている。 将来的に改善されていくはず。 CLI でディレクトリをデプロイできるようにしてビルド環境を選べるようになるでも嬉しい。

追記 2021-03-11: 環境の初期化が改善されて30~40秒ほどで完了するようになったため、 Hugo Modules を利用しないのであればビルド完了までの時間は他のホスティングサービスと比べても遜色ないはず。

_redirects でリダイレクト管理

2021-04-13 追記: 以下のようにして _redirects ファイルでリダイレクトの管理が可能

/home / 301
/contact-me /contact 301
/blog https://www.ghost.org 301

Rollbacks and API Access

Announcing Rollbacks and API Access for Pages

2021-06-29 追記: ロールバック機能と API Access が提供開始。

まとめ

Netlify や AWS Amplify Console と並ぶホスティングサービスに成長しそうでとても楽しみ。


こちらもいかが?