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": "/"
      }
    }
  ]
}