MERN スタックは、MongoDB、Express、React、および Node.js を使用したセットアップです。これは、MEAN スタックの変形の 1 つです。 MongoDB はデータベース、Express with Node.js はデータベースと通信するバックエンドに使用され、React はクライアント側またはフロントエンドです。 Nginx リバース プロキシを Node.js サーバーに使用し、Let’sEncrypt SSL をセットアップします。
このガイドでは、Ubuntu 20.04 サーバーで MERN スタックをセットアップする方法を学習します。
このセットアップは Google Cloud でテストされているため、他の VPS、Ubuntu 20.04 または Ubuntu 18.04 を実行しているクラウド サーバーで正常に動作するはずです。
前提条件
- sudo アクセスが可能な Ubuntu サーバー。
- サーバーを指すドメイン名
目次
<オール>サーバーの初期設定
サーバー パッケージを利用可能な最新のものに更新することから始めます。
sudo apt update sudo apt dist-upgrade -y
これで、MERN スタックのセットアップに進むことができます。
MongoDB をインストール
ここでは、apt を使用して、LTS 付きの MongoDB Community Edition をインストールします。 パッケージ管理。この記事の時点での MongoDB の最新バージョンは 5.0.5 です。
gnupg をインストールする必要があるかもしれません キーをインポートするため。
sudo apt install gnupg
次のコマンドを使用して公開鍵をインポートします。
wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -
MongoDB リポジトリをソース リストに追加します。
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list
パッケージを更新して MongoDB をインストールします。
sudo apt update sudo apt install -y mongodb-org
インストールが完了したら、システムの起動時に MongoDB を起動できるようにします。
sudo systemctl enable mongod
MongoDB サーバーを起動します。
sudo service mongod start
次のコマンドを使用してステータスを表示できます。
sudo service mongod status
Output
● mongod.service - MongoDB Database Server
Loaded: loaded (/lib/systemd/system/mongod.service; enabled; vendor preset: enabled)
Active: active (running) since Sun 2022-01-16 22:08:26 UTC; 7h ago
Docs: https://docs.mongodb.org/manual
Main PID: 1942 (mongod)
Memory: 164.5M
CGroup: /system.slice/mongod.service
└─1942 /usr/bin/mongod --config /etc/mongod.conf
Jan 16 22:08:26 staging systemd[1]: Started MongoDB Database Server. MongoDB を構成する
これで、MongoDB を保護し、リモート接続を受け入れるように MongoDB を構成し、新しいデータベースを作成することもできます。
セキュア MongoDB
MongoDB 構成ファイルを編集します。
sudo nano /etc/mongod.conf
セキュリティ セクション #security までスクロールします。 コメントを解除し、承認を有効にします。最終的な編集は次のようになります。
security: authorization: enabled
リモート接続を有効にする
リモート接続を有効にするには、同じファイルを編集して、内部またはプライベート IP をネットワーク インターフェイスに追加する必要があります。構成は次のようになります。
net: port: 27017 bindIp: 127.0.0.1,10.128.10.1
10.128.10.1 を IP アドレスに置き換えます。
ポート 27017 用のファイアウォールがある場合は、それを開きます。
MongoDB を再起動します。
sudo systemctl restart mongod
次のコマンドを使用して、MongoDB がリモート接続を許可しているかどうかを確認します。
sudo lsof -i | grep mongo
以下のような出力が表示されます。
mongod 1942 mongodb 11u IPv4 31550 0t0 TCP instance_name.c.project_id.internal:27017 (LISTEN)
mongod 1942 mongodb 12u IPv4 31551 0t0 TCP localhost:27017 (LISTEN)
MongoDB 管理ユーザーの作成
mongosh を使用して MongoDB シェルに接続します コマンド。
mongosh
管理データベースに変更します。
use admin
すべての権限とセットアップ パスワードを持つ管理者ユーザーを作成します。
db.createUser({user: "admin" , pwd: passwordPrompt() , roles: [{ role: "userAdminAnyDatabase" , db: "admin"}]}) プロンプトが表示されたら、パスワードを入力してください。
exitを入力してください シェルを終了します。
これで、次の接続文字列を使用して MongoDB に接続できます。
mongodb://admin:password@External-IP:27017/database
NVM で Node.js をインストールする
Node Version Manager (NVM) を使用して Node.js をインストールします。これにより、異なる Node.js バージョン間で簡単にやり取りできます。
wget を使用して、NVM インストール スクリプトをダウンロードして実行します。 .
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm コマンドを現在のシェル セッションにロードします。
source ~/.bashrc
利用可能なすべての Node.js バージョンを一覧表示するには、次のコマンドを使用できます。
nvm ls-remote
以下の構文を使用して、必要な Node.js バージョンをインストールします。
nvm install v16.13.2
インストールしたら、Node.js と NPM のバージョンを確認できます。
node -v v16.13.2 npm -v 6.14.13
React.js をインストール
npx を使用してフロントエンド React.js をインストールしてビルドします コマンド。
React アプリをインストールするフォルダーに移動し、次のコマンドを実行します。
npx create-react-app frontend
すべての React パッケージをインストールするには、しばらく時間がかかります。インストールが完了すると、frontend が表示されます すべての基本的な React スクリプトで作成されたフォルダー。
フロントエンド ディレクトリに移動し、npm を使用してビルドをトリガーします .
cd frontend npm run build
これにより、フロントエンド用の HTML、CSS、および JS ファイルを含む静的出力が作成されます。
フロントエンドにサービスを提供するために、Nginx Web サーバーをこのビルド ディレクトリに向けることができます。
Express.js をインストール
npx を使用して高速生成をインストールします コマンド。
npx express-generator
インストールが完了したら、express を使用してバックエンド アプリケーションを作成します。 コマンド。
cd ~/ express backend
これで Express が作成されます。以下のセクションで説明するように、すべてのノード モジュールをインストールし、バックグラウンドで PM2 を使用して Express サーバーを起動できます。
cd backend npm install
React Specialization でフルスタック ウェブ デベロッパーになる .ウェブ開発コースを完了する
PM2 をセットアップして Node.js をバックグラウンドで実行する
PM2 は、ノード サーバーをバックグラウンドで起動するのに非常に便利なノード プロセス マネージャーです。
Express アプリケーションに移動し、次のコマンドを実行します。
cd ~/backend pm2 start npm --name "backend" -- start
これで、Express サーバーがバックグラウンドで開始され、ポート 3000 でリッスンします。
起動時に Express アプリケーションを開始するように PM2 を構成します。
pm2 startup
実行する長いコマンドが提供されます。コマンドが実行されたら、設定を保存できます。
pm2 save
次に、必要に応じて、サブドメインまたはサブフォルダーのこのポートを介して Nginx リバース プロキシを構成できます。
Nginx をインストールして構成する
Nginx は、Node.js ベースのアプリケーションで動作する最高の Web サーバーの 1 つです。
Nginx をインストールします。
sudo apt install nginx
デフォルト設定を削除
sudo rm /etc/nginx/sites-available/default sudo rm /etc/nginx/sites-enabled/default
新しい Nginx 構成を作成する
sudo nano /etc/nginx/sites-available/application.conf
以下を貼り付けます。この構成では、React.js アプリケーションのビルド出力ディレクトリと /api へのメイン ドメイン パスを指定しています。 Express.js アプリケーションのパス。
server {
listen [::]:80;
listen 80;
server_name domainname.com www.domainname.com;
root /home/cloudbooklet/backend/build/;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /api/ {
proxy_pass http://127.0.0.1:3001;
proxy_http_version 1.1;
proxy_set_header Connection '';
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
}
} ファイルを保存して終了します。
シンボリック リンクを作成して構成を有効にします。
sudo ln -s /etc/nginx/sites-available/application.conf /etc/nginx/sites-enabled/application.conf
Nginx の設定を確認し、Nginx を再起動してください
sudo nginx -t sudo service nginx restart
Let’sEncrypt SSL をインストール
Certbot を使用して、ドメインに無料の Let’s Encrypt SSL 証明書をインストールできます。
sudo apt install python3-certbot-nginx
次のコマンドを実行して、証明書をインストールし、HTTPS へのリダイレクトを自動的に構成します。
sudo certbot --nginx --redirect --agree-tos --no-eff-email -m [email protected] -d domain.com -d www.domain.com
これで SSL 証明書を受け取り、自動的に構成されます。
自動更新を設定します。
sudo certbot renew --dry-run
これで、ブラウザーでドメインを検索して出力を確認できます。
結論
これで、Ubuntu 20.04 に MERN スタックをインストールしてセットアップする方法を学習しました。
御時間ありがとうございます。問題やフィードバックに直面した場合は、下にコメントを残してください。