Nuxt 3 Release Candidate がリリースされました! v3.nuxtjs.org で詳細について見れます。

翻訳されたページ このページのコンテンツは古い可能性があります。

Nuxt を Vercel にデプロイする

Nuxt アプリケーションを Vercel にどうやってデプロイするのか?


Vercel による静的サイト

Vercel で静的サイトをデプロイする場合、設定は必要ありません。Vercel は、お客様が Nuxt を使用していることを検出し、デプロイメントに適した設定を有効にします。詳しくは、Vercel ガイド をご覧ください。

Vercel による SSR

Vercel を使ってサーバーレスの Nuxt ランタイムをデプロイするために、Nuxt チームとコントリビューターが公式の@nuxtjs/vercel-builder パッケージを作成しました。

必要なのは、vercel.json ファイルをセットアップすることだけです:

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {}
    }
  ]
}

詳しくはドキュメント をご覧ください。

Nuxt PWA Module による Servie Worker

Service Worker の 404 を回避するには、ルートの設定に sw を含めるようにしてください。

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["package.json"]
      }
    }
  ],
  "routes": [
    {
      "src": "/sw.js",
      "continue": true,
      "headers": {
        "Cache-Control": "public, max-age=0, must-revalidate",
        "Service-Worker-Allowed": "/"
      }
    }
  ]
}

詳しくは、https://github.com/nuxt/vercel-builder で紹介しています。