Nuxt3・MicroCMS・GitHub Pagesで爆速JamStackサイトを構築！

Webサイトの表示速度が遅い、運用コストが高い、セキュリティ面が不安…そんな課題を抱える開発者や企業担当者の方はいませんか？　現代のWeb開発において、これらの課題を解決し、さらに高いパフォーマンスと優れた開発体験を提供するJamStackアーキテクチャが注目されています。

本記事では、フロントエンドフレームワークのNuxt3、ヘッドレスCMSのMicroCMS、そして無料ホスティングサービスのGitHub Pagesを組み合わせることで、高速、安全、そして低コストなJamStackアプリケーションを構築する具体的な方法を解説します。開発効率の向上と運用コストの削減を実現したい方は、ぜひ最後までご覧ください。

JamStackとは？モダンWeb開発の新常識

JamStack（ジャムスタック）とは、JavaScript、APIs、Markupの頭文字を取ったWeb開発アーキテクチャのことで、事前に生成された静的なHTMLファイルをCDN（Contents Delivery Network）経由で配信する仕組みです。

主なメリットは以下の通りです。

• 超高速な表示速度: サーバーサイドでの動的な処理が不要なため、キャッシュが効きやすく表示が爆速です。
• 高いセキュリティ: データベースやサーバーへの直接アクセスがないため、攻撃対象が少なくセキュリティリスクを低減できます。
• 優れたスケーラビリティ: CDNがコンテンツを配信するため、トラフィックの急増にも柔軟に対応できます。
• 低コストな運用: 静的ファイルのホスティングは安価、あるいは無料で行えるケースが多いです。

これらのメリットを享受するために、私たちはNuxt3、MicroCMS、GitHub Pagesという最適な組み合わせを選択しました。

Nuxt3で開発体験を最適化

Nuxt3は、Vue.js 3をベースにしたフルスタックフレームワークで、サーバーサイドレンダリング（SSR）や静的サイトジェネレーション（SSG）など、様々なレンダリングモードに対応しています。JamStackにおいては、このSSG機能を利用して事前に全てのページを静的ファイルとして生成します。

Nuxt3は、TypeScriptの強力なサポート、自動ルーティング、コンポーネントの自動インポートなど、開発者が快適に開発を進めるための多くの機能を提供し、開発効率を大幅に向上させます。

ヘッドレスCMS MicroCMSの魅力

コンテンツの管理には、国産ヘッドレスCMSのMicroCMSを活用します。ヘッドレスCMSは、コンテンツの管理機能と表示機能を分離したシステムで、APIを介してコンテンツを配信します。

MicroCMSは、直感的で使いやすい管理画面が特徴で、開発者でなくても簡単にコンテンツの作成・更新が行えます。これにより、コンテンツ作成とWebサイト開発を並行して進めることが可能になり、リリースまでの時間を短縮できます。

無料かつ手軽なホスティング：GitHub Pages

構築した静的サイトのホスティングには、GitHub Pagesを利用します。これはGitHubリポジトリから直接静的サイトを公開できるサービスで、無料で利用できる点が大きな魅力です。

GitHubと連携が容易なため、コードのプッシュと同時にサイトが更新されるようなCI/CD（継続的インテグレーション/継続的デプロイ）環境を簡単に構築でき、デプロイの自動化に貢献します。

Nuxt3・MicroCMS・GitHub Pages連携の実装例

ここでは、Nuxt3プロジェクトのセットアップから、MicroCMSとの連携、そしてGitHub Pagesへの自動デプロイまで、主要な実装ポイントを抜粋してご紹介します。

Nuxt3プロジェクトの初期設定

Nuxt3プロジェクトを作成し、静的サイト生成 (SSG) の設定を行います。

# Nuxt3プロジェクトの作成
npx nuxi init <project-name>
cd <project-name>
npm install

# .envファイルを作成しMicroCMSのAPIキーを設定
touch .env
echo "MICROCMS_API_KEY=YOUR_MICROCMS_API_KEY" >> .env
echo "MICROCMS_SERVICE_DOMAIN=YOUR_MICROCMS_SERVICE_DOMAIN" >> .env

nuxt.config.ts にて、`prerender.routes` でMicroCMSから取得した記事のルーティングを設定し、SSGでの動的ページ生成を可能にします。

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
import axios from 'axios' // axiosをインポート

