使用 Remix、Prisma 和 MongoDB 构建全栈应用：部署

目录

• 简介
  • 开发环境
• 在 Github 上托管您的项目
• 在 Vercel 中设置您的项目
• 设置环境变量
• 部署
• 更新 MongoDB 访问设置
• 总结和最终说明

简介

在本系列的最后一部分中，您通过为用户提供更新其个人资料设置、添加个人资料图片以及删除其帐户和相关数据的方式，完成了 Kudos 应用程序的开发。

在这一部分中，您将使用 Vercel 将您的应用程序部署给您的用户。

注意：此项目的起点可在 GitHub 存储库的 part-4 分支中找到。

开发环境

为了跟上提供的示例，您需要...

• ... 安装 Node.js。
• ... 安装 Git。
• ... 安装 TailwindCSS VSCode 扩展。 （可选）
• ... 安装 Prisma VSCode 扩展。 （可选）

注意：可选扩展为 Tailwind 和 Prisma 添加了一些非常好的智能感知和语法高亮。

在 GitHub 上托管您的项目

要部署您的应用程序，您将使用 Vercel。Vercel 提供 Git 集成，这将允许您轻松部署应用程序并在未来更新它。

此过程的第一步是确保您的项目托管在 GitHub 上。如果您的项目和最新更改在 GitHub 存储库中，请随意转到下一步。

如果您确实需要在存储库中设置您的代码库，您首先需要登录 GitHub。进入 GitHub 主页后，单击屏幕左上角的绿色新建按钮以创建新的存储库。

这将带您到一个页面，您需要在该页面中填写有关存储库的一些详细信息和配置选项。随意填写这些信息，然后点击底部的创建存储库按钮。

创建存储库后，您将进入存储库页面，并在视图顶部看到快速设置部分。此部分将包含一个连接字符串，您将使用该字符串将您的代码库推送到存储库。

在终端中，导航到文件系统中的 kudos 项目并运行以下命令，提供您的存储库的 URL

完成后，转到 GitHub 上的存储库页面。您应该看到您的代码库已推送并可在 GitHub 上使用。

在 Vercel 中设置您的项目

接下来，登录您的 Vercel 帐户。如果您还没有帐户，最简单的选择是使用您的 GitHub 帐户注册。

登录后，在您的仪表板上，您将看到一个新项目按钮。点击该按钮开始配置您的项目。

在此页面上，系统将要求您导入 GitHub 存储库或选择预制模板。如果您尚未将您的 GitHub 帐户链接到您的 Vercel 帐户，您也将在此处进行链接。

从导入 Git 存储库下的存储库列表中选择您的项目存储库。

在您单击存储库上的导入后，您将被带到一个页面，您可以在该页面中配置项目并部署它。

在此页面的框架预设部分下，如果尚未选择，请选择 "Remix" 作为值，以让 Vercel 知道这是一个 Remix 项目。它将使用此信息自动为您设置一些构建和部署选项。

设置环境变量

在环境变量块内，您可以将环境变量添加到部署环境中。

这些将与您在项目的 .env 文件中设置的变量相关联。在此处添加所有环境变量。例如，在下面的图像中，信息已为 DATABASE_URL 变量填写完毕。填写每个变量的表单后，点击添加。

部署

配置完所有环境变量后，继续并点击表单底部的部署按钮。

点击此按钮将启动应用程序的构建过程，运行任何需要进行的检查，并使用 Vercel 提供的 URL 部署应用程序。

部署完成后，如果您回到仪表板，您应该看到您的 kudos 项目可用，并且可以通过提供的域名访问。

如果您点击此页面上的访问按钮，您应该导航到您网站的实时版本！恭喜！

更新 MongoDB 访问设置

但是，您还没有完全完成。您可能会注意到，如果您尝试在您的实时站点上登录或注册，您会收到一个糟糕的错误。

这是因为您的 MongoDB 数据库仍然配置为仅可从您的开发机器的 IP 地址访问。

这将需要打开以允许任何 IP 地址连接，因为 Vercel 会自动为您的已部署函数分配随机 IP 地址。

注意：由于 Vercel 在无服务器环境中部署，因此无法确定有效 IP 地址的列表。只要有强密码以及数据库角色和用户的正确使用，这仍然被认为是安全的配置。

打开 MongoDB 仪表板并导航到左侧菜单上的网络访问选项卡。

在这里，您会找到一个标记为添加 IP 地址的绿色按钮。点击该按钮，您将看到下面的模态框。

在此模态框中，点击允许从任何位置访问按钮，然后点击底部的绿色确认按钮。

这将打开您的数据库以接受来自任何 IP 地址的连接，允许您在由 Vercel 管理的无服务器设置中连接。

现在，如果您回到已部署的应用程序并尝试登录或注册，您现在应该能够成功完成操作！

总结和最终说明

恭喜！ 🎉

在本系列中，您

• 深入了解了 Prisma 提供的功能，这些功能使您可以轻松地使用 MongoDB 数据库。
• 借助 Prisma 和 Remix 实现了端到端类型安全。
• 构建了所有应用程序的 React 组件，并使用 TailwindCSS 对其进行了样式设置。
• 配置了 AWS S3 存储桶以存储图像。
• 使用 Vercel 部署了您的应用程序。

本系列的主要收获是，设置、构建和部署整个应用程序是一项非常可行的（且令人愉快的）体验，因为现在可用的许多工具为您处理了许多繁琐的工作，并使体验顺畅而轻松。

此项目的源代码可以在 GitHub 上找到。如果您发现问题，请随时在存储库中提出 issue 或提交 PR。

如果您有任何问题，也请随时在 Twitter 上与我联系。