如何建置和部署全端 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中文網其他相關文章！