如何构建和部署全栈 MERN 应用程序

MERN 堆栈是用于构建全堆栈 Web 应用程序的流行技术堆栈。它由 MongoDB、Express、React 和 Node.js 组成，其中每一个在创建现代 Web 应用程序中都发挥着至关重要的作用。在本文中，我们将介绍构建全栈 MERN 应用程序并将其部署到实时服务器的过程。

什么是 MERN 堆栈？

• MongoDB： 一个 NoSQL 数据库，用于以灵活的、类似 JSON 的格式存储数据。
• Express： Node.js 的轻量级 Web 应用程序框架，有助于管理服务器端逻辑。
• React： 一个前端 JavaScript 库，用于使用可重用组件构建用户界面。
• Node.js： 用于构建后端服务器端逻辑和 API 的 JavaScript 运行时。

构建全栈 MERN 应用程序的步骤

1。设置后端 (Node.js Express MongoDB)：

• 初始化 Node.js 项目并安装所需的依赖项，例如express、mongoose 和 cors。
• 在 Express 中设置路由来处理 API 请求（例如 GET、POST、PUT、DELETE）。
• 使用 Mongoose 连接 MongoDB 并定义数据模型。
• 使用 Express 设置服务器并配置它来处理请求。
• 实现CRUD（创建、读取、更新、删除）操作以与MongoDB交互。 后端代码示例：

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

2。构建前端（React）：

• 使用 create-react-app 或您喜欢的工具设置 React 项目。
• 创建与应用程序中不同视图相对应的 React 组件（例如，Home、UserList、UserForm）。
• 使用 axios 或 fetch 向 Express 服务器发出 API 请求并在组件中显示数据。
• 使用 React 的 useState 或 useContext 进行全局状态管理来管理状态。 前端代码示例：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, []);

  return (
    <div>
      <h1 id="Users">Users</h1>
      <ul>
        {users.map(user => (
          <li key="{user._id}">{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3。连接前端和后端：

• 确保后端在不同的端口上运行（例如 5000），而前端 (React) 在端口 3000 上运行。
• 使用CORS（跨域资源共享）让前端与后端进行通信。
• 在 React 的 package.json 中配置代理设置，以简化开发过程中的 API 请求。

示例：

"proxy": "http://localhost:5000"

4。部署 MERN 应用程序：

• 将后端服务器部署到 Heroku 或 DigitalOcean 等平台。
• 对于前端，您可以使用 Netlify 或 Vercel 等服务来部署 React 应用程序。
• 部署后，更新 API URL 以指向实时服务器而不是本地主机。

部署步骤示例：

• 对于后端部署，您可以使用 Heroku CLI：

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Middleware
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernApp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

• 对于 Netlify 上的前端部署，只需将您的 React 应用程序推送到 GitHub 并将其连接到 Netlify。

结论
构建和部署全栈 MERN 应用程序涉及使用 Node.js、Express 和 MongoDB 设置后端，以及使用 React 设置前端。通过执行以下步骤，您可以创建一个处理客户端和服务器端逻辑的完整 Web 应用程序。开发完成后，将应用程序部署在 Heroku 和 Netlify 等平台上可确保您的应用程序正常运行并可供用户访问。

以上是如何构建和部署全栈 MERN 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！