跳转到内容
无痕工具库 无痕工具库

如何将 Vercel 项目迁移到 Hostinger:完整教程

如果你有一个目前托管在 Vercel 上的应用程序——无论是从零开始构建的,还是使用 v0 通过氛围编程(vibe coding)打造的——你都可以随时将其迁移到 Hostinger。

本流程专门针对 Node.js 应用程序,并使用 Hostinger 的 Node.js Web 应用部署功能,而非标准的网站迁移工具。如果你要迁移的是传统网站(WordPress、静态站点等),请参阅如何将网站迁移到 Hostinger。

请根据你的情况选择相应的步骤:

  • 如果你使用 v0 构建应用,并且尚未将其连接到 GitHub,请从第 1 步开始。
  • 如果你的应用已经在 GitHub 上,请直接跳到第 2 步。
  • 如果你更愿意上传本地保存的项目文件,请跳到第 2 步。

开始之前

  • 迁移前请确认你的应用程序运行正常
  • 记下项目使用的环境变量,稍后可能需要在 Hostinger 中重新输入
  • 如果你正在使用 Vercel 原生功能(如 Edge Functions 或 Vercel Blob 存储),请确保在切换前已备好替代方案

第 1 步 — 将项目导出到 GitHub

如果你的代码已经在 GitHub 上,请跳过此步骤。

方式 1 — 将你的 v0 应用连接到 GitHub

  1. 在 v0 中打开你的项目。
  2. 在侧边栏面板中,点击 Git 部分。
  3. 点击 Connect 开始连接过程。
  4. 在 Create Repository 弹窗中,选择你的 Git Scope(GitHub 账户或组织),并输入仓库名称。
  5. 点击 Create Repository,将你的对话连接到一个新的私有 GitHub 仓库。

    v0 会自动将你的项目代码推送到该仓库。你在 v0 中所做的每项更改都会提交到一个专用分支(例如 v0/main-abc123),从而保护你的 main 分支。

  6. 当你准备好最终确定代码时,点击 Publish 按钮(连接到 GitHub 后该按钮会显示 PR 图标)。
  7. 选择 Open PR,从你的工作分支向 main 创建一个拉取请求。
  8. 在发布弹窗中,点击 Merge PR,将你的更改合并到 main。

现在你的代码已位于 main 分支中,可以部署到 Hostinger 了。

方式 2 — 确认你现有的 Vercel 应用已在 GitHub 上

大多数 Vercel 项目已经连接到 GitHub 仓库。确认方法如下:

  1. 在 Vercel 控制面板 中打开你的项目。
  2. 进入 Settings → Git。
  3. 确认已连接 GitHub 仓库,并且你的最新代码已推送。

如果你的项目尚未连接到 GitHub,请先将代码推送到一个新的 GitHub 仓库,然后再继续。

第 2 步 — 将项目迁移到 Hostinger

Hostinger 支持两种部署方式。如果你的代码已经在仓库中,建议使用 GitHub 方式,这是最快且推荐的选择。

如果你只有本地的项目文件,也可以改为上传 ZIP 文件。

方式 1 — 从 GitHub 迁移(推荐)

代码已推送到 GitHub 后,将其迁移到 Hostinger 非常简单。

  1. 登录 Hostinger 控制面板。
  2. 当系统询问你想如何迁移网站时,选择 Node.js Web App。
    Hostinger Horizons 菜单,突出显示“Let others copy your project & get messages”选项
  3. 选择要连接到 Web 应用的域名,或使用临时域名。
  4. 出现提示时,选择连接 GitHub(Connect with GitHub)。
    部署 Node.js Web 应用,可选择导入 Git 仓库或上传文件
  5. 授权 Hostinger 访问你的 GitHub 账户。
  6. 选择包含你的 v0 应用程序的仓库。
  7. 选择 main 分支(或包含你最终代码的其他分支)。
  8. 检查构建设置,并添加所有必需的环境变量。
  9. 开始部署。

Hostinger 将自动构建并部署你的应用程序。部署完成后,你会看到一个预览,确认你的应用程序已上线。

方式 2 — 通过上传项目 ZIP 文件进行迁移

如果项目文件保存在本地而不是 GitHub 仓库中,你可以通过上传 ZIP 压缩包进行迁移。

  1. 在本地计算机上,为你的项目创建一个 ZIP 文件。
    • 包含 package.json 和所有必需的源文件
    • 排除不必要的文件,例如 node_modules
  2. 登录 Hostinger 控制面板。
    Hostinger Horizons 菜单,突出显示“Let others copy your project & get messages”选项
  3. 当系统询问你想如何迁移网站时,选择 Node.js Web App。
  4. 选择**上传文件(Upload your files)**方式。
    Hostinger Horizons 弹窗,允许将项目复制为模板
  5. 上传你的项目 ZIP 文件。
  6. 配置构建设置,并添加所有必需的环境变量。
  7. 开始部署。

Hostinger 将自动构建并部署你的应用程序。部署完成后,你会看到一个预览,确认你的应用程序已上线。

注意事项

  • 使用 v0 构建的应用通常是 Next.js 项目。请确保在 Hostinger 的部署设置中选择正确的 Node.js 版本,以符合项目的需求。
  • 在 Hostinger 部署设置过程中添加所有环境变量(API 密钥、数据库 URL 等)。缺少变量是迁移后出现错误的最常见原因。
  • 在将域名指向新 URL 或将生产流量切换到新 URL 之前,请先在 Hostinger 上全面测试你的应用程序。
  • 如果迁移后你继续在 v0 中进行更改,请将其合并到 GitHub 的 main 分支,并从 Hostinger 控制面板重新部署,以确保 Hostinger 上的部署保持最新。