使用 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 地址访问。

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

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

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

在这里您会找到一个标有添加 IP 地址的绿色按钮。点击它，您将看到下面的模态窗口。

在此模态窗口中，点击允许从任何地方访问按钮，然后点击底部的绿色确认按钮。

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

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

总结和最终说明

恭喜！🎉

在本系列中，您

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

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

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

如果您有任何问题，也请随时通过 Twitter 联系我。