Frontend Academy · 课时

部署：静态模式与 SSR

使用 nuxt generate 生成完全静态的网站，将 SSR 应用部署到 Node 服务器或边缘运行时，并配置 Nuxt Nitro 引擎。

部署：静态模式与 SSR 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

Nuxt 可在任何地方渲染

Nuxt 3 支持四种部署模式：静态（nuxt generate）、SSR（Node 服务器）、边缘（Cloudflare Workers、Vercel Edge）、混合（按路由配置）。

静态部署

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.

将 SSR 部署到 Node

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 并使用正确的预设。若要强制使用边缘运行时，请设置：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)
  }
});

选择静态渲染还是 SSR

静态渲染：内容很少变化、速度最快，并且可以使用廉价的 CDN 托管（博客、营销页面、文档）。SSR：适用于每个用户不同的内容、动态数据和搜索结果（控制面板、电子商务）。混合渲染可以按路由组合这两种方式。

环境变量

在 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);

在持续集成中缓存构建结果

在不同的持续集成运行之间缓存 .nuxt/ 和 node_modules/，以加快构建速度。在 Vercel/Netlify 上，这一过程会自动完成。

性能测试

部署后，请针对已部署的 URL 运行 Lighthouse，而不是针对 localhost。这样才能使用真实的 CDN、真实的边缘位置和真实的 CPU 限速。

快速检查

哪个 Nuxt 3 命令会将所有路由预渲染为静态 HTML，以便部署到 Netlify 或 Cloudflare Pages 这样的 CDN？

回顾：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」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「部署：静态模式与 SSR」这节课中我会学到什么？

使用 nuxt generate 生成完全静态的网站，将 SSR 应用部署到 Node 服务器或边缘运行时，并配置 Nuxt Nitro 引擎。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「部署：静态模式与 SSR」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy