CloudFront + S3 環境で MicroCMS を試してみた！

Ryoichi Izumi

2025/12/16に公開

 はじめに前回 CloudFront + S3 環境で React(SSG) を実行しましたが、せっかくなら CMS を使って、ページの更新ができないかなと思い挑戦してみました。

 対象読者これからヘッドレス CMS にチャレンジしてみようと思ってる方

 前提条件執筆時点（2025年12月）の情報を元に作成しています。開発される際は最新の MicroCMS 情報をご確認ください。
個人検証用のため MicroCMS は無料で利用できる Hobby プランを利用しています。

開発の際は、適宜プランを選択してください。
開発環境、CloudFront + S3 環境、デプロイ方法などは前回記事の通りです。試される場合は予めご用意ください。

 ヘッドレス CMS とはヘッドレス CMS（Content Management System）とは、コンテンツ管理機能に特化し、表現層（「ヘッド」）を持たない CMS です。
従来の CMS（WordPress など）では、コンテンツ管理と表示が一体となっていました。一方、ヘッドレス CMS はコンテンツ管理機能のみを提供し、API を通じてコンテンツを配信します。フロントエンドは React、Vue.js、Next.js など自由に選択でき、デスクトップ、モバイル、Web など複数のプラットフォームに同じコンテンツを配信できるという利点があります。
ヘッドレス CMS の主な特徴は以下の通りです。

API ベースの配信: REST API または GraphQL でコンテンツを取得

フレームワーク非依存: フロントエンド技術を自由に選択可能

マルチチャネル対応: 一度作成したコンテンツを複数の媒体で利用

スケーラビリティ: 静的サイト生成（SSG）と組み合わせて高速配信が可能

 なぜ MicroCMS を選択したか今回ヘッドレス CMS として MicroCMS を選択した理由は、以下の通りです。
日本製である

MicroCMS は日本で開発されたサービスです。国内企業による開発のため、セキュリティやサポートが日本の文脈で提供されており、安心感があります。
日本語マニュアルが豊富

公式ドキュメントやチュートリアルが充実した日本語で提供されています。英語のみのサービスと異なり、つまずいた際の情報収集が容易です。
無料プランが充実

開発や小規模なプロジェクトには無料プランで十分です。本番運用時にアップグレードを検討するという使い方ができます。

 MicroCMS の設定方法ここでは MicroCMS の基本的な設定手順を説明します。

 1. MicroCMS への登録公式サイトにアクセスし、アカウントを作成します。


 2. サービス作成管理画面のトップページにアクセスし、画面右上の［+ 追加］ボタンをクリックします。

［+ 追加］ボタンをクリックし、［一から作成する］をクリックします。

※本記事では［テンプレートから選ぶ］は利用しませんので詳しくは公式サイトで！

サービス名とサービスIDを入力し、［サービスを作成する］ボタンをクリックします。

※実際は初期値が入力されていますので適宜変更してください。初期値のままでもよいです。

サービスの作成は完了です。

コンテンツ API の設定

コンテンツ APIとは MicroCMS からデータの取得や登録を行うための基本的なAPIです。

データの取得のみを行う場合は、GET だけ許可したほうがセキュリティ的にも良さそうです。


 3. API スキーマの定義管理画面左側のメニュー内で、「コンテンツ（API）」項目の3点リーダーをクリックし［新しいAPIを作成］をクリックします。

APIの作成画面から［自分で決める］をクリックします。

API の基本情報を入力します。

※下記サンプルプログラムは API 名を articles と設定した状態です。

API の型は「リスト形式」をクリックします。

下記表の通り API スキーマを定義します。


フィールド名
フィールド ID
型


タイトル
title
テキストフィールド

本文
body
リッチエディタ

注: publishedAt はシステムフィールドとして自動的に生成されるため、個別で作成する必要はありません。

［作成］をクリックすると、APIの作成が完了します。

 4. コンテンツの作成左メニューにある作成した API をクリックします。

右上または中央にある［+ 追加］ボタンをクリックします。クリックすると、コンテンツ作成画面に移動します。

テスト用に以下の内容を入力し［公開］をクリックして公開します。


フィールド
入力値


タイトル
React と MicroCMS で始めるヘッドレス CMS

本文
この記事では MicroCMS の基本的な使い方を説明します。

API レスポンス例

