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

Question

我是网络开发的新手，我有一个托管服务，我想在上面部署我的 reactjs/node 项目。之前为了部署它，我只是上传了从运行ning npm run build 创建的构建文件夹。从那以后，我使用 MERN 堆栈添加了一个到 mongodb 数据库的连接。

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

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

目前，所有 API 调用都使用 axios post 到 http://localhost:4000/，我也认为这在服务器上不起作用。我在网上查找了有关部署 MERN 堆栈的信息，但我发现的所有信息都在 AWS EC2 上的托管方面进行了讨论，这不是我要做的。

我怎样才能部署到我的托管服务？有没有我应该寻找此信息的参考或地方？

编辑：我已经使用 MongoAtlas 连接到数据库，所以我使用的是 SRV 地址。我认为问题是 axios posts 使用本地主机地址，因为服务器上的应用程序只有在我的本地机器上有 nodemon 运行ning 时才能工作。我应该使用什么地址而不是这个地址？

Answer 1

Currently, all the API calls are using axios post to http://localhost:4000/, which I would also assume will not work on the server.

你是对的，那是行不通的。这是因为如果用户获得你的 React 应用程序，所有 API 调用将被重定向 到他们的 localhost。这不符合 你的 API

When I try to run it from the hosting service in the same way I did previously, it says it cannot connect to the database, which I assume is due to the fact that the connection is not open on my machine.

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

使用 "database hosting service" 如 MongoDB Atlas，然后您需要更改数据库的 URL指向服务提供的那个
在您的服务器上托管数据库，它将与 localhost URL

I have looked online for information regarding deploying the MERN stack, but all of the ones I have found discuss it in terms of hosting on AWS EC2, which is not what I will be doing.

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

编辑

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

Answer 2

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

how to setup nodejs app for prod

how to install mongodb on ubuntu

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

prepare and deploye mern stack.

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

Answer 3

在前端，您需要设置一个 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",
  },

Answer 4

TLDR;

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

详情

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

对于初创公司，我建议查看

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

第三个选项是可扩展的，而且从长远来看更便宜运行但是学习一些关于服务器及其复杂性的知识是一件好事。

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

How to deploy MERN stack to a hosting service?

deployment

node.js

reactjs

nodemon

mern

编辑