MD-Blog_Web System

先日、「microCMSテンプレート」がリリースされたので、お試ししてみました。

ヘッドレスCMSでテンプレートとはなんぞや？と思いましたが、フロントエンド部分のサンプル集みたいなものでした。（あってる？？）
JSフレームワークの勉強素材としてはとても参考になります。
とりあえず、microCMSの「テンプレート」を実装してみましょう！

テンプレートを利用する

テンプレートを選ぶ

まずはテンプレートの一覧からお好みの「テンプレート」を選びます。
今回はNext.jsを使った「シンプルなブログ」にしてみます。
使用するAPIも3つなので、Hobbyプラン内に収まります。

GitHubリポジトリの指定

GitHubと連携したのち、「Git Scope」と「リポジトリ」を指定します。
今回はプライベートリポジトリとしています。

microCMS・GitHubセットアップ完了

とりあえずローカルで

先ほど作成した、GitHubリポジトリをSourceTreeでクローンしてローカルにファイルを持ってきました。
「テンプレート」に同梱されている「README.md」に従ってすすめていきます。

Node.js 18 以上を用意

Windowsなので「nvm-windows」を使用して、Node.jsのVer.18を用意。
→ 参考：nvm-windowsでNode.jsバージョン管理）

環境変数の設定

ルート直下に「.env」ファイルを作成して環境変数を設定します。

MICROCMS_API_KEY

microCMS 管理画面の「サービス設定 > API キー」から確認することができます。

MICROCMS_SERVICE_DOMAIN

microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の部分です。

BASE_URL

デプロイ先のURLです。まずはローカルの開発環境なので「http://localhost:3000 」とします。

開発環境の起動

ローカルのフォルダに移動して、
いつも通りまずは「npm install」をして必要なファイルを用意してからの、
「npm run dev」で開発環境を起動します。

起動したところで「http://localhost:3000 」をブラウザで開きます。

まだmicroCMSのサービス「シンプルなブログ」に記事登録がないので、何も表示されません。

記事を登録する

microCMSで記事を登録したのち、「http://localhost:3000 」を再読込すると再レン​​ダリングされ、記事が表示されます。

Vercelに移動する（サーバーレンダリング）

まずはWebホスティングサービス「Vercel」のアカウントを取得して管理画面にログインします。
（※今回はGitHubアカウントを使用してサインアップしています。）
→ 参考：初心者でもできるNext.jsのVercelへのデプロイ方法(GitHub経由)

「Add New...」から「Project」を選択

GitHubのレポジトリを選択

リポジトリを選んで「Import」ボタンをポチッとな。

「.env」の環境変数を入力する

「Add」ボタンを押して環境変数を3つほど入力しました。
※「BASE_URL」はまだ出力先URLが分からなかったので入力していません。

デプロイ！

ファイルの生成が始まり、すこし待つと紙吹雪の舞う完了画面になります。
サムネイル画像をクリックすると、完成したサイトに遷移します。

投稿に連動してデプロイするようにする（Webhook機能）

microCMSの記事を更新に連動して、再リビルドされるように設定します。
設定は、microCMSの管理画面の各APIにある「API設定」→「Webhook」から行います。 → 参考：コンテンツのWebhookを設定

サービスの選択

サービスの一覧から「Vercel」を選択します。

VercelのDeploy Hooks設定を探せ！

「VercelのDeploy Hooks設定で取得できるURL」というのが必要みたいです。

Vercelの管理画面。
Projectを選んだ状態で「Project Settings」内の「Git」へ移動します。

「Deploy Hooks」のところで、適当な名前と、デプロイ時に使用するブランチを指定した後、「Create Hook」でDeploy Hookが作成されます。

表示されたURLを、microCMSの先程の入力欄にコピペして、「設定する」で設定完了です。

試しに、microCMS側で新規記事を投稿して、Vercelのページを再読込してみたところちゃんと記事が反映されていました。

制限について

Vercel

→ 参考：Pricing - Vercel → 参考：Vercelとは？概要や料金、無料プランについて

今回は、Vercelのhobbyプランでやりましたが、個人で遊ぶ分にはほぼ制限はない感じがします。

microCMS

→ 参考：料金プラン｜microCMS

microCMS側はhobbyプランだとAPI（MTでいう記事やカテゴリみたいなもの）が3つまで。
簡素なブログ程度であれば制限に引っかかることはないでしょう。

案件で使う分には、Teamプラン（4,900円～）以上が必須となります。
Businessプランまで行くと、もうPowerCMSより高くなってしまいます。

まとめ

microCMSを使用してサイトを制作しようとすると、フロントエンド部分はまるっと自作しないといけないのでなかなかハードルが高いですが、 用意された「テンプレート」を使用すると結構簡単に実装できました。

世間的にはJSフレームワークを使用した各サービス連合軍のJamstackが流行っていますが、
バックエンドもフロントエンドも単体でまるっとできる「Movable Type」も負けないぞ！

ということで、JamstackもいいけどMovable Typeもご贔屓に。