フルスタック MERN アプリケーションを構築してデプロイする方法

MERN スタックは、フルスタック Web アプリケーションを構築するための一般的なテクノロジ スタックです。これは MongoDB、Express、React、Node.js で構成されており、それぞれが最新の Web アプリの作成において重要な役割を果たします。この記事では、フルスタックの MERN アプリケーションを構築し、それをライブ サーバーにデプロイするプロセスについて説明します。

MERN スタックとは何ですか?

• MongoDB: 柔軟な JSON のような形式でデータを保存するために使用される NoSQL データベース。
• Express: サーバー側ロジックの管理に役立つ Node.js 用の軽量 Web アプリケーション フレームワーク。
• 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>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) を使用して、フロントエンドがバックエンドと通信できるようにします。
• 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 アプリケーションを作成できます。開発後、Heraku や Netlify などのプラットフォームにアプリをデプロイすると、アプリケーションが確実に稼働し、ユーザーがアクセスできるようになります。

以上がフルスタック MERN アプリケーションを構築してデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。