Jamstack な構成（Gatsby+microCMS+Firebase）で個人サイトを作成しました

16901 ワード
JAMstack microCMS Firebase フロントエンド gatsby フロントエンド テキストリンク

今年の GW もステイホーム期間でしたので、フロントエンド周りの技術勉強も兼ねて個人サイトを作成してみました。
折しも、 Qiita では「フロントエンド強化月間」となっていましたので、記事にします。

完成したサイト

  • まだ未完成な部分はありますが、 https://www.zakioka.net/ で個人サイトを公開しました。
  • ソースは GitHub のリポジトリに公開しております：

  • 大まかな構成は以下のとおりです：
    • いわゆる Jamstack な構成にしています。
      • 「J」と「M」：Gatsby
      • 「A」：microCMS
      • ビルドとデプロイ：GitHub Actions
      • ホスティング： Firebase Hositing

  • 個人サイトで実現した機能は以下のとおりです：
    • 個人のプロフィール表示
    • Markdown で記述した技術メモを Web ページとして公開
    • microCMS でブログ記事を作成し、それを Web ページとして公開
    • Qiita と note に投稿した記事の一覧ページ
  • Qiita や note よりも気軽なアウトプットの手段が欲しかったというのもあります。
  • Jamstack な構成であれば、 Gatsby + GitHub + Netlify な構成がメジャーのように見えたのですが、色々と比較してみた結果、この構成が自分には使いやすそうということで、この構成にしました。

利用技術・サービス概要

Jamstack

  • 公式サイト
  • CDN（Content Delivery Network）から直接サービスを提供できるサイトを構築するための新しいアーキテクチャ
    • JavaScript、API、および事前にレンダリングされたMarkupの略
    • サーバーとフロントエンドを疎結合にし、サーバーが担っていた機能を外部化してフロントだけで扱いやすくする構成
  • 一般的な Web アプリと違い、静的なコンテンツを配信するだけ
  • 動的なデータはビルド時に取得する
    • ビルドして HTML を生成する際に API からデータを取得して埋め込む
    • データが更新されたタイミングで都度ビルドとデプロイを行う

Gatsby

  • 公式サイト
  • React ベースの静的サイトジェネレータ（SSG）
  • 各種データソースからコンテンツを取得する方法として GraphQL が標準で利用可能
  • プラグインが豊富なため、効率的に Web サイトの機能を追加することが可能
    • スターターテーマも充実しているため、サクッとそれっぽいサイトを立ち上げることも可能
    • SEO 対策も実装されている

microCMS

  • 公式サイト
  • 日本製のヘッドレス CMS
    • ヘッドレス CMS は従来の CMS（WordPress、 Qiita、note 等）と比較して、ビューに当たる部分が無い
      • 入稿したコンテンツは API 経由で取得する
  • 個人サイトレベルであれば無料で利用可能
  • 非技術者でも管理画面がわかりやすい UI となっている。
  • ドキュメントも充実
  • Gatsby での利用にあたっては、公式でプラグインが用意されている

GitHub Actions

  • 公式サイト
  • GitHub だけで CI/CD 的な機能を実現できる機能
  • 操作（リポジトリに対するプッシュやプルリクエスト等）やイベント（指定した時刻になる等）をトリガーとして、あらかじめ定義しておいた処理を実行する
  • 今回は、GitHub のリポジトリへの Push（Gatsby で作成したサイトのソースや Markdown で書いた内容の更新）されたときと microCMS でブログの内容更新を契機とした Webhook を受けたときをトリガーとして、ビルドとデプロイを実行する

Firebase Hosting

  • 公式サイト
  • Firebase はGoogle が提供しているモバイルおよび Web アプリケーションのバックエンドサービス
    • クラウドサービスの形態では mBaaS に位置付けされる
    • 2014年に Google に買収され、Google Cloud Platform(GCP) の仲間入り
    • 現在は GCP の様々なサービスと連携して使うことができる
  • Firebase Hosting は静的な Web ページを公開することができる機能
  • 無料の Spark プランが用意されている
    • 個人サイトレベルではこれで十分
    • 万が一、超過してしまっても勝手に課金されることはない
    • 今回は、ビルド済みの静的サイトをホスティングして Web サイトを表示するために利用する

サイト作成〜公開までの大きな流れ

React と Gatsby のチュートリアルで概要を知る

  • いずれも公式のドキュメントが非常に充実していたので非常に助かりました。
  • 細かい部分は一度ドキュメントを眺めただけでは理解しきれませんでしたが、以下の概要は掴んだつもりです。
    • React のコンポーネント、 state と props 、イベントハンドラ
    • Gatsby におけるデータの扱い（GraphQL）、動的ページの作成
    • React と Gatsby の TypeScript 化

書籍で知識整理

