设置数据库

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

本章内容...

以下是我们将涵盖的主题

将你的项目推送到 GitHub。

设置一个 Vercel 帐户并将你的 GitHub 仓库链接起来，以实现即时预览和部署。

创建 PostgreSQL 数据库并将你的项目链接到该数据库。

使用初始数据填充数据库。

创建 GitHub 仓库

首先，如果你还没有将你的仓库推送到 GitHub，让我们现在就推送。这将使设置数据库和部署变得更容易。

如果你需要关于设置仓库的帮助，请查看 GitHub 上的这份指南。

须知

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

创建 Vercel 帐户

访问 vercel.com/signup 以创建一个帐户。选择免费的“hobby”计划。选择 Continue with GitHub（使用 GitHub 继续） 以连接你的 GitHub 和 Vercel 帐户。

连接并部署你的项目

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

为你的项目命名，然后点击 Deploy（部署）。

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

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

创建 PostgreSQL 数据库

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

选择你的区域和存储计划（如果需要）。所有 Vercel 项目的 默认区域 是 Washington D.C (iad1)（华盛顿特区 (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 来删除任何现有表。有关更多详细信息，请参阅下面的执行查询部分。但请注意，此命令将删除表及其所有数据。在你的示例应用程序中使用它是可以的，因为你正在使用占位符数据，但你不应在生产应用程序中运行此命令。

执行查询

让我们执行一个查询，以确保一切都按预期工作。我们将使用另一个 Router Handler，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。