NuxtをCloudflareにデプロイ

Cloudflare Pages

ゼロコンフィグレーション ✨
Cloudflare Pagesとの統合は、ゼロコンフィグレーションで可能です。詳細はこちら。

フルスタックNuxtアプリケーションをCloudflareで構築するための@nuxthub/coreモジュールをご覧ください。hub.nuxt.comで詳細情報を確認できます。

Git連携

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

Nuxtは環境を検出し、適切なサーバー/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
```
デプロイします。初めての場合はプロジェクトの作成を求められます。
ターミナル
```
wrangler pages deploy dist/
```