Nuxt で作ったサイトを「できるだけ簡単・高速・安定」に公開したいなら、Cloudflare Pages は最強クラスの選択肢です。ビルドもデプロイも自動、しかもグローバルCDNで爆速。この記事では、Nuxt プロジェクトを Cloudflare Pages で静的サイトとして公開するまでの流れをまとめて解説します。
概要
Cloudflare Pages は Git と連携して動く静的ホスティングサービスです。Nuxt（特に Nuxt 3）では nuxi generate による静的サイト生成が標準でサポートされているため、Pages との相性はバッチリです。
この記事では以下を説明します。
- Nuxt の静的化設定
- Cloudflare Pages 側の設定
- 自動デプロイの仕組み
- ドメイン設定や最適化ポイント
必要なもの
事前準備
- Nuxt プロジェクト（Nuxt 3 推奨）
- GitHub または GitLab リポジトリ
- Cloudflare アカウント
- Node.js（18 以上）
Step 1: Nuxt を静的サイト生成モードにする
Nuxt は複数のレンダリングモードを持っていますが、Cloudflare Pages は静的ファイルに最適化されているため「静的生成」を利用します。
nuxt.config.ts に以下を追加：
export default defineNuxtConfig({
nitro: {
preset: "static"
}
})
次に静的生成を実行します：
npx nuxi generate
これで .output/public に静的ファイル一式が生成されます。
Step 2: リポジトリを整える
.output/ をコミットしない
Cloudflare Pages はデプロイ時にビルドを行うため、.output/ はリポジトリに含める必要がありません。
.gitignore に次を追加：
.output
リポジトリにプッシュして準備完了です。
Step 3: Cloudflare Pages プロジェクトを作成する
- Cloudflare にログイン
- 左メニューの「Pages」へ
- 「プロジェクトを作成」
- GitHub/GitLab のリポジトリを選択
- ビルド設定を入力
推奨設定
- Framework preset: None（未選択）
- Build command:
npm run generate - Build output directory:
.output/public
保存してデプロイ開始。
Cloudflare Pages が自動で以下を行います：
- 依存インストール
- Nuxt のビルド
- 静的生成
- グローバルにデプロイ
Step 4: デプロイ結果を確認する
デプロイ完了後は以下が自動で生成されます：
- 本番 URL
- プレビュー URL（コミットごと）
- ビルドログ
本番 URL にアクセスして、サイトが正常に動作しているか確認しましょう。
Step 5: 独自ドメインを設定（任意）
Cloudflare Pages の強みのひとつが「超簡単な独自ドメイン設定」です。
- Pages プロジェクトを開く
- 「カスタムドメイン」へ
- ドメインを追加
- DNS が自動で設定される
無料で HTTPS 化やキャッシュ高速化が適用されます。
Step 6: 自動デプロイを活用する
Cloudflare Pages はデフォルトで main ブランチに push するだけで自動デプロイ されます。
Nuxt の更新 → Git push → 自動ビルド → 即時反映
という最高にシンプルな運用が可能になります。
Step 7: パフォーマンス最適化のヒント
やっておくと良いこと
- Cloudflare のキャッシュ機能を有効活用
- Nuxt Image module で画像最適化
- 必要であれば Nitro の cloudflare プリセットも検討
こうした最適化を行うことで、世界中からのアクセスがさらに高速になります。
まとめ
Nuxt × Cloudflare Pages の組み合わせは、手軽さと速度の両立が魅力です。
この記事で行ったこと：
- Nuxt を静的サイトモードに設定
- Git リポジトリと Cloudflare Pages を連携
npm run generateを設定- 出力ディレクトリ
.output/publicを指定 - 自動デプロイによる省コスト運用
Cloudflare Pages の高速 CDN によって、Nuxt サイトが驚くほど快適に動作します。
「とにかくシンプルに、でも高性能にサイトを公開したい」という人に最適なワークフローです。
