设置数据库

在继续开发仪表盘之前，你需要一些数据。在本章中，你将通过 Vercel 的市场集成 中的一个来设置 PostgreSQL 数据库。如果你已经熟悉 PostgreSQL 并更倾向于使用自己的数据库提供商，你可以跳过本章并自行设置。否则，让我们继续！

在本章中...

我们将涵盖以下主题：

将你的项目推送到 GitHub。

设置 Vercel 账户并关联你的 GitHub 仓库，以获取即时预览和部署。

创建并将你的项目关联到 PostgreSQL 数据库。

用初始数据填充数据库。

创建一个 GitHub 仓库

首先，如果你还没有将你的仓库推送到 GitHub，请立即推送。这将使数据库设置和部署更加容易。

如果你在设置仓库时需要帮助，请查看 GitHub 上的这篇指南。

须知

• 你也可以使用其他 Git 提供商，如 GitLab 或 Bitbucket。
• 如果你是 GitHub 新手，我们推荐使用 GitHub 桌面应用，以简化开发工作流程。

创建 Vercel 账户

访问 vercel.com/signup 创建账户。选择免费的“个人”计划。选择 Continue with GitHub 连接你的 GitHub 和 Vercel 账户。

连接并部署你的项目

接下来，你将看到这个屏幕，你可以在这里选择并导入你刚刚创建的 GitHub 仓库

命名你的项目并点击 Deploy。

太棒了！🎉 你的项目现在已经部署了。

通过连接你的 GitHub 仓库，每当你向 main 分支推送更改时，Vercel 将自动重新部署你的应用程序，无需任何配置。当打开拉取请求时，你还将拥有 即时预览 URL，这使你能够及早发现部署错误，并与团队成员共享项目预览以获取反馈。

创建 PostgreSQL 数据库

接下来，要设置数据库，请点击 Continue to Dashboard，然后从项目仪表盘中选择 Storage 选项卡。选择 Create Database。根据你的 Vercel 账户创建时间，你可能会看到 Neon 或 Supabase 等选项。选择你偏好的提供商并点击 Continue。

选择你的区域和存储计划（如果需要）。所有 Vercel 项目的 默认区域 是 华盛顿特区 (iad1)，我们建议如果可用，选择此区域以减少数据请求的 延迟。

连接后，导航到 .env.local 选项卡，点击 Show secret 并 Copy Snippet。请务必在复制之前显示秘密。

导航到你的代码编辑器，将 .env.example 文件重命名为 .env。粘贴从 Vercel 复制的内容。

重要提示： 转到你的 .gitignore 文件，确保 .env 在忽略文件中，以防止在推送到 GitHub 时暴露你的数据库秘密。

填充你的数据库

现在数据库已创建，让我们用一些初始数据填充它。

我们提供了一个可在浏览器中访问的 API，它将运行一个填充脚本，以初始数据集填充数据库。

该脚本使用 SQL 创建表，并使用 placeholder-data.ts 文件中的数据在创建后填充它们。

确保你的本地开发服务器正在使用 pnpm run dev 运行，并在浏览器中导航到 localhost:3000/seed。完成后，你将在浏览器中看到消息“Database seeded successfully”。完成后，你可以删除此文件。

故障排除:

• 在将数据库密钥复制到 .env 文件之前，请务必显示它们。
• 该脚本使用 bcrypt 对用户密码进行哈希，如果 bcrypt 与你的环境不兼容，你可以更新脚本以改用 bcryptjs。
• 如果你在填充数据库时遇到任何问题，并希望再次运行脚本，可以通过在数据库查询界面中运行 DROP TABLE tablename 来删除任何现有表。有关更多详细信息，请参见下面的执行查询部分。但请注意，此命令将删除表及其所有数据。在你的示例应用程序中执行此操作是可以的，因为你正在使用占位数据，但在生产应用程序中不应运行此命令。

执行查询

让我们执行一个查询，以确保一切都按预期工作。我们将使用另一个路由处理程序 app/query/route.ts 来查询数据库。在这个文件中，你将找到一个包含以下 SQL 查询的 listInvoices() 函数。

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

取消注释文件，删除 Response.json() block，然后在浏览器中导航到 localhost:3000/query。你应该会看到返回了一个发票的 amount 和 name。