Gatsby でコンテンツ作成

microCMS との連携

  • 公式ドキュメントのチュートリアルに沿って設定ができました。

必要な API の作成

  • 今回はブログ機能を持たせるために、カテゴリ、タグ、ブログ記事の3つの API を作成しました。

    • カテゴリ：「技術記事」「ブログ」等、大まかな分類。1つの記事に対して1つしか付けられないようにする。
    • タグ：記事に付与する具体的な技術名等。1つの記事に対して複数付けられることを想定。
    • ブログ記事：記事の内容。

Gatsby に microCMS の設定を記述する

  • microCMS の API を利用するための API キーは サービス設定 > API-KEY から確認可能です。

  • API キーをソースコードに含めないように、環境変数 MICROCMS_API_KEY に API キーを設定しておきます。また、自身で決めたサービス ID も環境変数 MICROCMS_API_ID に設定しておきます。
  • Gatsby のプラグインをインストールして、プラグインの設定を gatsby-config.js に記述します。
gatsby-source-microcmsのインストール
$ yarn add gatsby-source-microcms
gatsby-config.js
module.exports = {
 //...
  plugins: [
 //...
    {
      resolve: `gatsby-source-microcms`,
      options: {
        apiKey: process.env.MICROCMS_API_KEY,
        serviceId: process.env.MICROCMS_SERVICE_ID,
        apis: [
          {
            endpoint: "post",
          },
          {
            endpoint: "category",
          },
          {
            endpoint: "tag",
          },
        ],
      },
    },
 //...
  ],
}

データを利用した動的ページの作成

  • Gatsby プロジェクトに src/pages/blog/{MicrocmsPost.slug}.tsx を作成し、以下のような内容で作成することで、記事のページが作成できます。
import * as React from "react"
import { graphql, PageProps } from "gatsby"

const PostPage: React.FC<PageProps<GatsbyTypes.BlogPageQuery>> = ({ data }) => {
  const post = data.microcmsPost
  return (
    // 表示するページの内容
  )
}

export const query = graphql`
  query BlogPage($id: String!) {
    microcmsPost(id: { eq: $id }) {
      slug
      title
      content
      publishedAt(formatString: "YYYY.DD.MM hh:mm")
      updatedAt(formatString: "YYYY.DD.MM hh:mm")
      category {
        slug
        name
      }
    }
  }
`

Firebase へのデプロイと独自ドメインの設定

  • Gatsby のプロジェクトに Firebase とツールを入れ、 Firebase Hosting を利用してデプロイしました。
  • 取得していた独自ドメインの設定もしました。
  • 詳細については、自サイトのブログに記載しました。

GitHub Actions で自動デプロイの設定

  • ソースの更新や microCMS のコンテンツを更新・公開を契機に自動でビルド＆デプロイが走るように GitHub Actions の設定を行いました。
  • microCMS のコンテンツの公開・更新時に Webhook で GitHub に通知が行くように設定しました。

  • GitLab CI/CD は触ったことがあるのですが、GitHub Actions は初めてでした。正直、↓のドキュメントの内容ほぼそのままです^^;

.github/workflows/node.yml
name: Node.js CI

on:
  push:
    branches: [main]
  repository_dispatch:
    types: [update-posts]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    steps:
      - uses: actions/checkout@v2
      - uses: actions/cache@v2
        with:
          path: ~/.cache/yarn
          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: yarn install --frozen-lockfile
      - run: yarn build
        env:
          MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
          MICROCMS_SERVICE_ID: ${{ secrets.MICROCMS_SERVICE_ID }}
      - if: github.ref == 'refs/heads/main'
        run: yarn firebase deploy --token $FIREBASE_TOKEN
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

まとめ

  • フロントエンド周りの技術はあまり馴染みがなかったので、改めていろいろと触れてみて勉強になりました。
  • Jamstack という流行りのイケイケな概念に対しては敬遠していた部分もあったのですが、実際に手を動かしてみるとあっさり公開まで行けたなという感じです。
  • Gatsby や Material UI を使いこなせていないので、サイトの見た目周りについては大幅に改善の余地がありそうだなと感じています。
    • Material UI 使ってるので、 Material Design あたりは勉強したほうが良いかな、と思いつつ。
  • 今後も、ちまちまとブログやメモを更新しつつ、以下のことに引き続き取り組んでいこうかなと思います。
    • デザインの細かい変更
      • ブログやメモのデザイン
      • フォントの変更
      • 色の変更
      • 見出しのデザイン
    • ブログやメモのカテゴリ、タグ機能
    • ブログの表示時間が変なので修正する
    • カテゴリやタグごとの一覧表示
    • データ部分と見た目に関する部分の分離
    • コンポーネントの上手い分割
    • ユニットテスト