Cloudflare

Nuxt アプリケーションを Cloudflare インフラストラクチャにデプロイする。

Cloudflare Pages

ゼロ設定 ✨
Cloudflare Pages との連携はゼロ設定で可能。詳細はこちら.

Cloudflare を使ってフルスタック Nuxt アプリケーションを構築するには、@nuxthub/core モジュールを確認してください。詳細はこちらをご覧ください。hub.nuxt.com.

Git 連携

GitHub/GitLab と Cloudflare Pages の連携を使用する場合、設定は不要です。リポジトリにプッシュすると、自動的にプロジェクトがビルドされ、デプロイされます。

Nuxt は環境を検出し、正しいServer/Nitro プリセット.

エッジでサーバーサイドレンダリングを活用するには、ビルドコマンドを nuxt build に設定してください。

ウェブサイトを静的に生成するには、ビルドコマンドを nuxt generate に設定してください。

ルーティング

CloudFlare Pages では、要求された現在のルートと一致するパスの HTML ファイルが見つかった場合、そのファイルを配信します。また、HTML ページを拡張子なしの対応するページにリダイレクトします。たとえば、/contact.html は /contact にリダイレクトされ、/about/index.html は /about/ にリダイレクトされます。

Cloudflare のルーティングルールに一致させるには、Nitro オプション autoSubfolderIndex を false に設定してください。

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})

直接アップロード

または、wranglerを使用してプロジェクトを Cloudflare にアップロードすることもできます。

この場合、プリセットを手動で設定する必要があります。

Cloudflare Pages 用にプロジェクトをビルドする
ターミナル
```
npx nuxi build --preset=cloudflare_pages
```
デプロイする（初回はプロジェクト作成を求められます）
ターミナル
```
npx wrangler pages deploy dist/
```