はじめに
こんにちは、byoです。
ビットスター Advent Calendar 2021 19日目の記事です。
みなさんは、個人開発していますか？
私は個人開発で得た知識を備忘録としてブログに書き溜めていて、そのためにConoHaのVPSを契約しています。個人開発だとランニングコストは安いなら安いだけ助かりますよね。
Cloudflare Pages を利用することで、ランニングコストを抑えてられたので紹介したいと思います。
Cloudflare Pages について
Cloudflare Pages は、Cloudflareが提供する静的サイトのホスティングサービスです。
Cloudflare Pages を利用する場合、以下の前提条件が必要となります。
- Next.js、Nuxt、Gatsby、Hugoなどのフレームワークを用いてHTMLを生成していること
- GitHub、GitLabを利用してソースコード管理していること
Cloudflare Pages には無料プランがあり、ページ数・リクエスト数・帯域幅ともに無制限で利用できます。
個人ブログ程度なら、無料プランで十分過ぎると思います。
個人ブログの技術スタック
私の個人ブログは、以下のような技術スタックで構成されていたため、Cloudflare Pages の利用に合せて変更は何も必要ありませんでした。
- ConoHa VPS 2Gプラン
- フロントエンド実装 Next.js（SSG） + MATERIAL-UI
- バックエンド実装 Ubuntu + Go（Gin） + MySQL
移行手順
移行手順は、こちらを参考にしてください。
Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ！
上記記事だと、言語設定が英語になっていますが日本も選択できます。
移行前と移行後の変化
いろんなツールを利用して移行前と移行後でどのような変化があるか確認してみました。
1. PageSpeed Insights
移行前
移行後
※ PageSpeed Insightsは、Googleが提供するWebサイトの表示速度などを総合的に評価するツールです。
2. Qualys SSL Labs
移行前
移行後
※ Qualys SSL Labsは、SSLの脆弱性を診断するツールです。
3. HTTP/3 CHECK
移行前
移行後
※ HTTP/3 CHECKは、HTTP/3とQUICをサポートしているか確認するツールです。
まとめ
Cloudflare Pages に個人ブログのフロントエンド部分を移行することで VPSのプランのスペックダウンに成功しランニングコストを抑える事ができました。また、個人で対応するのが面倒なIPv6対応やHTTP/3 & QUIC対応も一緒にできるのでSEO対策にもなるのかなと思います。
Next.js、Nuxt、Gatsby、Hugoなどを利用してウェブサイトを開発している方は、Cloudflare Pages を試してみてください。