デプロイ：静的生成とSSR
nuxt generateで完全な静的サイトを生成し、SSRアプリをNodeサーバーまたはエッジランタイムにデプロイして、Nuxtのnitroエンジンを設定します。
「デプロイ：静的生成とSSR」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
Nuxtはどこでもレンダリングできます
Nuxt 3は4つのデプロイモードに対応しています。Static（nuxt generate）、SSR（Nodeサーバー）、Edge（Cloudflare Workers、Vercel Edge）、Hybrid（ルート単位）です。
静的デプロイ
nuxt generateはすべてのルートをHTMLファイルとして事前レンダリングします。.output/publicフォルダーをNetlify、Vercel、GitHub Pages、S3などの任意の静的ホストにデプロイします。
npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...
# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/動的ルートの生成
/blog/[slug]のようなルートでは、Nuxtがすべてのslugを把握する必要があります。設定のnitro.prerender.routesでslugを指定します。
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
}
}
});
// Or auto-discover: Nitro follows links from /, generating any it finds.NodeへのSSRデプロイ
nuxt buildはNitroサーバーを作成します。node .output/server/index.mjsを実行すれば、任意のNodeホスト（Render、Railway、Fly.io、自分のVPS）にデプロイできます。
npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets
node .output/server/index.mjs # starts on PORT (default 3000)Nitro — ユニバーサルサーバー
Nuxt 3のサーバーはNitroです。Node、Bun、Deno、Cloudflare Workers、Vercel、Netlify、AWS Lambdaなど、あらゆるランタイムを対象にできるポータブルなエンジンです。nitro.presetで対象を切り替えます。
エッジデプロイ（Cloudflare Workers）
プリセットをcloudflare-pagesまたはcloudflareに設定します。ビルドすると、Cloudflareのエッジで実行されるWorkerが出力されます。
// nuxt.config.ts
export default defineNuxtConfig({
nitro: { preset: 'cloudflare-pages' }
});
// Build, then:
npx wrangler pages deploy ./distエッジデプロイ（Vercel Edge）
VercelはNuxtを自動検出し、適切なプリセットを使用します。Edge Runtimeを強制するには、preset: 'vercel-edge'を指定します。
ハイブリッドレンダリング
ルートごとに異なるレンダリング方式を選択できます。routeRulesで設定します。
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // SSG
'/blog/**': { isr: 60 }, // ISR every 60s
'/dashboard/**': { ssr: false }, // SPA (client-only)
'/admin/**': { ssr: true } // SSR (per-request)
}
});StaticとSSRの選択
Staticは、コンテンツの変更頻度が低く、最大速度と安価なCDNホスティングが重要な場合に適しています（ブログ、マーケティングサイト、ドキュメント）。SSRは、ユーザーごとのコンテンツ、動的データ、検索結果に適しています（ダッシュボード、ECサイト）。Hybridを使えば、ルートごとに組み合わせられます。
環境変数
nuxt.config.tsのruntimeConfigを使用します。publicはクライアントに公開され、それ以外はサーバー専用のままになります。
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '', // server-only, set via NUXT_API_SECRET env
public: {
apiBase: 'https://api.example.com' // accessible client-side
}
}
});
// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);CIでのビルドキャッシュ
CIの実行間で.nuxt/とnode_modules/をキャッシュすると、ビルドを高速化できます。VercelやNetlifyでは、これは自動的に行われます。
パフォーマンステスト
デプロイ後は、Lighthouseをlocalhostではなくデプロイ済みのURLに対して実行します。実際のCDN、実際のエッジロケーション、実際のCPUスロットリングを使って測定できるためです。
理解度チェック
すべてのルートを静的HTMLとして事前レンダリングし、NetlifyやCloudflare PagesなどのCDNにデプロイするためのNuxt 3コマンドはどれですか。
まとめ：Nuxtのデプロイ
nuxt generate → 静的（.output/publicをデプロイ）。nuxt build → SSR（Nodeでデプロイ）。NitroのプリセットはCloudflare、Vercel、Netlify、AWSなどを対象にできます。routeRulesでハイブリッドレンダリング（ルートごとのprerender、isr、ssr、spa）を設定します。runtimeConfigで環境変数を管理します（publicはクライアントに公開）。デプロイ済みのURLに対してLighthouseでテストします。
よくある質問
「デプロイ：静的生成とSSR」レッスンは無料ですか？
はい。「デプロイ：静的生成とSSR」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「デプロイ：静的生成とSSR」で何を学びますか？
nuxt generateで完全な静的サイトを生成し、SSRアプリをNodeサーバーまたはエッジランタイムにデプロイして、Nuxtのnitroエンジンを設定します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「デプロイ：静的生成とSSR」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。