HappyPaddy::Blog



Cloudflare Pagesへの引っ越しを行うなどをした / 今後について

tags:
Blog
updated_at:
source_url:GitHubで見る

このブログの引っ越しを行い、Cloudflare Pages になりました。それに伴ってカップラーメンを作って食べられるほどのダウンタイムが発生したが、こんなブログを真夜中に読むような知性に配慮させられる筋合いはない。

ホスティングが変わった

前に書いたが、このブログは最初 Netfliy Netlify にデプロイされていた。その後 Firebase Hosting に移行した理由は、Netlify が日本からだと遅い からだった。ちゃんと計測してないので何の信頼性もないが、開発者ツールはあらゆるリソースに 🐢 を貼付していたし Lighthouse も Performance を減点していたので相当遅かったにちがいない。

なお「今からこのブログでもなんでもいいからデプロイして測れや」というようなみなさんの意見にお答えすることはできない。なぜならあらゆる pull request に対してプレビュービルドを生成するようにしたら $7 の請求が発生してアカウントがサスペンドされたからだ。

Firebase Hosting は Twitter で早いって言ってたし実際早かった。しかし静的サイトをホスティングするためだけの用途には Firebase はヘビーすぎる。あと Google 様に縛られるのがなんかムカつく。

Cloudflare Pages は 無料の範囲内で サイト数、リクエスト数、帯域幅が無制限で利用できる。ただし月 500 ビルドまでの制限があり、さらに並列でのビルドが不可能。実際使ってみてわかったのだが 並列ビルド不可はかなり地獄 で、

  • Dependabot がバカスカ bump pull request を撃ちまくるのにプレビュービルドが追いつかないことが多発する
  • プレビュービルドの対象は「プロダクションでないすべてのブランチ」から 変更不能
  • なぜかセットアップ (VM がよいこらどっこいする時間?) に 2 分かかる恵まれたビルド環境

これらが相まってプロダクションビルドのデプロイがコミットから 1 時間後とかになる。2 秒で終わるビルド環境か並列ビルド 100 本かプレビュービルドするブランチを選択する機能か GitHub Actions から push するやつがほしい。まあでもリリース直後だしそのうち何かしらの改善が入ることだろう。

Gatsby.js 剥がすかも

ところで、Dependabot がバカスカ pull request を撃ってくるのは Gatsby.js のプラグインのせいである。どうやらプラグイン自体に変更が入ってなくても Gatsby.js 本体に追従してどんどん bump されるらしく、特定のタイミングでアホみたいにプルリクが来るので前から困っていた。そろそろ Gatsby.js をぶん投げて Next.js に移行する時期かもしれない。と思ったのでブログのコンポーネントから Gatsby.js 依存を剥がすことをやっている。

その他移行がめんどくさいのは plugin にすべて任せている manifest と RSS と MDX、それとページのソートとかか。もちろん切り捨ててもいいわけだけど。

Cloudflare Web Analytics を導入

以前から Google Analytics でアクセス数とかを見ていたわけだが、項目が多すぎてどれを見ればいいのかわからないし、こういうのに詳しくなっても面白くないので別のサービスにしたいと思っていた。ふと見たら Cloudflare がアナリティクスをやってたのでシュッと導入した。変なスクリプトとか入れなくて済むのはいいですね。この記事を書いている時点でまだ Analytics 有効化デプロイがされていないので実際の使用感は書けないのだが、アクセス数とかページロード時間とか Core Web Vitals とかの図があり、求めていたシンプルさという印象。

ライトテーマが生えた

俺はダークテーマが好きなのでダークテーマで作っていたが、ライトテーマ教信者のために光あふれるライトテーマをご用意した。カラースキームが崩壊している (特定の区間で明度が飛びすぎ) なことがわかってよかった。そのうち直す。

Chakra UI はカラーモード切り替えをバッチシサポートしているのでそこまでの苦労はなくできた。useColorModeValue() を使いまくったのがよかったのかはわからないが…。

ちなみに切り替えボタンのような高尚なものは搭載していないので、テーマが変わる様子を見たい場合は OS のテーマを変えるか開発者ツールを使うかすること。

おわりに

クラウド上で記事を編集したいので GitHub Codespaces を早くくれ。まだ全然来てないってツイート からもう半年以上経ってるぞ。