Rails・VueアプリをSSG（Static Site Generation）にする方法

1. SSGとは？

SSG（Static Site Generation）は、ビルド時に静的なHTMLファイルを事前に生成し、サーバーやCDNを通じて高速に配信する手法です。

RailsやVueアプリをSSG化すると、パフォーマンスの向上・SEOの強化・サーバー負荷の軽減といったメリットがあります。

2. RailsアプリをSSGにする方法

2.1 JekyllやMiddlemanを使う

Railsアプリをそのまま静的サイトに変換するのは難しいため、一般的にはJekyllやMiddlemanといった静的サイトジェネレーターを活用します。

手順

1. RailsのAPIモードを有効化

rails new my_app --api

RailsをAPI専用のバックエンドとして利用し、フロントエンドは別途静的サイトで構築する。

2. JekyllやMiddlemanをインストール

gem install jekyll
jekyll new my_static_site

Middlemanを使う場合：

gem install middleman
middleman init my_static_site

3. Rails APIからデータを取得し、JekyllやMiddlemanで静的ページを生成

data.json などのAPIエンドポイントを作成し、Jekyllでデータを取得してHTMLファイルを生成する。

2.2 RailsアプリをHugoで静的化

Hugo はGo言語で書かれた高速な静的サイトジェネレーターで、RailsのデータをAPI経由で取得し、静的サイトとして生成可能です。

手順

1. Hugoをインストール

brew install hugo
hugo new site my_static_site

2. Rails APIを作成

RailsをAPIモードにし、JSONを返すエンドポイントを作成。

3. Hugoでデータを取得し、静的サイトとしてビルド

Hugoのテンプレートエンジンを使い、RailsのAPIから取得したデータをHTMLに変換。

3. VueアプリをSSGにする方法

Vueアプリの場合、Nuxt.js（Vue用のフレームワーク）を活用するとSSG化が可能です。

3.1 Nuxt.jsのSSG機能（静的サイトモード）を使う

Nuxt.js 2.13以降では、nuxt generate を使ってSSG化が可能

手順

1. Nuxtプロジェクトを作成

npx create-nuxt-app my-nuxt-app

2. target: ‘static’ を設定

nuxt.config.js に以下を追加：

export default {
  target: 'static'
}

3. 静的サイトを生成

npm run generate

4. ホスティング

Netlify, Vercel, GitHub Pages などの静的サイトホスティングサービスにデプロイ。

3.2 VuePressを使う

手順

1. VuePressをインストール

npm install -g vuepress
mkdir my-vuepress-site
cd my-vuepress-site
vuepress dev

2. Markdownファイルでページを作成

docs/README.md にコンテンツを記述。

3. 静的サイトをビルド

vuepress build

dist/ にHTMLファイルが生成される。

4. ホスティング

Netlify, Vercel, GitHub Pages などの静的サイトホスティングサービスにデプロイ。

4. RailsとVueを組み合わせたSSG

Rails（API） + Vue（Nuxt.js）でSSGを構築する方法

1. RailsをAPIモードでセットアップ

rails new my_api --api

2. Nuxt.jsでフロントエンドを作成

npx create-nuxt-app my-nuxt-app

3. Rails APIをNuxt.jsのデータ取得で利用

pages/index.vue に以下を記述：

<template>
  <div>
    <h1>静的サイト</h1>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('https://my-api.com/items');
    return { data };
  }
}
</script>

4. nuxt generate で静的ファイルを生成

npm run generate

5. デプロイ

Netlify, Vercel, Firebase Hostingなどにデプロイ。

5. まとめ

結論：

• Rails単体なら Jekyll や Hugo を使うのがシンプル
• Vueなら Nuxt.js の SSG機能を活用
• Rails + Vueなら Nuxt.js の asyncData でAPIを取得し、nuxt generate でSSG化

目的に応じた方法を選び、最適なSSG構成を構築しましょう！