Nuxtアプリケーションは、Node.jsサーバーにデプロイしたり、静的ホスティング用にプリレンダリングしたり、サーバーレスやエッジ（CDN）環境にデプロイすることができます。

Node.jsサーバー

Nitroを使用して、任意のNodeホスティングにデプロイするためのNode.jsサーバープリセットを発見しましょう。

• デフォルトの出力形式 は指定されていない場合や自動検出されない場合
  
• リクエストをレンダリングするために必要なチャンクのみをロードし、最適なコールドスタートタイミングを実現
  
• 任意のNode.jsホスティングにNuxtアプリをデプロイするのに便利

エントリーポイント

Nodeサーバープリセットでnuxt buildを実行すると、実行可能なNodeサーバーを起動するエントリーポイントが生成されます。

node .output/server/index.mjs

これにより、デフォルトでポート3000でリッスンする本番Nuxtサーバーが起動します。

以下のランタイム環境変数を尊重します：

• NITRO_PORT または PORT（デフォルトは 3000）
• NITRO_HOST または HOST（デフォルトは '0.0.0.0'）
• NITRO_SSL_CERT と NITRO_SSL_KEY - 両方が存在する場合、HTTPSモードでサーバーを起動します。ほとんどの場合、テスト以外では使用せず、NitroサーバーはnginxやCloudflareのようなリバースプロキシの背後でSSLを終了するべきです。

PM2

PM2（Process Manager 2）は、サーバーやVM上でNuxtアプリケーションをホスティングするための迅速で簡単なソリューションです。

pm2を使用するには、ecosystem.config.cjsを使用します：

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

クラスターモード

Node.jsのclusterモジュールを使用してマルチプロセスのパフォーマンスを活用するために、NITRO_PRESET=node_clusterを使用できます。

デフォルトでは、ラウンドロビン戦略でワーカーに負荷が分散されます。

詳細を学ぶ

静的ホスティング

Nuxtアプリケーションを任意の静的ホスティングサービスにデプロイする方法は2つあります：

• ssr: trueを使用した静的サイト生成（SSG）は、ビルド時にアプリケーションのルートをプリレンダリングします。（これはnuxt generateを実行したときのデフォルトの動作です。）また、クライアントで動的ルートや404エラーをレンダリングできる/200.htmlと/404.htmlのシングルページアプリのフォールバックページを生成します（ただし、静的ホストでこれを設定する必要があるかもしれません）。
• あるいは、ssr: false（静的シングルページアプリ）でサイトをプリレンダリングすることもできます。これにより、通常Vueアプリがレンダリングされる場所に空の<div id="__nuxt"></div>を持つHTMLページが生成されます。サイトのプリレンダリングによる多くのSEOの利点を失うことになるため、サーバーレンダリングできない部分（もしあれば）を<ClientOnly>でラップすることをお勧めします。

クライアントサイドのみのレンダリング

ルートをプリレンダリングしたくない場合、静的ホスティングを使用するもう一つの方法は、nuxt.configファイルでssrプロパティをfalseに設定することです。nuxt generateコマンドは、クラシックなクライアントサイドVue.jsアプリケーションのように.output/public/index.htmlエントリーポイントとJavaScriptバンドルを出力します。

export default defineNuxtConfig({
  ssr: false
})

ホスティングプロバイダ

Nuxtは、最小限の設定で複数のクラウドプロバイダにデプロイできます：

プリセット

Node.jsサーバーや静的ホスティングサービスに加えて、Nuxtプロジェクトは、いくつかの十分にテストされたプリセットと最小限の設定でデプロイできます。

nuxt.config.tsファイルで希望するプリセットを明示的に設定できます：

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

... またはnuxt buildを実行するときにNITRO_PRESET環境変数を使用します：

NITRO_PRESET=node-server nuxt build

🔎 すべての可能なデプロイプリセットとプロバイダについては、Nitroデプロイメントを確認してください。

CDNプロキシ

ほとんどの場合、NuxtはNuxt自体によって生成または作成されていないサードパーティのコンテンツと連携できます。しかし、時にはそのようなコンテンツが問題を引き起こすことがあります。特にCloudflareの「Minification and Security Options」が原因です。

したがって、Cloudflareで以下のオプションがチェックされていない/無効になっていることを確認する必要があります。そうしないと、不要な再レンダリングやハイドレーションエラーが本番アプリケーションに影響を与える可能性があります。

1. Speed > Optimization > Content Optimization > 「Rocket Loader™」を無効にする
2. Speed > Optimization > Image Optimization > 「Mirage」を無効にする
3. Scrape Shield > 「Email Address Obfuscation」を無効にする

これらの設定により、CloudflareがNuxtアプリケーションにスクリプトを注入して不要な副作用を引き起こすことがないことを確認できます。