Cloudflare PagesでHUGOのコンテンツを公開 @ Keruru | 2021-04-17T10:00:00+09:00 | 7 分で読めます | 更新日時 2021-05-15T13:00:00+09:00

これまで netlify を使ってきましたが、 Cloudflare Pages が公開されたと言う事で本サイトのコンテンツを移してみました。

Cloudflare Pagesとは

CDNとして有名なCloudflare社が提供するサービスです。今はgithubだけの様ですが、githubと連携してCI/CDを回してくれてWebサイトを構築してくれます。 同様のサービスとしては netlify github Actions + github Pages などなど。

Cloudflare Pagesの制約

Freeプランで使える制約は下記のとおりです。詳細は ドキュメント に記載があります。 個人ユースでは超える事は無いでしょうが、 Proプラン以上の制約はこちら になります。

  • Buildは月間500回まで
    • previewのbuildも出来る
  • 同時にBuild出来るのは1Buildまで
  • ファイル数は20,000ファイルまで
  • 1ファイルあたり25MBまで
  • データ転送量無制限!!

previewのbuildって何のことだろう?と思っていたら、githubでbranchを切った状態でpushすると、branchをプレビュー状態としてbuildしてbranchの内容でpreview用のURLを作ってくれると言う物でした。これ地味にすごい!って思ったのも移行を考えた1つの理由です。branch切って修正してはpushしていけば、実環境を用いてpreview出来るんですよ。しゅごい。

preview buildはまだ微妙? いえ、最高です!!

実際に使ってみるとpreview buildにも課題が見えました。HUGOで運用していますがHUGOの設定ファイル(config.toml)に baseURL を入れているため確かにpreview buildのURLを作ってくれてコンテンツ変更を行ったプルリクエストの内容を含むサイトが出来るものの、baseURL を変更してbuildしてくれる訳では無いのでpreviewとしてはまだ使い辛いと感じました。でもそれは誤解でした。

ふと、それだったらbaseURL指定しなければ良いんじゃないの?!と思い立ってbaseURL指定を “/” に変更してみました。これでばっちり。これでbranchを用いてpreviewが出来ます。しかも先に記述している通りpreviewのbuildは無制限。もうこれはiPadのために生まれてきた機能と言っても過言ではないです。

iPadで Working Copy を用いてcloneしたHugoのリポジトリでbranchを切り編集、pushします。その瞬間にプレビューのbuildが走ります。previewのbuildが完了するとcloudflare pagesのデプロイページにデプロイ単位で ランダムな文字列.リポジトリ名.pages.dev と言うリンクが生まれます。ここにアクセスするとプレビューが見れるんです。

Aliasも作られるのでアクセスも楽々

デプロイ単位でランダムなリンクが生成されるわけですが、もう1つアクセスしやすいリンクが作られます。 ブランチ名.リポジトリ名.pages.dev と言うもの。此方でしたらランダムな文字列と違いCloudflare Pagesのデプロイページを参照しに行かなくても確認が容易ですね。

ノートパソコンなどでHugoを用いている場合 hugo server コマンドを用いてlocalhost:1313にWebサーバを立ててブラウザでプレビューしながら作業する事が多いと思います。しかしiPad上ではHugoが動きませんのでどうしても想像だったりMarkdown Editorのプレビューに頼るしかありませんでした。しかしこれをcloudflare pagesで担ってもらえる事でbuildの度にcloudflare pagesのデプロイページに行ってプレビューのURLを知る必要はありますが、iPadでプレビューを見ることも全部サーバレスで出来るんです。私はVPS上でプレビュー専用のCI/CD環境を作ってましたがこれでもう要らないですね。cloudflare pagesだけで完結します。素晴らしい!!

cloudflare pagesをHugoで使う人は可能ならbaseURLは “/” で運用するのが良いです

構築のポイント

構築自体はとても簡単で 公式に手順も公開 されていますのでその通りに実施するだけでHUGOのサイトが公開できます。英語ですが難しい事書いてないので大丈夫。

忘れちゃいけない点としては公式の手順にも記載がありますが環境変数として HUGO_VERSION を指定することです。 下の例では GO_VERSION も指定してますがこちらは指定しなくて大丈夫ですが、HUGO_VERSION は指定しないと結構古いVersionのHUGOでbuildされてしまうのでテーマによってはBuildでエラーになる可能性があります。

プロダクションとプレビューでバージョンを変える事も出来る様なので、上記の baseURL 問題が解決したらHUGOやGOの新バージョンでの動作確認などもメインのサイトに影響なくオンラインでテスト出来る事になります。個人サイトなのでローカルにDocker等で新バージョンの環境立てて検証するので充分ですが、複数人で運用しているサイトをお持ちの方などはとても助かる機能じゃないでしょうか。

Failed due to an internal error

さて、ここは私がハマったポイントです。公式手順通りにサイト環境を設定、構築したのですが何度試してもログに Failed due to an internal error と出てdeployが失敗します。FAQなどにも特に記載もなく、仕方ないので discord で検索してみても同じように悩んでいる方が居る一方で解決の糸口は特に無く、仕方ないので様々調査をしていました。