上記の設定でコンテンツを作成すると、以下のような JSON が返されます。
{
    "contents": [
        {
            "id": "xxxxxxx",
            "createdAt": "2025-12-01T02:56:41.199Z",
            "updatedAt": "2025-12-01T02:56:41.199Z",
            "publishedAt": "2025-12-01T02:56:41.199Z",
            "revisedAt": "2025-12-01T02:56:41.199Z",
            "title": "React と MicroCMS で始めるヘッドレス CMS",
            "body": "<p>この記事では MicroCMS の基本的な使い方を説明します。</p>"
        }
    ],
    "totalCount": 1,
    "offset": 0,
    "limit": 10
}

 React プログラム作成
 5. 環境構築前回記事のステップ 3 まで行ってください。

 6. 環境変数ファイルの作成フロントエンドから API 呼び出しに使用するため、プロジェクトのルートに .env.local ファイルを作成し、以下の内容を記述します。

本番環境では、.env.local をリポジトリにコミットせず、ホスティングサービスの環境変数設定から設定してください。
NEXT_PUBLIC_MICROCMS_SERVICE_ID=your_service_id
NEXT_PUBLIC_MICROCMS_API_KEY=your_api_key
NEXT_PUBLIC_MICROCMS_SERVICE_ID の確認方法
MicroCMS 管理画面の左サイドバーから「API」を選択します。API 一覧画面に表示されるエンドポイント URL を確認してください。
エンドポイント URL の形式: https://myblog.microcms.io/api/v1/articles
NEXT_PUBLIC_MICROCMS_SERVICE_ID はこの URL に含まれるサービス ID です。上記エンドポイントの場合、NEXT_PUBLIC_MICROCMS_SERVICE_ID は myblog です。
NEXT_PUBLIC_MICROCMS_API_KEY の確認方法
MicroCMS 管理画面の左サイドバーから「設定」を選択します。設定画面の「API キー管理」セクションを確認してください。

 7. サンプルプログラム以下は MicroCMS から記事データを取得し、React で表示するサンプルコードです。

※サンプルプログラムはリッチテキストエディタの情報をエンコードせずそのまま出力していますので、開発する場合は適宜エンコード処理を追加してください。
app/page.tsx
'use client';

import { useEffect, useState } from 'react';

interface Article {
  id: string;
  title: string;
  body: string;
  publishedAt: string;
}

export default function Home() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchArticles = async () => {
      try {
        const svc = process.env.NEXT_PUBLIC_MICROCMS_SERVICE_ID;
        const key = process.env.NEXT_PUBLIC_MICROCMS_API_KEY;

        if (!svc || !key) {
          throw new Error('環境変数が設定されていません');
        }

        const response = await fetch(
          `https://${svc}.microcms.io/api/v1/articles`,
          {
            headers: {
              'X-MICROCMS-API-KEY': key,
            } as HeadersInit,
          }
        );

        if (!response.ok) {
          throw new Error('記事の取得に失敗しました');
        }

        const data = await response.json();
        setArticles(data.contents);
      } catch (err) {
        const errorMessage =
          err instanceof Error ? err.message : '不明なエラーが発生しました';
        setError(errorMessage);
      } finally {
        setLoading(false);
      }
    };

    fetchArticles();
  }, []);

  if (loading) {
    return <p>読み込み中...</p>;
  }

  if (error) {
    return <p>エラー: {error}</p>;
  }

  if (articles.length === 0) {
    return <p>記事がありません</p>;
  }

  return (
    <div>
      <h1>ブログ記事</h1>
      <ul>
        {articles.map((article) => (
          <li key={article.id}>
            <h2>{article.title}</h2>
            <p>{article.body}</p>
            <small>
              {new Date(article.publishedAt).toLocaleDateString('ja-JP')}
            </small>
          </li>
        ))}
      </ul>
    </div>
  );
}

 8. 動作確認とデプロイ前回記事のステップ 6 から確認を行ってください。
確認すること要点

http://localhost:3000/ で MicroCMS の情報が表示されるか
正常にビルドが行えるか
out フォルダの中身を S3 にアップロードし、CloudFront 経由で MicroCMS の情報が表示されるか
ローカルテスト結果

 補足今回 MicroCMS は無料で利用できる Hobby プランを利用しています。

上位のプランでは、API の IP 制限など利用できるようになりますので、適宜調整してみてください。

 まとめヘッドレス CMS は静的サイト生成と組み合わせることで、管理の柔軟性と配信の高速性を両立させる強力なアーキテクチャです。MicroCMS は国内ユーザーにとって取り組みやすいサービスです。ぜひチャレンジしてみてください。

この記事が、誰かのお役に立てば幸いです。

 参考サイトMicroCMS 公式サイト
MicroCMS 操作マニュアル
React 公式ドキュメント
AWS CloudFront + S3 構築ガイド