NuxtPro

Appearance

部署到Vercel ​

部署项目 ​

当您完成本地开发并准备将 NuxtPro 应用推向世界时，选择一个合适的平台进行部署至关重要。NuxtPro 的设计旨在与现代化的托管平台无缝集成。本指南将重点介绍如何将您的应用部署到 Vercel，并简要提及其他部署选项。

推荐：使用 Vercel 进行部署 ​

Vercel 是 Nuxt 官方推荐的托管平台之一，它为 Nuxt 3 提供了开箱即用的支持和优化。通过 Vercel，您可以享受到自动 CI/CD、全球 CDN 加速和 Serverless Functions 带来的便利。

步骤 1：关联您的 Git 仓库 ​

  1. 登录您的 Vercel 账户（如果您没有，可以使用 GitHub 账户免费注册）。
  2. 在您的 Vercel Dashboard 上，点击 "Add New..." -> "Project"。
  3. 选择 "Continue with Git"，然后找到并选择您在 GitHub/GitLab/Bitbucket 上的 NuxtPro 项目仓库。Vercel 会请求访问权限。

步骤 2：配置项目 ​

Vercel 非常智能，它会自动检测到您的项目是基于 Nuxt 3 的，并为您选择合适的构建配置。

  • Framework Preset: Vercel 会自动识别为 Nuxt.js。
  • Build Command: 应为 pnpm run build 或 nuxt build。Vercel 通常会自动填充。
  • Output Directory: 应为 .output。Vercel 会自动识别。
  • Install Command: 确保设置为 pnpm install，与您本地开发保持一致。

步骤 3：配置环境变量 ​

部署成功的关键一步是正确配置环境变量。您需要将本地 .env 文件中的所有变量添加到 Vercel 项目的 "Settings" -> "Environment Variables" 中。

  • DATABASE_URL: 重要提示: 请确保您的数据库允许来自 Vercel 服务器的外部连接。您可能需要将 Vercel 的 IP 地址或 0.0.0.0/0（允许所有 IP）添加到数据库的白名单中。对于生产环境，强烈推荐使用专业的云数据库服务（如 Neon, Supabase, PlanetScale）。
  • STRIPE_SECRET_KEY
  • STRIPE_WEBHOOK_SECRET
  • NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
  • RESEND_API_KEY
  • NUXT_PUBLIC_APP_URL: 请务必填写 Vercel 分配给您的生产域名。

步骤 4：部署！ ​

配置完成后，点击 "Deploy" 按钮。Vercel 将会拉取您的代码、安装依赖、执行构建，并将您的应用部署到全球网络。

首次部署成功后，每当您向主分支（例如 main 或 master）推送新的提交时，Vercel 都会自动触发新的部署，实现持续集成和持续部署（CI/CD）。

其他部署选项 ​

虽然我们强烈推荐 Vercel，但 NuxtPro 也可以部署在任何支持 Node.js 的环境中。

部署到 Node.js 服务器 ​

如果您想将 NuxtPro 部署到自己的 VPS 或其他云服务器上，可以按照以下步骤操作：

  1. 在您的服务器上安装 Node.js 和 pnpm。
  2. 将您的项目代码克隆到服务器上。
  3. 安装依赖：pnpm install。
  4. 在服务器上创建并配置 .env 文件。
  5. 构建项目：pnpm build。
  6. 启动生产服务器：pnpm start。

为了保证服务的稳定性，建议使用进程守护工具（如 pm2）来管理您的 NuxtPro 应用。

bash
# 使用 pm2 启动
pm2 start .output/server/index.mjs --name "nuxtpro-app"

静态托管 (不推荐) ​

虽然 Nuxt 3 支持预渲染（SSG），但 NuxtPro 依赖于其服务器端的功能（如用户认证、API 路由、数据库交互）。因此，我们不推荐将 NuxtPro 作为纯静态网站进行部署。