如何在 Vercel 上部署 MERN 应用程序

Vercel是一个为前端开发人员提供快速可靠的基础设施来支持创新设计的平台。通过他们的服务，团队可以高效地开发、预览和部署用户友好的界面。他们支持超过35个前端框架，并与各种无头内容、商务和数据库选项无缝集成。他们的平台无需进行任何配置，使开发人员可以轻松使用。

Vercel的特点

• 使用自动CI/CD部署您的项目。
• 为每个git推送获得预览部署。
• 使用他们的平台托管您的Node.js后端。
• 通过Vercel Analytics监控您的应用程序性能。
• 无需重新部署即可更新内容。
• 提高图像的加载性能。
• 尽可能快地提供内容。

在Vercel上部署MERN应用程序的步骤

MERN是为全栈应用程序提供前端和后端服务器的组合。因此，要在Vercel上部署MERN应用程序，需要分为两部分进行，即：

目录

• 部署用于MERN应用程序的Node.js后端
• 部署用于MERN应用程序的React.js前端

第1部分：为MERN应用程序部署Node.js后端

步骤1： 首先，在您的后端目录中添加给定的 vercel.json 文件：添加此文件将启用Vercel配置。

步骤2： 在将您的Github/Gitlab/BitBucket帐户与Vercel链接后，导入您的Git存储库：

步骤3：配置MERN应用程序的Node.js后端：

• 写下你的项目名称。例如：my-project-backend
• 在框架选项中选择“其他”。这将确保设置和定制过程针对Node.js进行。
• 选择您的项目的后端目录，Vercel将在其中运行构建命令。
• 添加您的环境变量。例如： MONGO_ATLAS_URL：my-mongo-atlas-url
• 点击“部署”按钮。

恭喜！在部署后不到一分钟内，您的后端将正常运行。

注意： 不要忘记保存服务器部署链接，并在代码中替换本地服务器链接。

第2部分：部署使用React JS制作的前端MERN应用

注意： 步骤1和步骤2与上面讨论的步骤2和步骤3相同。

步骤1： 部署MERN应用的前端：转到Vercel仪表板，点击“添加新项目”按钮，选择“项目”类别。

步骤2： 在将Github/Gitlab/BitBucket账号与Vercel链接之后，导入您的Git存储库：

步骤3： 配置MERN应用的Node.js后端：

• 填写您的项目名称，例如my-project。
• 在框架选项中选择“Create-React-App”，这将确保设置和定制流程适用于React.js。
• 选择您的项目的后端目录，Vercel将在此运行构建命令。
• 添加您的环境变量，例如 API_KEY: my-api-key 。
• 注意：一个强制性的环境变量是 GENERATE_SOURCEMAP: false ，出于安全和性能原因。
• 点击“ 部署 ”按钮。

恭喜！在部署后不到一分钟，您的前端将开始运行。

启用 Vercel 分析： Vercel 分析为开发者提供有价值的见解，通过允许他们监控访问者数量、页面浏览量、访问者位置以及访问网站的设备。这些信息使开发者能够追踪网站产生的流量，并做出明智的决策来提升网站的性能。

步骤1：在Vercel Analytics中启用受众： 在Vercel仪表板上，选择您的项目，然后点击Analytics选项卡。从那里，选择Audiences选项卡，并点击对话框中的Enable。

步骤2： 将@vercel/analytics添加到您的项目中： 使用您选择的包管理器，将@vercel/analytics包添加到您的项目中：

• 使用npm：npm i @vercel/analytics
• 使用yarn：yarn add @vercel/analytics

步骤3：在您的应用程序中调用inject函数： 将以下代码添加到您的主应用程序文件中：

import { inject } from '@vercel/analytics';  
inject();  

步骤4: 将更改推送到你的git存储库以查看更新。

做得好！您已成功部署了您的MERN应用程序，并为您的项目激活了分析功能。