最終更新日: 2023年08月15日

Deployment / ディプロイ（展開）

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

Info Nuxt3をサポートするクラウド・プロバイダーをお探しの場合は、こちらリストを参照してください。

Node.js サーバー

Nitroを使用したNode.jsサーバープリセットを探索して、どんなNodeホスティングでもデプロイしてください。

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

エントリーポイント

  • Nodeサーバープリセットを使用してnuxt buildを実行すると、実行可能なNodeサーバーを起動するエントリーポイントが生成されます。
    • bash
    • js
    node.output / server / index.mjs;

    例

    • bash
    • js
    $ node .output/server/index.mjs
Listening on http://localhost:3000

実行時のデフォルト設定

このプリセットは、以下の実行時環境変数を尊重します。

  • NITRO_PORT or PORT (defaults to 3000)
  • NITRO_HOST or HOST (defaults to '0.0.0.0')
  • NITRO_SSL_CERTとNITRO_SSL_KEY - 両方が存在する場合、これによりサーバーがHTTPSモードで起動します。ほとんどの場合、これはテスト以外に使用すべきではなく、NitroサーバーはSSLを終端させるような逆プロキシ（例:nginxやCloudflareなど）の後ろで実行されるべきです。

PM2の使用

PM2（Node.jsのプロセス管理ツール。アプリケーション毎の起動・停止の管理やログ管理、CPUやメモリなどモニタリングができるプロセス管理のアプリケーションです。サーバーなどが停止した時にNodeアプリケーションを自動で再起動させることもできます。）を使用する場合は、ecosystem.config.jsを使用します。

  • ecosystem.config.js
  • ts
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つあります：

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

クロールベースのプリレンダリング

nuxigenerateコマンドを使用して、Nitro クローラーを使用してアプリケーションを構築し、事前レンダリングします。 このコマンドは、nitro.staticオプションを trueに設定したnuxt build、またはnuxt build --prerenderを実行した場合と似ています。

  • bash
npx nuxi generate

それでおしまい！ これで、.output/public ディレクトリを静的ホスティング サービスにデプロイしたり、npxserve .output/public を使用してローカルでプレビューしたりできるようになりました。

Nitro クローラーの動作:

  • アプリケーションのルート ルート (/)、~/pages ディレクトリ内の非動的ページ、および nitro.prerender.routes 配列内のその他のルートの HTML を読み込みます。
  • 静的に提供されるように、HTML と payload.json を ~/.output/public/ ディレクトリに保存します。
  • HTML 内のすべてのアンカー タグ (<a href="...">) を見つけて、他のルートに移動します。
  • クロールするアンカー タグがなくなるまで、見つかったアンカー タグごとに手順 1 ～ 3 を繰り返します。

検出可能なページにリンクされていないページは自動的に事前レンダリングできないため、これを理解することが重要です。

Infonuxi generatedコマンドの詳細を参照してください。

選択的プリレンダリング

Nitro がビルド中にフェッチして事前レンダリングするルートを手動で指定することも、nuxt.configファイルの/dynamic のように事前レンダリングしたくないルートを無視することもできます。

  • nuxt.config.ts|js
  • ts
defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2']
      ignore: ['/dynamic']
    }
  }
})

これを crawLinks オプションと組み合わせて、/sitemap.xml や /robots.txt など、クローラーが検出できないルートのセットを事前にレンダリングできます。

  • nuxt.config.ts|js
  • ts
defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ["/sitemap.xml", "/robots.txt"],
    },
  },
});

これをcrawLinksオプションと組み合わせて、/sitemap.xmlや/robots.txt など、クローラーが検出できないルートのセットを事前にレンダリングできます。

  • nuxt.config.ts or nuxt.config.js
  • ts
defineNuxtConfig({
  /* The /dynamic route won't be crawled */
  nitro: {
    prerender: { crawlLinks: true, ignore: ['/dynamic'] }
  },
  experimental: {
    payloadExtraction: true
  }
})

nitro.prerenderをtrueに設定することは、nitro.prerender.crawlLinksをtrueに設定することと似ています。

Infoプリレンダリングの詳細については、Nitro のドキュメントを参照してください。

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

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

  • nuxt.config.ts|js
  • ts
defineNuxtConfig({
  ssr: false,
});

プリセット

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

nuxt.configファイルで望むプリセットを明示的に設定することができます。

  • nuxt.config.js|ts
  • ts
export default {
  nitro: {
    preset: "node-server",
  },
};

...または、nuxt buildを実行する際にNITRO_PRESET環境変数を使用することもできます。

  • bash
NITRO_PRESET=node-server nuxt build

全ての可能なデプロイメントプリセットとプロバイダーについては、Nitroのデプロイメントをチェックしてください。

サポートしているホスティングプロバイダー

Nuxt 3は最小限の設定でいくつかのクラウドプロバイダーにデプロイすることができます。

  • AWS
  • Azure
  • Cleavr
  • Cloudflare
  • DigitalOcean
  • Edgio
  • Firebase
  • Heroku
  • Lagon
  • Netlify
  • Render
  • Stormkit
  • Vercel

CDN Proxy

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

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

  • Speed > Optimization > Auto Minify: Uncheck JavaScript, CSS and HTML
  • Speed > Optimization > Disable "Rocket Loader™"
  • Speed > Optimization > Disable "Mirage"
  • Scrape Shield > Disable "Email Address Obfuscation"
  • Scrape Shield > Disable "Server-side Excludes"