GitHub PageとNext.jsで静的ページを構築【microCMS】

GitHub Page・Actionsを用いてNext.js静的ページを公開し、データソースとしてmicroCMSを使用する方法について紹介します。microCMSとGitHubをWebhookで連携して、更新があったら再ビルドをしてページを構築します。

1 はじめに
2 microCMSの使用方法
3 microCMSとNext.jsの接続
4 microCMSとGitHub Actionsの接続
5 終わりに

はじめに

どもども！雨に打たれてげんなりしながら出社している龍ちゃんです。会社がざわついていたので。新卒の方の入社が現実になったようです。どうやらオフラインで入社式があったようです。一年前の入社式ではオンラインで行われていたのですが、オフラインだと緊張の度合いが異なりますよね。でも強制的に同期と顔を合わせる機会があったのはうらやましい限りです。

さて今回は、前回記事（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が更新した際に自動で再ビルドを実行することができます。