Ubuntu20.04にJSベースのアプリケーション用のMERNスタックをインストールする方法

MERNスタックは、MongoDB、Express、React、およびNodeの4つのコンポーネントで構成されています。動的なJSWebサイトの構築に使用されるJavaScriptテクノロジーのバンドルを提供します。

MongoDBは、堅牢なWebアプリケーションの開発に使用されるオープンソースで最も広く使用されているNoSQLデータベースシステムです。 Express.jsは、ハイブリッドWebベースのアプリケーションの開発に使用されるNode.jsWebアプリケーションフレームワークです。 React.jsは、モバイルアプリケーションのフロントエンドインターフェイスを作成するために使用されるオープンソースのJavaScriptフレームワークです。 Node.jsは、開発者がサーバー上でコードを実行できるようにするJavaScript環境です。

このガイドでは、Ubuntu20.04にMERNスタックをインストールする方法を説明します。

前提条件

Ubuntu20.04を実行しているサーバー。
ルートパスワードはサーバーで構成されています。

はじめに

まず、次のコマンドを実行して、システムパッケージを更新されたバージョンに更新します。

apt-get update -y

すべてのパッケージが更新されたら、次のステップに進むことができます。

MongoDBサーバーをインストールする

デフォルトでは、MongoDBの最新バージョンはUbuntu20.04のデフォルトリポジトリに含まれていません。そのため、MongoDBリポジトリをシステムに追加する必要があります。

まず、次のコマンドを使用して、必要なすべての依存関係をインストールします。

apt-get install gnupg2 wget curl unzip git -y

すべての依存関係をインストールした後、次のコマンドを使用してMongoDBGPGキーを追加します。

wget -qO- https://www.mongodb.org/static/pgp/server-4.4.asc | apt-key add -

次に、次のコマンドを使用してMongoDBリポジトリを追加します。

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.4.list

次に、リポジトリを更新し、次のコマンドを使用してMongoDBサーバーをインストールします。

apt-get update -y
apt-get install mongodb-org -y

MongoDBをインストールしたら、MongoDBサービスを開始し、システムの再起動時に開始できるようにします。

systemctl start mongod
systemctl enable mongod

次に、次のコマンドを使用してMongoDBサービスのステータスを確認します。

systemctl status mongod

次の出力が表示されます。

? mongod.service - MongoDB Database Server
     Loaded: loaded (/lib/systemd/system/mongod.service; disabled; vendor preset: enabled)
     Active: active (running) since Fri 2021-07-23 12:21:17 UTC; 5s ago
       Docs: https://docs.mongodb.org/manual
   Main PID: 8774 (mongod)
     Memory: 58.8M
     CGroup: /system.slice/mongod.service
             ??8774 /usr/bin/mongod --config /etc/mongod.conf

Jul 23 12:21:17 ubuntu systemd[1]: Started MongoDB Database Server.

次に、次のコマンドを使用してMongoDBのインストールを確認します。

mongo --eval 'db.runCommand({ connectionStatus: 1 })'

次の出力が得られるはずです：

MongoDB shell version v4.4.7
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("59c89093-9e9d-413b-aafa-ae0a4ddda087") }
MongoDB server version: 4.4.7
{
	"authInfo" : {
		"authenticatedUsers" : [ ],
		"authenticatedUserRoles" : [ ]
	},
	"ok" : 1
}

MongoDB管理者ユーザーを作成

まず、次のコマンドを使用してMongoDBインスタンスに接続します。

mongo

接続したら、次のコマンドを使用してデータベースをadminに変更します。

> use admin

次に、管理者ユーザーを作成し、次のコマンドでパスワードを設定します。

> db.createUser({user: "admin" , pwd: passwordPrompt() , roles: [{ role: "userAdminAnyDatabase" , db: "admin"}]})
Enter password:

次の出力が得られるはずです：

Successfully added user: {
	"user" : "admin",
	"roles" : [
		{
			"role" : "userAdminAnyDatabase",
			"db" : "admin"
		}
	]
}

次に、次のコマンドを使用してMongoDBシェルを終了します。

> quit()

Node.jsをインストール

デフォルトでは、最新バージョンのNode.jsはUbuntuのデフォルトリポジトリに含まれていません。そのため、ノードソースリポジトリをシステムに追加する必要があります。

ノードソースリポジトリを追加するには、次のコマンドを実行します。

curl -sL https://deb.nodesource.com/setup_14.x | bash -

リポジトリが追加されたら、次のコマンドを使用してNode.jsをインストールします。

apt-get install nodejs -y

インストール後、次のコマンドを使用してNode.jsのバージョンを確認します。

node --version

次の出力が表示されます。

v14.17.2

次のコマンドを使用して、NPMのバージョンを確認することもできます。

npm --version

次の出力が表示されます。

6.14.13

React.jsをインストール

まず、React.jsアプリケーションを作成するためにcreate-react-appツールをインストールする必要があります。

次のコマンドでインストールできます：

npm install -g create-react-app

インストール後、次のコマンドを使用してReact.jsアプリケーションを作成します。

create-react-app myapp

次の出力が表示されます。

Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

Happy hacking!

次に、ディレクトリをmyappに変更し、次のコマンドでアプリケーションを起動します。

cd myapp
npm start 0.0.0.0

次の出力が表示されます。

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

これで、URL http：// your-server-ip：3000を使用してReact.jsアプリにアクセスできます。。次のページにReact.jsダッシュボードが表示されます。

次に、 CTRL + Cを押しますターミナルでアプリケーションを閉じます。

Express.jsをインストール

まず、次のコマンドを使用してExpress-Generatorをインストールします。

npm install -g express-generator

インストール後、次のコマンドを使用して新しいプロジェクトを作成します。

express myproject

次の出力が得られるはずです：

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : myproject/
   create : myproject/public/
   create : myproject/public/javascripts/
   create : myproject/public/images/
   create : myproject/public/stylesheets/
   create : myproject/public/stylesheets/style.css
   create : myproject/routes/
   create : myproject/routes/index.js
   create : myproject/routes/users.js
   create : myproject/views/
   create : myproject/views/error.jade
   create : myproject/views/index.jade
   create : myproject/views/layout.jade
   create : myproject/app.js
   create : myproject/package.json
   create : myproject/bin/
   create : myproject/bin/www

   change directory:
     $ cd myproject

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=myproject:* npm start

次に、ディレクトリをプロジェクトに変更し、次のコマンドを使用してすべてのNPM依存関係をインストールします。

cd myproject
npm install

次に、次のコマンドを使用してExpressWebサーバーを起動します。

npm start 0.0.0.0

次に、Webブラウザーを開き、URL http：// your-server-ip：3000を使用してExpressアプリケーションにアクセスします。。次のページが表示されます：

結論

おめでとう！これで、Ubuntu20.04サーバーにMERNスタックが正常にインストールされました。これで、MERNアプリケーションの開発を開始できます。ご不明な点がございましたら、お気軽にお問い合わせください。