欢迎来到面向初学者的 MERN 项目，在这里你将学习使用 MERN (MongoDB，Express，React，Node.js)框架构建令人敬畏的 web 应用。这种堆栈在创业领域有很高的需求，因为你可以用它来制作一个全功能的 web 应用。一个懂 HTML、CSS、React 的前端工程师，可以很快学会 Node.js 和 MongoDB，构建一个完全量产就绪的 web app。
在本书中，您将学习如何在 Heroku 中使用 Node.js 代码托管后端。前端站点使用 React 代码和 Firebase 托管。它还通过一个名为 MongoDB Atlas 的云数据库托管。在接下来的五章中，大多数主机设置都是相同的，所以在大多数章节中不会重复。
在安装 Firebase 之前，让我们讨论一下 MERN 堆栈中涉及的基础技术。
-
MongoDB 是一个基于 NoSQL 数据库的开源文档。它不同于将数据存储在表中的传统关系数据库。它将数据存储在类似 JSON 的文档中。它具有高度的可扩展性和性能导向性，因此适合现代网络应用。
-
React 是最流行的开源 JavaScript 库，用于构建网站或 web 应用的前端或用户界面。它由脸书开发和维护。
-
Node.js 允许开发者使用 JavaScript 编写服务器端代码。它与前端的 React 或 Angular 以及数据库的 MongoDB 集成得非常好。
-
Express 是 Node.js 的一个框架，通过它可以创建 API 端点，这些端点是任何后端服务器端代码的基础。
你需要一个谷歌账户才能使用 Firebase。进入 https://firebase.google.com ，点击进入右上角的控制台。你必须登录你的谷歌账户，如图 1-1 所示。
图 1-1
Firebase 控制台标题
点击页面中的添加项目链接，如图 1-2 所示。
图 1-2
添加项目
在此页面中，将项目命名为 dating-app-mern ，然后点击继续按钮，如图 1-3 所示。请注意，这只是一个安装说明。你将在下一章开始构建应用。
图 1-3
应用名称
在下一页面中，点击创建项目按钮，如图 1-4 所示。
图 1-4
创建项目
创建项目需要一些时间，如图 1-5 所示。
图 1-5
项目已创建
MongoDB 是您在云上使用的数据库。它也被称为 MongoDB Atlas。这比在本地机器上设置更容易操作。进入 www.mongodb.com 并登录或创建新账户。
登录后，您会看到类似于图 1-6 所示的屏幕。点击新建项目按钮。
图 1-6
MongoDB 新项目
将你的项目命名为 dating-app-mern ，然后点击下一步按钮，如图 1-7 所示。
图 1-7
项目名
在下一个屏幕上，点击创建项目按钮，如图 1-8 所示。
图 1-8
MongoDB 创建项目
在下一个屏幕上，点击建立集群按钮，如图 1-9 所示。
图 1-9
构建集群
在下一个屏幕上，选择自由层，如图 1-10 所示。
图 1-10
自由层
在下一个屏幕上，您需要选择要在其中创建数据库的 AWS 区域。(我选择孟买是因为我住在印度，这给了我低延迟。)之后，点击创建集群按钮，如图 1-11 所示。
图 1-11
选择区域
下一个屏幕显示集群已经创建，这需要时间。您可以返回并创建您的第一个 API 端点，如图 1-12 所示。
图 1-12
集群已创建
在 MongoDB 中创建用户，点击数据库访问页签，然后点击添加新数据库用户按钮，如图 1-13 所示。
图 1-13
创建数据库用户
在下一个屏幕上，您需要输入用户名和密码，如图 1-14 所示。你必须记住这两点。接下来，向下滚动并点击添加用户按钮。
图 1-14
添加用户
接下来，进入网络访问选项卡，点击添加 IP 地址按钮，如图 1-15 所示。
图 1-15
网络存取
在弹出的窗口中，点击允许从任何地方访问按钮，然后点击确认按钮，如图 1-16 所示。
图 1-16
允许访问
接下来，返回到集群选项卡，点击连接按钮，弹出如图 1-17 所示的窗口。单击连接您的应用选项卡。
图 1-17
连接应用
点击复制按钮复制连接 URL，如图 1-18 所示。
图 1-18
连接字符串
完成后端代码后，进入 www.heroku.com 部署后端。登录你的 Heroku 账号，点击新建下拉菜单，然后点击新建 app 按钮，如图 1-19 所示。您也可以从命令行使用 Heroku CLI 来实现这一点，但这里不做介绍。
图 1-19
英雄库登录
接下来命名 app，点击创建 app 按钮，如图 1-20 所示。
图 1-20
Heroku app name
下一个屏幕显示了部署您的应用的所有命令，但是您需要 Heroku CLI。点击链接，按照说明将其安装到您的操作系统上，如图 1-21 所示。
图 1-21
希律王的指示
运行backend文件夹中的heroku login命令。系统会询问您是否有权限打开浏览器。此命令要求您按任意键在浏览器中打开。
图 1-22。
在这里，您可以使用您的凭证登录，如图 1-23 所示。
图 1-23
登录凭据
成功登录后，您会看到如图 1-24 所示的页面，您需要关闭该页面。
图 1-24
关闭弹出窗口
您需要将代码从本地机器推送到 Heroku 存储库。现在您已经登录到您的帐户，您可以运行以下命令来连接 Heroku Git。
heroku git:remote -a dating-mern-backend接下来，让我们运行熟悉的git命令来提交代码。Git 是一个跟踪文件变化的软件。这是软件开发中必须的。以下命令将代码添加到临时区域，然后提交代码。push命令将其推送到远程 Heroku 服务器。
git add .
git commit -m "backend code complete"
git push heroku master安装完成后，点击打开 app 按钮，进入部署站点，如图 1-25 所示。
图 1-25
打开后端应用
在前端项目完成之后(在下一章中)，您可以在 Firebase 中部署它。转到frontend文件夹，在终端中运行firebase login命令。如果是第一次运行，将会打开一个弹出窗口。接下来，运行firebase init命令。键入 Y 继续。
firebase login
firebase init使用向下箭头键进入托管，如图 1-26 所示。按空格键选择它，然后按 Enter 键。
图 1-26
安装ˌ使成形
选择使用已有项目，如图 1-27 所示，按回车键。
图 1-27
现有项目
接下来选择正确的项目，在我这里是 dating-app-mern-453b1 ，如图 1-28 所示。
图 1-28
正确的项目
接下来选择公共目录，也就是build。下面这个问题问的是一个单页 app 回答是。下一个问题是关于 GitHub 部署的；回答否，如图 1-29 所示。
图 1-29
建设
接下来，运行frontend文件夹中的npm run build以获得最佳的生产版本。最后一个命令，firebase deploy，将项目部署到 Firebase。如果成功，该网站现在是活的，这将在接下来的章节中显示。
如果您的系统上还没有安装 Node.js 和 npm(Node 包管理器),我们来看一下它们的安装。本书中的大部分代码都需要 Node.js 和 npm。React 前端代码也需要 Node.js，通过 npm，可以安装很多小型开源程序，为 React 和 Node.js 都增加了功能。
当您安装 Node.js 时，npm 也会自动安装在您的系统上。尽管 macOS 用户可以在互联网上找到类似的指南，但以下说明适用于基于 Windows 的系统。
在你的网页浏览器中，输入 https://nodejs.org/en/download/ ，点击 Windows Installer，如图 1-30 所示。同样，它还会安装 npm。
图 1-30
Node.js installer(Node. js 安装程序)
默认情况下，下载的文件安装在您的下载文件夹中。点击它，然后点击运行按钮，如图 1-31 所示。
图 1-31
快动按钮
在 Node.js 安装弹出窗口中，点击下一步按钮，如图 1-32 所示。
图 1-32
Node.js 欢迎
点击接受最终用户许可协议，然后点击下一步按钮，如图 1-33 所示。
图 1-33
协议
接下来，我建议您使用图 1-34 所示的安装位置。
图 1-34
安装位置
向导要求您选择一个包。保持默认设置，如图 1-35 所示。
图 1-35
默认包
接下来点击复选框，然后点击下一个按钮，如图 1-36 所示。
图 1-36
属国
然后点击安装按钮，如图 1-37 所示。
图 1-37
安装
安装完成后，运行以下命令检查版本并验证一切正常。
node –v
npm -v在这一章中，我们学习了创建 MERN(MongoDB，Express，ReactJS，NodeJS)项目的所有不同技术。我们还学习了如何在不同的环境中部署它们，我们将在接下来的章节中使用它们。