2022年8月24日

Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する

当ブログのシステム構成について紹介します。構成を真似することでほぼ無料（後述）でブログを運営できます。

当ブログの構成概要

いわゆるJamstack構成です。構成を画像で示すと次の通りです。

ブログの構成を表した図

microCMSまたはブログのリポジトリに変更がある場合、VercelのDeploy Hooksを使ってVercel上の環境を更新するようにしています。

Next.js上でビルドするときに、ヘッドレスCMSのAPIを使ってブログの記事などを取得し、Next.jsのgetStaticPropsを使ってStatic Site Generateをできるようにしています。

ブログのコンテンツはVercelが提供しているCDNによってキャッシュされます。

また画像などはAmazon S3上にアップロードしたものを、CloudFrontでキャッシュして配信するようにしています。

もともとこのブログははてなブログ上で書かれていました。

はてなブログを使っていた理由としては、WordPressなどのCMSを使った場合に、本体やプラグインの更新管理が面倒だったのと、投稿画面が使いやすかったためでした。

はてなブログでブログを運用するうちに、Webフロントエンドやサーバーサイドも含めた素振り環境が欲しくなりました。

そうした思いと、はてなブログProで提供されている機能のうち独自ドメインくらいしか恩恵を受けていないことに気づき、ブログを自前で作ろうと思い立ちました。

そこでブログを作り出した当初は、サーバーサイドも含めて作っていました。

ただ作業する中でいつまで経っても完成しない未来が見えたので、サーバーサイド側を作りこむのは諦め、Next.jsを使ってさくっと作って公開することにしました。

使っているサービスやフレームワーク・ライブラリーを表にしました。

この中からヘッドレスCMSの変遷について話します。

はてなブログからNext.jsベースのブログに置き換えたとき、Contentfulを使っていました。

しかし自動保存のタイミングでIMEが確定されて書いた記事の文章がめちゃくちゃになる現象に遭遇して、ContentfulからGitリポジトリにMarkdownファイルをコミットして、事前に記事の情報をまとめたJSONファイルを作る形式に変更しました。

なんで移行しようと思ったかは覚えていないですが、6時間くらいかけてmicroCMSに記事を移行できたようです。

だいたい 6 時間くらいでブログのシステムを Markdown を直接更新する形式から microCMS で記事を入稿する形式にできた
— kubosho (@kubosho_) October 25, 2021

今年実際にかかった料金を表にしました。

最後に当ブログの展望を示します。

現在は記事がSNSなどにシェアされた場合、固定の画像が表示されます。

これを多くのCGMサービスで導入されているように、ブログのテーマに沿った画像を自動生成して使うようにしたいと考えています。

今はサードパーティースクリプトなどが少ないので表示速度が早いですが、広告のスクリプトやWebフォントなどを導入してそれでもなお表示速度が早いというブログにしたいと考えています。

ただVercelのhobbyプランは広告を扱うと商用利用扱いになってProプラン以上の契約が必要になります。なので広告のスクリプトを導入する場合はVercelのProプラン以上を契約するか、商用利用可のホスティングサービスに移動する必要があります。

広告のスクリプトやWebフォントの導入に伴って、パフォーマンス指標の継続的な測定を何かしらでして、パフォーマンス向上施策がどのくらい効果あるのか見られるようにしたいと考えています。

今はただGoogleアナリティクスを導入しているだけですが、コンバージョンの設定なども入れてPV数などを上げるための参考指標を作りたいと考えています。

なるべくブログの記事投稿を楽にしようと思い、ブログの投稿フォームや画像アップローダーを作っています。

この記事が参考になったらブログのリポジトリにスターお願いします！