Nuxt Nation カンファレンスが開催されます。11月12日～13日にご参加ください。
54.8K

デプロイ

Nuxtアプリケーションを任意のホスティングプロバイダにデプロイする方法を学びます。

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

Nuxt 3をサポートするクラウドプロバイダのリストについては、ホスティングプロバイダセクションを参照してください。

Node.jsサーバー

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

  • 指定または自動検出されない場合のデフォルトの出力形式
  • コールドスタート時間を最適化するために、リクエストをレンダリングするために必要なチャンクのみを読み込みます
  • Nuxtアプリを任意のNode.jsホスティングにデプロイするのに役立ちます

エントリポイント

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サーバーは、SSLをターミネートするnginxやCloudflareなどのリバースプロキシの背後で実行する必要があります。

PM2

PM2 (Process Manager 2) は、サーバーまたはVMでNuxtアプリケーションをホストするための高速で簡単なソリューションです。

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

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を使用できます。

デフォルトでは、ワークロードはラウンドロビン方式でワーカーに分散されます。

詳細はこちら

node-serverプリセットのNitroドキュメントで詳細をご覧ください。
Daniel Roe氏によるこのトピックに関する短いビデオをご覧ください。

静的ホスティング

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

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

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

ルートを事前レンダリングしたくない場合は、nuxt.configファイルでssrプロパティをfalseに設定するという方法もあります。 nuxi generateコマンドは、従来のクライアント側Vue.jsアプリケーションのように、.output/public/index.htmlエントリポイントとJavaScriptバンドルを出力します。

nuxt.config.ts
export default 
defineNuxtConfig
({
  
ssr
: false
})

ホスティングプロバイダ

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

デプロイで詳細をご覧ください。

プリセット

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

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

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の「縮小とセキュリティのオプション」です。

したがって、Cloudflareで次のオプションがオフ/無効になっていることを確認する必要があります。 そうしないと、本番環境のアプリケーションに不要な再レンダリングまたはハイドレーションエラーが発生する可能性があります。

  1. 速度 > 最適化 > コンテンツの最適化 > 自動縮小: JavaScript、CSS、HTMLのチェックを外します
  2. 速度 > 最適化 > コンテンツの最適化 > 「Rocket Loader™」を無効にします
  3. 速度 > 最適化 > 画像の最適化 > 「Mirage」を無効にします
  4. スクレイピングシールド > 「メールアドレスの難読化」を無効にします

これらの設定により、CloudflareがNuxtアプリケーションに不要な副作用を引き起こす可能性のあるスクリプトを挿入しないようにすることができます。

Cloudflareダッシュボードでのこれらのオプションの位置は変更される場合があるため、遠慮なく探してください。

事前レンダリング

Nuxtでは、ビルド時にページを静的にレンダリングして、特定のパフォーマンスまたはSEOメトリックを向上させることができます

テスト

Nuxtアプリケーションをテストする方法。