如何在Ubuntu云服务器上安装MongoDB、Express、React和Node.js？-朝暮数据

MEAN平台由MongoDBDB、Express、React和Node.js组成，是一套开发Web应用程序的工具软件。这篇帮助讲解如何在Ubuntu 20.04云服务器上部署MEAN平台的方法。

安装Node.js

从NodeSource软件库中安装最新版本的Node.js，确保安装的应用软件能够和操作系统有着最大程度的兼容性。

$ wget -qO- https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -
$ echo 'deb https://deb.nodesource.com/node_14.x focal main' | sudo tee -a /etc/apt/sources.list
$ sudo apt update
$ sudo apt install -y nodejs

安装MongoDB

MongoDB是一款存储应用程序数据的数据库系统.在Ubuntu操作系统下，推荐安装MongoDB的最新版本。

$ wget -qO- https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
$ echo 'deb [arch=amd64] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse' | sudo tee -a /etc/apt/sources.list
$ sudo apt update
$ sudo apt install -y mongodb-org
$ sudo systemctl enable --now mongod

创建应用程序

创建一个app目录，用于存放应用程序。

$ mkdir -p app && cd app

创建package.json文件，并安装Express框架、MongoDB驱动、React、WebPack等必备组件。

$ npm init -y
$ npm i express mongodb react react-dom webpack webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader dotenv

创建其他必要目录和文件。

$ mkdir src
$ mkdir src/public
$ nano src/index.js

在index.js中添加如下代码。

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}
const path = require("path");
const express = require("express");
const app = express();
const { MongoClient } = require("mongodb");

(async () => {
  const mongo = new MongoClient(process.env.MONGODB);
  try {
    await mongo.connect();
  } catch (e) {
    console.log("Failed connecting to MongoDB");
    console.log(e);
    process.exit(1);
  }
  console.log("Connected to MongoDB");
  app.use(express.static(path.join(__dirname, "../dist")));
  app.listen(process.env.PORT);
  console.log(`HTTP listening on ${process.env.PORT}`);
})();

创建React的主代码文件。

$ nano src/public/App.jsx

添加如下代码到App.jsx文件中。

import React from "react";
import ReactDOM from "react-dom";

const App = () => (
  <div>
    <h1>App</h1>
  </div>
);

ReactDOM.render(<App />, document.querySelector("#app"));

创建基本的HTML文件，上一步创建的React代码将嵌入到此HTML文件中。

$ nano src/public/index.html

添加如下代码到index.html文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MERN App</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

创建webpack.config.js文件，用于webpack捆绑整个项目。

$ nano webpack.config.js

添加如下代码到webpack.config.js文件中。

module.exports = {
  entry: "./src/public/App.jsx",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new (require("html-webpack-plugin"))({
      template: "./src/public/index.html",
    }),
  ],
};

创建.babelrc文件，用于设置Babel编译React代码。

$ nano .babelrc

添加如下代码到.babelrc文件中。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

创建.env文件，用于设置端口和MongoDB的数据库URL地址。

$ nano

添加如下代码到.env文件中。

PORT=8080
MONGODB=mongodb://localhost

测试

最后编译并启动app，启动成功后，在浏览器上访问 http://your_server_IP:8080 测试MEAN平台是否部署成功。

$ npx webpack
$ node src/index.js