전체 스택 MERN 애플리케이션을 구축하고 배포하는 방법

MERN 스택은 풀 스택 웹 애플리케이션 구축에 널리 사용되는 기술 스택입니다. MongoDB, Express, React 및 Node.js로 구성되며, 각각은 최신 웹 앱을 만드는 데 중요한 역할을 합니다. 이 글에서는 풀스택 MERN 애플리케이션을 구축하고 이를 라이브 서버에 배포하는 과정을 살펴보겠습니다.

MERN 스택이란 무엇인가요?

• MongoDB: JSON과 같은 유연한 형식으로 데이터를 저장하는 데 사용되는 NoSQL 데이터베이스입니다.
• Express: 서버측 로직을 관리하는 데 도움이 되는 Node.js용 경량 웹 애플리케이션 프레임워크입니다.
• React: 재사용 가능한 구성 요소로 사용자 인터페이스를 구축하는 데 사용되는 프런트엔드 JavaScript 라이브러리입니다.
• Node.js: 백엔드 서버측 로직과 API를 구축하는 데 사용되는 JavaScript 런타임입니다.

풀 스택 MERN 애플리케이션을 구축하는 단계

1. 백엔드 설정(Node.js Express MongoDB):

• Node.js 프로젝트를 초기화하고 express, mongoose, cors와 같은 필수 종속성을 설치합니다.
• API 요청(예: GET, POST, PUT, DELETE)을 처리하기 위해 Express에서 경로를 설정합니다.
• Mongoose를 사용하여 MongoDB에 연결하고 데이터 모델을 정의합니다.
• Express로 서버를 설정하고 요청을 처리하도록 구성하세요.
• MongoDB와 상호작용하기 위해 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 구현합니다. 백엔드 코드 예시:

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 프로젝트를 설정하세요.
• 앱의 다양한 보기(예: Home, UserList, UserForm)에 해당하는 React 구성 요소를 만듭니다.
• 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(Cross-Origin Resource Sharing)를 사용하여 프런트엔드가 백엔드와 통신할 수 있도록 합니다.
• 개발 중 API 요청을 단순화하려면 React의 package.json에서 프록시 설정을 구성하세요.

예:

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

4. MERN 애플리케이션 배포:

• Heroku 또는 DigitalOcean과 같은 플랫폼에 백엔드 서버를 배포합니다.
• 프런트엔드의 경우 Netlify 또는 Vercel과 같은 서비스를 사용하여 React 앱을 배포할 수 있습니다.
• 배포 후 localhost 대신 라이브 서버를 가리키도록 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를 사용하여 프런트엔드를 설정해야 합니다. 다음 단계를 수행하면 클라이언트측 논리와 서버측 논리를 모두 처리하는 완전한 웹 애플리케이션을 생성할 수 있습니다. 일단 개발되면 Heroku 및 Netlify와 같은 플랫폼에 앱을 배포하면 애플리케이션이 활성화되고 사용자가 액세스할 수 있게 됩니다.

위 내용은 전체 스택 MERN 애플리케이션을 구축하고 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!