使用 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 项目。Vercel 将根据此信息自动为您设置一些构建和部署选项。

设置环境变量

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

这些将与您在项目 .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 上找到。如果您发现问题，请随时在仓库中提出问题或提交 PR。

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