但是，构建MERN堆栈应用程序只是方程的一部分。将其部署到生产环境可能是一项艰巨的任务，需要仔细的配置和管理。

vercel 救援。 Vercel是一个简化部署和托管过程的云平台，使其成为MERN堆栈应用程序的理想选择。

在这篇博客文章中，我们将探讨使用Vercel部署MERN堆栈应用程序的无缝体验。我们将讨论：

• 使用Vercel的好处
• 准备部署的MERN Stack申请
• 逐步浏览部署过程

为什么选择Vercel？

Vercel提供了一个全面的平台，用于轻松部署现代Web应用程序。这是为什么它在开发人员中广受欢迎的一些原因：

易于设置：

• Vercel提供了一个简单的设置过程，使开发人员只需单击几下部署其MERN堆栈应用程序。
• 它消除了对手动配置的需求，并减少了使应用程序启动和运行所需的时间。

连续部署：

• 通过使用Vercel启用自动部署，您可以确定，将其推向存储库的每一个更改都会导致新的部署。
• 这可以实现无缝且连续的交付过程，使您的申请保持最新。

可伸缩性：

• Vercel利用无服务器功能和边缘缓存的力量。
• 启用MERN堆栈应用程序的轻松可扩展性。
• 即使在交通量较高，也可以确保最佳性能。

全局CDN：

• Vercel提供了一个全球内容交付网络（CDN），可确保您的应用程序快速交付给全球用户。
• 这通过降低延迟并提高整体性能来优化用户体验。

无服务器功能：

• 无服务器功能的使用允许有效地处理动态数据处理和卸载重型计算任务。

准备部署的MERN Stack应用程序

部署我们的应用程序之前，请确保我们对适当的配置进行了正确的配置。需要以下配置步骤：

步骤1：

应将后端文件夹重命名为 “ api” ，主JS文件应命名为 “ index.js”

第2步：

每个控制器都应连接到数据库。这是因为每个控制器将被部署为无服务器功能。

• 内部 “ api” 文件夹，创建 “ config”带有以下代码的“ db.js” 文件。
  

  import mongoose from "mongoose";
  
  const connectDB = async () => {
    try {
      const conn = await mongoose.connect(process.env.MONGO_URI);
      console.log(`MongoDB Connected: ${conn.connection.host}`);
    } catch (error) {
      console.error(`Error: ${error.message}`);
      process.exit(1);
    }
  };
  
  export default connectDB;
  

• 导入并调用 “ connectdb” 在所有控制器函数中。
  

  export const getMocks = async (req, res, next) => {
      // Connecting to mongoDB
      connectDB();
  
      try {
          //...code block fetching the mocks
      } catch (error) {
          //...handling errors
  }
  

步骤3：

创建 “ vercel.json” 并添加以下配置。

{
    "buildCommand": "cd client && yarn install && ./node_modules/vite/bin/vite.js build",
    "outputDirectory": "client/dist",
    "framework": "vite",
    "rewrites": [
        {
        "source": "/api/(.*)",
        "destination": "/api/index.js"
        },
        { "source": "/(.*)", "destination": "/index.html" }
    ]
}

分解每个配置选项：

• buildCommand ：此选项指定命令构建客户端应用程序。在这种情况下，构建命令是： cd client && yarn install && ./node_modules/vite/bin/vite.js build
  • 将目录更改为客户端文件夹
  • 使用纱线安装安装所需的依赖项
  • 使用Vite Build命令构建应用程序。
• outputDirectory ：此选项确定将存储构建应用程序的目录。在这种情况下，它设置为client/dist，表明构建文件将放置在客户端/DIST文件夹中。
• 框架 ：此选项指定应用程序使用的框架。在此配置中，该框架设置为vite，表明该应用程序是使用Vite构建的。
• 重写 ：此选项定义了用于路由请求的URL重写规则列表。这些规则是按照出现的顺序处理的。在此配置中，有两个重写规则：
  • 第一个重写规则指定以/api/开头的任何请求应重写为/api/index.js。这通常用于将API请求重定向到无服务器功能。
  • 第二个重写规则指出，对于(/(.*))的任何其他请求，目的地应为/index.html。这通常用于客户端路由，其中​​应用程序的主要索引。

使用Vercel部署过程：

以下是使用Vercel部署Mern堆栈应用程序的逐步指南：

步骤1：注册Vercel帐户。然后登录到Vercel仪表板，单击“添加新”按钮，然后选择“项目”类别。

步骤2：将您的MERN堆栈应用程序存储库连接到Vercel。 （Vercel支持git，github和gitlab等各种版本控制系统）

• 选择您的git存储库，然后选择要部署的分支。

步骤3：配置您的部署设置。

• 在 “ vercel.json”中已配置的框架和构建设置。
• 添加所有与“客户端”和“ API”相关的环境变量。

    MONGO_URI=<your-mongo-URI>
    PORT=5050
    CLERK_SECRET_KEY=<your-clerk-secret-key>
    VITE_REACT_APP_CLERK_PUBLISHABLE_KEY=<your-clerk-public-key>

步骤4：查看并单击 部署 按钮。

步骤5：成功部署MERN应用程序后，最终步骤是将部署的URL 作为客户端API的环境变量呼叫。

VITE_REACT_API_URL=https://mockmeet-vercel.vercel.app/api

例如：在MockMeet中，我们使用环境变量“ vite_react_api_url”将前端连接到API端点。

将部署的URL添加为环境变量后，重新删除您的应用程序。

Deploying MERN app on Vercel | Scribe

由Naveen Bantu

scribehow.com

恭喜！ð您的MERN堆栈应用程序将在部署后几分钟内启动并运行。