GitHub Page・Actionsを用いてNext.js静的ページを公開し、データソースとしてmicroCMSを使用する方法について紹介します。microCMSとGitHubをWebhookで連携して、更新があったら再ビルドをしてページを構築します。
目次
はじめに
どもども!雨に打たれてげんなりしながら出社している龍ちゃんです。会社がざわついていたので。新卒の方の入社が現実になったようです。どうやらオフラインで入社式があったようです。一年前の入社式ではオンラインで行われていたのですが、オフラインだと緊張の度合いが異なりますよね。でも強制的に同期と顔を合わせる機会があったのはうらやましい限りです。
さて今回は、前回記事(GitHub PageとNext.jsで静的ページを構築)の基盤を利用して【microCMS】をデータソースとしてブログを構築する方法について紹介していきます。また、Webhookを利用して【microCMS】でデータの更新が入った際に、GitHub Actionsを再度走らせる方法の設定を行います。
今回の記事で分かることになる予定は以下になります。
- microCMSの情報を基に静的ページを作成する
- GitHub ActionsとmicroCMSの連携(Webhook)
【microCMS】の基本的な使用方法についてはリンクのみの紹介になります。【microCMS】自体、使用方法が単純なのでいろいろと作成することができると思います。
それでは初めて行きましょう。
microCMSの使用方法
基本的な使い方に関しては、世の中にいろんな記事が出ています。そして公式のブログがとても分かりやすい記事になっています。チュートリアルとタグ付けされているブログは、トピックが絞られていてとても有用な記事です。その中でも以下の記事はとりあえず読みましょう。
サービスを作成して、スキーマを作成してエンドポイントを作れば使用することができます。あとはゴリゴリ使用することができます。
microCMSとNext.jsの接続
Next.jsとmicroCMSとの接続部分もチュートリアルとして公開されています。こちらのサンプルではVercelを利用してデプロイまでを行っています。序盤のソース部分はそのまま流用することができます。
Next.jsでmicroCMSを利用する場合は、microcms-js-sdkを利用することで簡単にアクセスすることができます。SDKをインストールします。
yarn add -D microcms-js-sdk
環境変数として、serviceDomain
とapiKey
を任意の名前で保存しましょう。私の環境では、MICROCMS_APP_DOMAIN
とMICROCMS_APP_KEY
で保存しています。保存の方法については前回の記事で紹介しています。
import { createClient } from "microcms-js-sdk";
export const client = createClient({
serviceDomain: process.env.MICROCMS_APP_DOMAIN || "",
apiKey: process.env.MICROCMS_APP_KEY || "",
});
あとは、こちらの定義を利用して値を取得します。
import { GetStaticProps } from 'next';
import { client } from '@/lib/microSMCClient';
export const getStaticProps: GetStaticProps<Props> = async () => {
const data = await client.get({ endpoint: 'blogs' });
return {
props: {
blog: data.contents,
},
};
};
type BlogType = {
id: string;
publishedAt: Date;
title: string;
category: CategoryType[];
content: string;
image: ImageType;
};
type CategoryType = {
name: string;
color: string;
};
type ImageType = {
url: string;
height: number;
width: number;
};
type Props = {
blog: BlogType[];
};
const BlogPage = (props: Props) => {
const { blog } = props;
return (
<main id="blog">
<ul className="flex flex-row items-center">
{blog.map((value) => (
<h1 key={value.id}>
{value.id} {value.title} {value.publishedAt.toLocaleString()}
<a href={`blog/${value.id}`}>link</a>
</h1>
))}
</ul>
</main>
);
};
export default BlogPage;
Next.jsのSSGを利用してビルド時に情報を取得して、取得した情報を基にブログが面を生成します。GitHub ActionsでSSGを利用して静的ページを作成するので、その用途でコードを書く必要があります。あとは適宜、デザインを作成してください。
microCMSとGitHub Actionsの接続
それでは、本題に入っていきます。とりあえず、静的サイトを作るために必要な情報としては、MICROCMS_APP_DOMAIN
とMICROCMS_APP_KEY
になります。前回のブログで取り扱ったように、GitHubの方で環境変数として情報を保存してください。
microCMSではGitHub Actionsと連携して、microCMSで情報を編集するとWorkflowを走らせるといった連携を行うことができます。 設定には以下の手順が必要になります。
- GitHubでTokenの取得
- microCMSでWebhook登録
- GitHub Actionsのymlファイルを少し修正
順番に解説を進めていきます。
GitHubでToken取得
まずは、GitHubのページを開きましょう。右上の個人設定から「settings」を開きましょう。以下の画面が出てきていれば正解です。
メニューバーを下にスクロールをすると「Developers settings」が出てくるのでクリックしてください。
以下の画面になれば成功です。赤枠部分のどちらかでアクセストークンを生成することができます。セキュリティの都合上割愛しておきますが、UIがしっかりしているので「Tokenの名称」と「利用期限」をマストで設定することでTokenを発行することができます。
ここで取得したTokenはmicroCMSの設定で使用するので保持しておきましょう。
microCMSでWebhook登録
それではmicroCMSの方の設定を行っていきます。まずはmicroCMSのページを開きましょう。作成しているアプリのページまで飛んでください。その後、「データの更新とGitHub Actionsを連動させたいAPIを選択して」開きましょう。画面右上の『API設定』をクリックしてください。
『API設定』のメニューバーから『Webhook』を選択してください。赤枠の追加をクリックすることでポップアップが開くので、『GitHub Actions』を選択しましょう。
以下の画面が出れば成功です。ここで表示されている内容を埋めれば作業は終了となります。
二か所だけ自分で埋める必要のある部分があるので解説を入れておきます。『Webhoonkの識別名』は任意の文字列で問題ありません。重要な内容としては、『トリガーイベント名』は「update-posts」としておきましょう。ここで設定したキーワードがトリガーとなってGitHub Actionsを実行することができます。トークンは先ほど発行した値をペーストしましょう。
GitHub Actionsのymlファイルを少し修正
あとは、【microCMS】から通知を受け取り、更新を反映させるだけです。以下に一部を抜粋した内容を記載します。
on:
# Runs on pushes targeting the default branch
push:
branches: ['main']
repository_dispatch:
types: [update-posts]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
『repository_dispath』の部分が追記した部分になります。ここと【microCMS】で設定した『トリガーイベント名』が一致することで特定のAPIが更新した際に自動で再ビルドを実行することができます。
終わりに
今回は、コードというよりGUIから設定を行う方法を重点的に紹介しました。GitHubのTokenを取得する方法が見つかりづらかったので頑張って探しました。いろんなサイトを見回って構築することができました。今回使用したサイトは以下にまとめておきます。
- GitHub ActionsへのWebhook通知に対応しました
- GitHub Actions を用いて Jamstack な構成の Web サイトを自動でデプロイする
- microCMSのコンテンツを更新した時に、WebhookでGitHub Actionsを実行する
このサイトの画像と上のリンクを組み合わせたら完璧に近い形で自動再ビルドの構築を行えると思います。
今回の記事は若干萎えた痕跡が見えてしまいますね。頑張ってブログを継続していきます。
それではまた~