デプロイメント

Nuxt アプリケーションをあらゆるホスティングプロバイダーにデプロイする方法を学びましょう。

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

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

Node.js サーバー

Node.js ホスティングにデプロイするための 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 サーバーは nginx や Cloudflare のような SSL を終了するリバースプロキシの背後で実行されるべきです。

PM2

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

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 のマルチプロセス性能を活用するために、NITRO_PRESET=node_cluster を使用できます。クラスターモジュール。

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

さらに学ぶ

node-server プリセットの Nitro ドキュメントで詳細をご覧ください。

静的ホスティング

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

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

Nuxt のプリレンダリングで詳細をご覧ください。

ルートをプリレンダリングしたくない場合、静的ホスティングを使用するもう 1 つの方法は、nuxt.config ファイルで ssr プロパティを false に設定することです。nuxt 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 で以下のオプションがチェックされていない/無効になっていることを確認する必要があります。そうしないと、不要な再レンダリングやハイドレーションエラーが本番アプリケーションに影響を与える可能性があります。

速度 > 最適化 > コンテンツ最適化 > 「Rocket Loader™」を無効にする
速度 > 最適化 > 画像最適化 > 「Mirage」を無効にする
スクレイプシールド > 「メールアドレスの難読化」を無効にする

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

Cloudflare ダッシュボード上のそれらの場所は時々変わるので、遠慮なく探してみてください。

お役に立ちましたか？

問題を報告またはGitHub でこのページを編集

プリレンダリング

Nuxt は、特定のパフォーマンスや SEO の指標を改善するために、ビルド時にページを静的にレンダリングできます

テスト

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