export default defineNuxtConfig({
  ssr: true, // SSRを有効にするが、SSGとしてビルド
  runtimeConfig: {
    public: {
      microcmsApiKey: process.env.MICROCMS_API_KEY,
      microcmsServiceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
    }
  },
  // 静的サイト生成時の動的ルーティング
  nitro: {
    prerender: {
      async routes() {
        const apiKey = process.env.MICROCMS_API_KEY;
        const serviceDomain = process.env.MICROCMS_SERVICE_DOMAIN;
        if (!apiKey || !serviceDomain) {
          console.error("MicroCMS API key or service domain is not set.");
          return ['/'];
        }

        const headers = { 'X-MICROCMS-API-KEY': apiKey };
        const url = `https://${serviceDomain}.microcms.io/api/v1/blogs`; // blogsはご自身のAPIスキーマ名に合わせる

        try {
          const response = await axios.get(url, { headers });
          const contents = response.data.contents;
          // 各記事のパスを生成
          const blogRoutes = contents.map((content: any) => `/blog/${content.id}`);
          // トップページとブログ記事のルートを返す
          return ['/', ...blogRoutes];
        } catch (error) {
          console.error('Failed to fetch MicroCMS content:', error);
          return ['/'];
        }
      }
    }
  },
  // GitHub Pagesでホストする場合のベースURL設定 (必要に応じて)
  app: {
    baseURL: process.env.NUXT_APP_BASE_URL || '/', // GitHub Pagesのサブディレクトリ設定に対応
    buildAssetsDir: 'assets', // デフォルト
  }
})

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

リポジトリのルートに .github/workflows/deploy.yml を作成し、GitHub Pagesへの自動デプロイを設定します。

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # mainブランチへのpushで実行

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18 # Nuxt3が推奨するNode.jsのバージョン

      - name: Install dependencies
        run: npm install

      - name: Build Nuxt project (SSG)
        run: npm run generate
        env:
          MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }} # GitHub SecretsからAPIキーを取得
          MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_SERVICE_DOMAIN }} # GitHub Secretsからサービスドメインを取得
          NUXT_APP_BASE_URL: '/<your-repository-name>/' # GitHub Pagesでサブディレクトリを使用する場合

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist # Nuxt3の生成先ディレクトリ
          # cname: example.com # カスタムドメインを使用する場合

MicroCMSのAPIキーやサービスドメインは、GitHubリポジトリの「Settings」>「Secrets and variables」>「Actions」で設定しておきましょう。これにより、セキュリティを確保しつつ環境変数として利用できます。

まとめ：モダンWeb開発で未来を切り開く

本記事で紹介したJamStack構成は、従来のWeb開発における多くの課題を解決し、高いパフォーマンスと効率的な運用を実現します。Nuxt3とMicroCMS、GitHub Pagesの組み合わせは、まさにモダンWeb開発のベストプラクティスと言えるでしょう。

• 超高速なサイト表示速度によるユーザー体験の向上
• 優れたSEO効果と検索エンジンでの視認性アップ
• セキュアなシステム構成による安心感
• 運用の低コスト化と管理の容易さ
• 開発者とコンテンツ担当者の負担軽減

これらのメリットを享受し、あなたのWebサイトやアプリケーションを次のレベルへ引き上げましょう。ぜひ本記事を参考に、JamStackでのWebアプリケーション構築に挑戦してみてください。

作成したアプリケーション

MicroCMS で記事を投稿すると、GithubAction が動作してSSG をGenerate 後、Github Pages に自動的にサイトを更新するようにしています。

デモ

https://isystk.github.io/nuxtjs-jamstack-sample/

主な機能

• 投稿一覧
• 投稿詳細

プロジェクトの概要

jamstackについて学習する為のサンプルアプリケーションです。jamstackを知るためには、ここHeadlessCMS や SSG など、ここ最近のフロントエンドの仕組みを知っておく必要があります。 以下は今回作成したアプリケーションのシステム構成になるので参考にしてください。

Micro CMS でコンテンツを管理

Micro CMS でコンテンツが更新された際に、WebHookを利用して、Github Action を実行させることで、最新のコンテンツが反映されるようにしています。

Github Action の設定

ソースコード

https://github.com/isystk/nuxtjs-jamstack-sample