> ## Documentation Index
> Fetch the complete documentation index at: https://help.helloazhenweb.top/llms.txt
> Use this file to discover all available pages before exploring further.

# 将 Birthday Wall 部署到 Vercel

> 把你的 Fork 推送到 GitHub、在 Vercel 中导入仓库、添加环境变量并上线 — 整个过程不到十分钟。

Vercel 是 Birthday Wall 推荐的托管平台，因为它为 Next.js 而生，自动处理构建和运行时，并提供慷慨的 Hobby 免费套餐，对一个个人生日站来说绰绰有余。本页将带你完成从 GitHub 推送到上线 URL 的每一步。

## 本地开发

部署前可以先在本地运行 Birthday Wall 来验证你的配置：

```bash theme={null}
npm install
npm run dev
```

开发服务器会启动在 `http://localhost:3000`。在推送前如需本地测试生产构建：

```bash theme={null}
npm run build && npm run start
```

如果带着 `.env.local` 在本地构建成功，Vercel 上的部署也会成功。

## 部署到 Vercel

<Steps>
  <Step title="把 Fork 推送到 GitHub">
    确保你的仓库已经推送到 GitHub（或 GitLab / Bitbucket — Vercel 这三家都支持）。Vercel 需要访问仓库以拉取源代码并设置自动部署。

    ```bash theme={null}
    git add .
    git commit -m "initial setup"
    git push origin main
    ```
  </Step>

  <Step title="在 Vercel 中导入仓库">
    1. 登录 [vercel.com](https://vercel.com)，点击 **Add New… → Project**。
    2. 在 **Import Git Repository** 下点击 **Continue with GitHub**（或你的 Git 服务商），按提示授权 Vercel。
    3. 在列表中找到你的 Birthday Wall 仓库，点击 **Import**。
  </Step>

  <Step title="确认框架预设">
    Vercel 会自动识别 Next.js 项目并设置正确的构建配置：

    * **Framework Preset**：Next.js
    * **Build Command**：`next build`
    * **Output Directory**：`.next`
    * **Install Command**：`npm install`

    你不需要修改这些设置中的任何一项。
  </Step>

  <Step title="添加环境变量">
    在点击 **Deploy** 之前，请向下滚动到 **Environment Variables** 区域，添加全部五个必需变量：

    | 变量                              | 值                           |
    | ------------------------------- | --------------------------- |
    | `NEXT_PUBLIC_SUPABASE_URL`      | 你的 Supabase 项目 URL          |
    | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | 你的 Supabase anon 密钥         |
    | `SUPABASE_SERVICE_ROLE_KEY`     | 你的 Supabase service role 密钥 |
    | `NEXT_PUBLIC_SITE_URL`          | 暂时留作占位 — 首次部署完成后再回来更新       |
    | `ADMIN_PASSWORD`                | 你为管理后台选定的密码                 |

    每个变量的说明以及如何在 Supabase 中找到对应值，请参阅 [环境变量页面](/zh/self-hosting/environment)。
  </Step>

  <Step title="部署">
    点击 **Deploy**。Vercel 会克隆你的仓库，运行 `npm install`，然后执行 `next build` 并发布结果。首次构建通常需要 2 到 3 分钟。

    部署完成后，Vercel 会显示 **Congratulations** 页面，并给出你的上线 URL（如 `https://birthday-wall-abc123.vercel.app`）。
  </Step>

  <Step title="设置 NEXT_PUBLIC_SITE_URL 并重新部署">
    复制 Vercel 刚刚分配给你项目的生产 URL。然后：

    1. 进入 **Project Settings → Environment Variables**。
    2. 编辑 `NEXT_PUBLIC_SITE_URL`，把生产 URL 粘贴为它的值。
    3. 触发一次重新部署：在 **Deployments** 标签页找到最新部署，点击 **…** 菜单并选择 **Redeploy**。

    这样，认证回跳和任何绝对 URL 的生成才会指向你真实的域名。
  </Step>

  <Step title="（可选）绑定自定义域名">
    如果你希望站点跑在自定义域名（如 `happy-birthday-alex.com`）下：

    1. 在 Vercel 项目中前往 **Settings → Domains**。
    2. 输入你的域名并点击 **Add**。
    3. 按提示在域名注册商处添加 DNS 记录（Vercel 会给出需要创建的精确记录）。
    4. 把 `NEXT_PUBLIC_SITE_URL` 更新为你的自定义域名并重新部署。

    Vercel 会自动为你的域名签发并续期 TLS 证书。
  </Step>
</Steps>

## 自动部署

<Tip>
  一旦项目连接到了 GitHub，Vercel 会将每次推送到 `main` 分支的提交自动作为新的生产部署。推送到其他分支会得到一个独立的预览 URL，方便你在上线前查看变更。
</Tip>

## 管理员子域名（可选）

Birthday Wall 支持一个可选的管理员子域名。指向 `admin.<your-domain>` 的请求会被自动路由到 `/admin` 后台。如果你希望通过子域名访问后台：

1. 在 Vercel 中前往 **Settings → Domains**。
2. 添加 `admin.<your-domain>` 作为附加域名，并按提示配置 DNS。

重写会自动生效 — 无需修改任何代码。

<Note>
  Vercel 的 Hobby 免费套餐对个人生日站来说完全够用。在典型的个人使用场景下，无需担心带宽或构建时长。
</Note>