欢迎来到本系列教程的第四篇文章，在本系列中你可以学到如何使用 MongoDB
Prisma 和 Remix 从零开始构建一个全栈应用！在本节中，你将使用 Vercel 来部署已经构建好的应用程序。
介绍
在本系列的上一节中，你通过为用户提供一种方式，让他们可以更新个人资料，添加个人头像，及删除他们的账号和相关数据，完成了 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：
git init
git add .
git commit -m "Initial Commmit"
git branch -M main
git remote add origin <repo-url>
git push -u origin main
一旦命令结束，就可以前往 GitHub 的仓库页面。你应该看到代码已经被推送到了 GitHub。
在 Vercel 上设置项目
接下来，在 Vercel 上登录账号。如果你还没有账号，最简单的选择就是使用你的 GitHub 账号注册。
登陆后，在仪表盘上你将看到一个 New Project（新项目） 按钮。点击按钮开始配置你的项目。
在此页面，你将被要求导入 GitHub 仓库或者选择一个预设的模版。如果你还没有把 GitHub 账号关联到你的 Vercel 账号上，你需要先进行关联。
从 Import Git Repository下方的仓库列表中选择你的项目仓库。
在你点击仓库上的导入按钮后，你将会被带到一个可以配置项目并发布的页面。
在页面的 Framework Preset 标题下方，如果还没有任何选择，那么请选择 “Remix”，以便让 Vercel 知道这是一个 Remix 项目。有了这个信息，它会为你自动设置一些构建和发布的配置项。
设置环境变量
在 Environment Variables 块内，你可以将环境变量添加到部署环境。
这些将与你在项目的 .env 文件中设置的变量相关联。在这添加所有的环境变量。举个例子，在下图中填写了一个 DATABASE_URL 变量。在表单中每填写完一个变量都要点击 Add（添加）。
部署
一旦所有的环境变量都配置好了，你就可以继续并点击位于表单下方的 Deploy（部署）按钮了。
点击此按钮将会启动应用程序的构建过程，运行所有需要进行的检查，并使用过 Vercel 提供的 URL 部署应用程序。
当部署结束后，如果你返回仪表盘你应该看到 kudos 项目在提供的域名中已经可用并可以访问了。
如果你点击页面中的 Visit（访问）按钮，你应该会被导航到网站的实时版本！恭喜！
更新 MongoDB 访问设置
然而，你还没有完成。你也许注意到，如果你尝试在实时网站上登录或注册，你会收到一个严重错误。
这是因为你的 MongoDB 数据库的访问配置然仍是你的开发机器的 IP 地址。
这个配置需要被放开以允许任何 IP 地址连接，因为 Vercel 会自动为你的部署函数分配随机 IP 地址。
提示：因为 Vercel 部署是一个 serverless 环境，所以不可能确定有效的 IP 地址列表。这仍然被认为是一个安全的配置，只要有一个强密码并正确使用数据库角色和用户就可以了。
打开 MongoDB 已表单并导航到左侧菜单中的 Network Access（网络访问）选项卡。
这里你将找到一个标签为 ADD IP ADDRESS（添加 IP 地址） 的绿色按钮。单击它你将看到一个模态。
在此模态中，点击 ALLOW ACCESS FROM ANYWHERE 按钮，然后点击底部的绿色 Confirm（确认） 按钮。
这将开放任何 IP 地址连接到你的数据库，允许你在 Vercel 管理的 serverless 设置中进行连接。
现在，如果你返回已部署好的应用，并尝试登录或注册，你现在应该可以成功完成这些操作了！
总结 & 最终评语
祝贺! 🎉
通过这个系列你：
- 深入了解了 Prisma 提供的功能，这些能让你轻松使用 MongoDB 数据库。
- 借助 Prisma 和 Remix，实现了端到端的类型安全。
- 构建了所有应用的 React 组件并使用 TailwindCSS 来设计它们。
- 配置了一个 AWS S3 桶来存储图片。
- 使用 Vercel 来部署应用。
本系列的主要内容是设置、构建和部署整个应用程序，这是一种非常可行（且令人愉快）的体验，由于当今可用的许多工具替你处理了大量繁重的工作，使得这种体验变得顺畅和轻松。
你可以在 GitHub 上查看该项目的源码。如果你发现任何问题，请随意在仓库中提出问题或者提交 PR。
【全文完】
原文标题：Build A Fullstack App with Remix, Prisma & MongoDB: Deployment
原文作者：Sabin Adams
发布时间：2022年4月29日
