使用 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 主页后，单击屏幕左上角的绿色 New 按钮以创建新仓库。

这将带您进入一个页面，要求您提供有关仓库的一些详细信息和配置选项。按您喜欢的方式填写这些信息，然后点击底部的 Create repository 按钮。

创建仓库后，您将进入仓库页面，页面顶部有一个快速设置部分。此部分将包含一个连接字符串，您将使用它将代码库推送到仓库。

在终端中，导航到文件系统中的 Kudos 项目，然后运行以下命令，提供您的仓库 URL

完成后，前往 GitHub 上的仓库页面。您应该会看到您的代码库已推送并可在 GitHub 上找到。

在 Vercel 中设置你的项目

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

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

在此页面上，您将被要求导入一个 GitHub 仓库或选择一个预制模板。如果您尚未将您的 GitHub 帐户关联到您的 Vercel 帐户，您也会在此处进行关联。

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

在您的仓库上点击 Import 后，您将进入一个页面，在该页面上可以配置项目并进行部署。

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

设置环境变量

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

这些变量将与您在项目 .env 文件中设置的变量相对应。在此处添加所有环境变量。例如，下图中填写了 DATABASE_URL 变量的信息。填写完每个变量的表单后，点击 Add（添加）。

部署

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

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

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

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

更新 MongoDB 访问设置

然而，您尚未完全完成。您可能会注意到，如果您尝试在实时站点上登录或注册，会收到一个令人不快的错误。

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

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

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

打开 MongoDB 仪表板，导航到左侧菜单上的 Network Access（网络访问）选项卡。

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

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

这将使您的数据库可以接受来自任何 IP 地址的连接，从而允许您在由 Vercel 管理的无服务器环境中进行连接。

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

总结与最终说明

恭喜！🎉

在本系列中，您

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

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

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

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