怎样在Ubuntu 20.04上部署MERN应用程序

MERN堆栈由MongoDB,Express,React和Node.js组成。 它们一起使开发人员可以在Web上构建应用程序。

先决条件

在Vultr上部署新的Ubuntu 20.04 LTS云服务器。 使用sudo设置非root用户。 更新您的服务器。

1.安装Node.JS

通过NodeSource存储库安装最新的LTS版本的Node.js,以确保与应用程序中的任何程序包或依赖项具有最大的兼容性。

导入包签名密钥。

$ wget -qO- https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -

添加NodeSource存储库。

$ echo 'deb https://deb.nodesource.com/node_14.x focal main' | sudo tee -a /etc/apt/sources.list

更新软件包列表。

$ sudo apt update

安装Node.JS。

$ sudo apt install -y nodejs

2.安装MongoDB

MongoDB是存储应用程序所有数据的数据库。 MongoDB还为Ubuntu提供了最新版本的推荐存储库。

导入软件包签名密钥。

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

添加MongoDB存储库。

$ 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

安装MongoDB社区版。

$ sudo apt install -y mongodb-org

启用并启动MongoDB。

$ sudo systemctl enable --now mongod

3.设置NPM项目

为该应用创建一个新目录。

$ mkdir -p app && cd app

创建一个 package.json 文件。

$ npm init -y

安装项目依赖项:Express Web框架,MongoDB驱动程序,React,React DOM,Webpack,Babel和Dotenv。

$ 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

创建 src/index.js,其中包含Express的主要服务器代码。

$ nano src/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}`);
})();

保存并退出文件。

创建 src/public/App.jsx,其中包含应用程序React部分的主要代码。

$ nano src/public/App.jsx

粘贴以下内容:

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

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

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

保存并退出文件。

创建 src/public/index.html,其中包含将被注入已编译的React代码的基本HTML。 它还具有要渲染的根元素。

$ nano src/public/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

粘贴以下内容:

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

粘贴以下内容:

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

保存并退出文件。

创建 .env,用于配置端口和MongoDB数据库URL。

$ nano .env

粘贴以下内容:

PORT=8080
MONGODB=mongodb://localhost

保存并退出文件。

生成应用。

$ npx webpack

启动应用程序。

$ node src/index.js

该应用程序现在应该在端口8080上可用。

注:本教程在Vultr VPS上测试通过,如需部署请前往Vultr.com