如何将MERN堆栈部署到托管服务？

Question

我是Web开发的新手，我有一个托管服务，我想在其上部署reactjs / node项目。要先部署它，我只是上传了从运行npm run build创建的构建文件夹。我已经使用MERN堆栈添加了与mongodb数据库的连接。

该项目最初是使用create-react-app创建的，然后我按照本教程设置后端节点/ mongodb：https://appdividend.com/2018/11/11/react-crud-example-mern-stack-tutorial/。我的所有服务器代码都包含在api文件夹中的项目文件夹中。

我可以通过运行npm start，nodemon server.js（来自api文件夹）并连接到终端中的mongodb来在本地主机上运行该项目。当我尝试以与我之前相同的方式从托管服务运行它时，它说它无法连接到数据库，我认为这是因为我的机器上没有打开连接。

目前，所有的API调用都使用axios发布到http://localhost:4000/，我也认为它不会在服务器上运行。我已经在网上查看了有关部署MERN堆栈的信息，但我发现的所有内容都是在AWS EC2上进行托管的，这不是我将要做的。

我如何能够部署到我的托管服务？有什么参考或地方我应该查找这些信息吗？

编辑：我已使用MongoAtlas连接到数据库，因此使用的是SRV地址。我认为问题是使用l​​ocalhost地址的axios帖子，因为服务器上的应用只有在我的本地机器上运行nodemon时才有效。我应该用什么地址代替呢？

Answer 1

目前，所有的API调用都使用axios发布到http://localhost:4000/，我也认为它不会在服务器上运行。

你是对的，那是行不通的。这是因为如果用户获得您的React应用程序，所有API调用都将重定向到他们的localhost。哪个不包含您的API

当我尝试以与我之前相同的方式从托管服务运行它时，它说它无法连接到数据库，我认为这是因为我的机器上没有打开连接。

这可能是因为MongoDB URL可能仍然设置为'mongodb://localhost:27017/myapp。这里有2个主要选项。

1. 使用像MongoDB Atlas这样的“数据库托管服务”，然后您需要更改数据库的URL以指向服务提供的URL
2. 在您的服务器上托管数据库，该数据库将与localhost URL一起使用

我已经在网上查看了有关部署MERN堆栈的信息，但我发现的所有内容都是在AWS EC2上进行托管的，这不是我将要做的。

• 您拥有控制权和灵活性的任何服务器都可以在此方案中使用。如果需要，您可以在其上托管所有内容（服务器，前端和数据库）。 EC2可以做到这一切，但它不是你唯一的选择。您还可以查看微软和谷歌等同类产品......
• 另一种方法是单独部署每个工件，这些工件更具可扩展性，但也引入了自身的复杂性。如果你是这样的话，你可能想要查看Docker containers和Kubernetes，它们对编排分布式系统很有用

Edit

由于您使用的是MongoDB Atlas，请确保将服务器的IP地址列入白名单

Answer 2

在前端，您需要设置一个axios配置，该配置将根据运行环境指向正确的URL：

utils / axiosConfig.js（我喜欢使用名称app来保持它与express内联，但你可以命名为什么）

import axios from 'axios';

const env = process.env.NODE_ENV; // current environment

export const app = axios.create({
  baseURL:
    env === 'production'
      ? 'http://example.com/api/' // production
      : 'http://localhost:5000/api/', // development
});

然后，无论您在何处进行API调用，都可以使用此配置：

import { app } from '../utils/axiosConfig.js';

app.get("example");
app.post("example");
...etc

现在，它可以向http://localhost:5000/api/example或http://example.com/api/example发送请求。

在client package.json中，您可以指定环境：

 "scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack",
    "stage": "NODE_ENV=staging webpack",
    "test": "NODE_ENV=testing jest --watchAll --coverage",
  },

Answer 3

嗯，是的，你必须在托管（已经建立）上部署你的服务。您可以查看多种解决方案。数字海洋查看这几个链接

how to setup nodejs app for prod

how to install mongodb on ubuntu

还有Heroku。为此，这里有一个完整的教程

prepare and deploye mern stack。

正如我所说，除此之外还有多种解决方案。希望这可以帮助