結果としては上記のCloudflare Pagesの制約に書いてあるうちの 1ファイルあたり25MBまで と言う制約に引っかかっているみたいでした。 HUGOのコンテンツファイルとしては上記のファイル数も1ファイル辺りのファイルサイズも要件をすべて満たしていたので どうして?! って感じだったのですが、まさかの.gitフォルダ以下に25MBを超えるデータがあった、と言う物でした。HUGOのデプロイとしてはpublicフォルダを指定しているので制約を受けるのはpublicフォルダ配下のコンテンツのみだろう?と考えていたのですが、まさかの.git配下のファイルがこの制約を受けるとは思いませんでした。なるほど確かに595MBのファイルがありますが .gitフォルダを見に行くっていうのはバグじゃないの?

[email protected]:~/hugo-data$ ls -lahR .git/objects/pack/
.git/objects/pack/:
total 595M
drwxr-xr-x  2 keruru keruru 4.0K Apr 17 12:59 .
drwxr-xr-x 12 keruru keruru 4.0K Apr 17 17:53 ..
-r--r--r--  1 keruru keruru 114K Apr 17 12:59 pack-########################################.idx
-r--r--r--  1 keruru keruru 595M Apr 17 12:59 pack-########################################.pack
[email protected]:~/hugo-data$

解決方法

どうやって解決したものか、と考えていたらやはり 公式の手順のissuesの中 にヒントがありました。

Pages cannot serve files located in a .well-known folder.

なるほど、serveしたくないfilesは .well-known に書けと言う事の様です。早速リポジトリのトップディレクトリ(config.tomlと同じ階層)にファイルを作成、ファイルの中には .git と書いてcommitしてみました。その結果、無事deployも完了し、こうやって今このサイトはCloudflare Pagesにて公開、皆様に見ていただけています。良かった良かった。.gitフォルダの中を読んでしまう事象 はバグに近いと思うのでこの手順を踏まなくても良くなる日は遠からず来そうな気がしますが、それまで同じ事象に陥った方は試してみて貰えたらと思います。 discordにも解決方法を書いておいたので きっとそのうち中の人が気付いて直してくれると思います。(issueの投げ方がよくわからん)

このファイルはリポジトリの量やcommit等の回数で増減するのだと思うので、必ずしも再現しない辺りが解決に時間がかかってしまっている要因かも知れませんね。


© 2006 - 2021 Keruruのブログ

Powered by Hugo with theme Dream.

avatar
About Me

ペンネーム/Nick

けるる etc

お仕事

テクニカルライティング/システムエンジニア/ネットワークエンジニア

愛用中のPC
  • NEC LAVIE ProMobile
  • SAMSUNG Chromebook Pro
  • Surface Pro 4
  • ThinkPad T440s
  • GPD Pocket
愛用中のPDA/SmartPhone
  • iPhoneSE 2nd(MAIN/docomo)
  • Unihertz TiTAN(SUB/docomo/SIM FREE)
  • OPPO Reno-A(SUB/rakuten/SIM FREE)
  • iPad Pro 11inch(SUB/docomo/SIM FREE)
愛車
  • MITSUBISHI PAJERO mini ‘2012
  • HONDA CRF250RALLY ‘2018
  • MERIDA SCULTURA4000 ‘2015
  • Carry-Me ‘2016
  • GIOS PANTO ‘2007
  • R&M BD-1 ‘2006
旅の記録2020
行き先など 北海道 海外
2020 12 鬼怒川温泉旅行
2021 02 箱根温泉旅行
旅の記録2010
行き先など 北海道 海外
2010 05 函館観光旅行
2010 09 みなかみ温泉旅行
2011 09 Gios Pantoで自転車旅(札幌・夕張・帯広界隈)
2012 03 パジェミ納車記念上諏訪温泉旅行
2012 08 西伊豆旅行
2012 09 東北キャンプツーリング
2012 10 新婚旅行(NYC-CFO)
2013 09 パジェミで北海道、道東漫遊+念願の旭山動物園
2014 08 三菱スターキャンプ参加
2014 09 台湾旅行(台湾新幹線で高雄にも)
2015 03 九州旅行(うきは旅行)
2015 09 香港旅行
2016 09 北海道ツーリング
2016 09 上諏訪旅行
2017 09 台湾旅行(現地集合現地解散)
2018 05 鹿児島・熊本旅行
2018 09 タイ・チェンマイ旅行
2019 01 高知ツーリング
2019 05 沖縄弾丸旅行
2019 05 別府弾丸旅行
2019 09 ハワイ旅行(まったりホノルルAB&B)
旅の記録2000
行き先など 北海道 海外
2000 08 夏休みで北海道帰省
2001 06 漫画家さん妙高ツーリング
2001 09 RVF400で稚内・網走・釧路・富良野・夕張(初バイク)
2002 07 夏のフーリツーリング
2002 07 CBR954RRで森・函館・稚内・網走・根室・富良野・夕張
2002 09 乗鞍岳ツーリング
2003 09 自転車で北海道(ただし札幌出たあたりで挫折)
2004 09 DJEBEL200で2002年と同じコース
2005 09 DJEBEL200にタンデムで夕張・帯広・士幌・網走・稚内と逆回り
2006 07 大阪観劇の旅(中央線をひたすら乗っていった貧乏旅行)
2007 09 XT660Rでえりも辺りでひたすら道東だけを堪能した北海道ツーリング
2008 08 四国鉄道旅行(サンライズゆめで四国入り、四国内はひたすら鈍行旅
2009 09 台湾旅行(初海外旅行)
2009 09 鈴鹿エンデューロにミニベロで参戦旅行
(C)Keruru. All Rights Reserved