【问题标题】：How to deploy MERN stack to a hosting service?如何将 MERN 堆栈部署到托管服务？
【发布时间】：2019-02-24 17:33:47
【问题描述】：

我是 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 地址。我认为问题在于使用 localhost 地址的 axios 帖子，因为服务器上的应用程序只有在我的本地计算机上运行 nodemon 时才有效。我应该使用什么地址来代替这个地址？

【问题讨论】：

标签： node.js reactjs deployment nodemon mern

【解决方案1】：

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

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

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

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

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

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

您可以控制的任何服务器和灵活性都可以在这种情况下工作。如果你愿意，你可以在上面托管你所有的东西（服务器、前端和数据库）。 EC2 可以做到所有这些，但这不是您唯一的选择。您还可以查看 Microsoft 和 Google 等的类似产品...
另一种方法是单独部署每个工件，这更具可扩展性，但也引入了自身的复杂性。如果您打算这样做，您可能需要查看 Docker containers 和 Kubernetes，它们对于编排分布式系统很有用

编辑

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

【讨论】：

我已经使用 MongoAtlas 连接到数据库，所以我使用的是 SRV 地址。我认为问题在于使用 localhost 地址的 axios 帖子，因为服务器上的应用程序只有在我的本地计算机上运行 nodemon 时才有效。我应该使用什么地址而不是这个地址？（已编辑帖子以包含此内容）
你的前端需要调用你后端的URL。例如，如果它托管在 backend.com 上，那么类似于 https://backend.com:your_port/api @MeghanKing
是否需要在服务器上安装 mongodb 才能正常工作？
@MeghanKing 不。唯一的条件是服务器需要知道数据库的正确 URL。因此，如果您使用 Atlas，则为 srv...，如果在同一台服务器上，则为 localhost...。在您的前端，虽然它必须指向服务器的 URL

【解决方案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 发送请求。

在你的clientpackage.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",
  },

【讨论】：

是否需要在服务器上安装 mongodb 才能正常工作？
没有。由你决定。您可以使用第 3 方主机，也可以在主机上设置 Mongodb。

【解决方案3】：

嗯，是的，您必须将您的服务部署到主机（已经建立）。您可以研究多种解决方案有Digital Ocean看看这几个链接

how to setup nodejs app for prod

how to install mongodb on ubuntu

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

prepare and deploye mern stack.

正如我所说，除了这些之外，还有多种解决方案。希望这会有所帮助

【讨论】：

【解决方案4】：

TLDR；

为了运行基于 nodejs 的应用程序，您需要拥有自己的服务器。

详情

您可能有共享托管计划，其中大多数不提供多个第三方和开源项目。 (nodejs 或 docker)

对于初创公司，我建议研究一下

如何获得提供 docker 容器的托管 VPS（虚拟专用服务器）。将您的应用程序包装在 docker 容器中并将其上传到您的服务器。（亚马逊、Azure 等）。
其他更便宜的选择是获得非托管 VPS，您必须自己安装操作系统、安装依赖项、数据库、防火墙等）。不要被他们的名字吓到。
购买一台专用服务器机器，安装所有需要的东西，申请一个静态 IP 将您的域指向您的静态 IP。

从长远来看，第三种选择具有可扩展性且成本更低，但最好了解一些有关服务器及其复杂性的知识。

【讨论】：