使用 Heroku 部署全栈 MERN 应用

在完成Black Codher BootCamp 的最终项目时，我决定使用 Heroku 部署 MERN 应用程序（使用 MongoDB、Express、Reactjs 和 Nodejs 构建）。本文总结了我的步骤。这可以作为笔记的记录，供将来参考，但对于任何刚开始使用 Heroku 的人来说，它都会很有帮助！

在我们深入探讨之前...

Heroku：概述

Heroku 是一个平台即服务 (PaaS)，使开发人员能够完全在云中构建、运行和操作应用程序。 - heroku.com

这是一个很棒的工具，可以让您的应用程序上线，而无需担心基础设施。

它正式支持以下语言：Ruby、Node.js、Python、Java、Go、PHP 和 Scala。这使得用户能够以最少的修改来部署他们的应用程序。

Heroku 支持使用 CLI 进行部署，也支持使用 GitHub 进行持续部署。本文仅介绍第一种部署方式。

开始之前

1. 您已具备 MERN 堆栈和 mongoose 的基本知识。
2. 您已设置好 MERN 应用程序（连接到数据库），并在本地运行。或者，您可以使用deploy-mern 仓库开始。本篇博文将基于该项目的结构进行撰写。
3. 如果您还没有这样做，请在项目的根文件夹内初始化一个 git 存储库。

$ cd your-project
$ git init

开始吧！

下载并安装 Heroku

您可以从此链接安装 Heroku 命令行界面 (CLI) 。要检查它是否安装成功，您可以运行以下命令：

$ heroku --version
heroku/7.47.11 win32-x64 node-v12.16.2

安装完成后，您将能够从终端使用 Heroku 命令。但在继续之前，请在此处创建一个 Heroku 帐户。然后，您将能够从终端登录：

$ heroku login

这将打开一个选项卡，以便您从浏览器登录。登录后，我们将继续进行一些修改。

修改server.js

注意：您可能会在某些情况下（例如在这篇博文中）看到server.js将用于命名入口点。不过，也通常使用index.js来命名入口点。deploy -mern存储库使用index.js。因此，当我们在博文的其余部分讨论 时，server.js您可能需要参考index.js。

港口

您可能已将 PORT 定义为默认值 5000。但是，当使用 Heroku 部署应用程序时，此端口可能不可用，因此我们将 PORT 定义如下：

server.js

const PORT = process.env.PORT || 5000

这样，当应用程序在本地运行时，由于process.env.PORT未定义，服务器将托管在 PORT 5000，但一旦部署，Heroku 将在任何可用的 PORT 中运行服务器。

MongoDB Atlas 和连接字符串

由于您已经构建了 MERN 应用程序，您可能需要考虑使用MongoDB Atlas。注册并登录在线平台后，您可以按照以下步骤操作：

1. 从 Atlas 仪表板创建一个新项目。

2. 创建一个包含您的数据库的集群。这将需要几分钟时间。您需要指定云提供商和您所在的区域。
   

3. 需要注意的是，您可能需要将连接 IP 地址列入白名单才能访问集群。（网络访问 >> 添加 IP 地址 >> 允许从任何位置访问 >> 确认）。
   

4. 现在是时候将您的应用程序连接到数据库了。为此，请在“集群”选项卡中点击“连接”。由于这是首次连接应用程序，您需要创建用户和密码。
   

5. 现在，点击“选择连接方法”。选择“连接您的应用程序”方法后，您可以复制连接字符串。

该字符串将如下所示：

"mongodb+srv://username:<password>@<cluster>/<database>?retryWrites=true&w=majority";

其中<password>、<cluster>和<database>对应于您自己的凭据。（注意：密码对应于数据库用户，而不是您的 Atlas 帐户。填写详细信息时请勿包含<或）。>

现在，您可以将此字符串添加到您的server.js以完成连接。

server.js:

mongoose
  .connect(
"mongodb+srv://username:<password>@<cluster>/<database>?retryWrites=true&w=majority";
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }
  )
  .then(() => console.log("MongoDB has been connected"))
  .catch((err) => console.log(err));

不过，您可能需要考虑在.env文件中定义该字符串，该文件将被忽略.gitignore。这意味着该.env文件将不会被推送到 GitHub。为此，请完成以下步骤：

1. 运行以下命令安装 dotenv 依赖项，它将从.env文件加载环境变量到process.env.
   

   
       $ npm install dotenv
   
   

2. .env在根文件夹中创建一个文件并定义您的连接字符串。
   .env：
   

   
       MONGODB_CONNECTION_STRING = "mongodb+srv://username:<password>@<cluster>/<database>?retryWrites=true&w=majority",
   
   

3. .gitignore在项目根目录中创建一个文件并包含该.env文件。
   .gitignore：
   

   
       # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
       .env
   
   

4. 现在，您可以从任何地方访问文件中定义的变量.env。因此，长字符串将被替换，server.js如下所示。

   server.js：
   

       require("dotenv").config()
   
       mongoose
        .connect(
            process.env.MONGODB_CONNECTION_STRING,
                {
                  useNewUrlParser: true,
                  useUnifiedTopology: true,
                }
        )
        .then(() => console.log("MongoDB has been connected"))
        .catch((err) => console.log(err));
   
   

生产构建

现在我们可以在终端中运行以下命令来创建可供使用的生产版本。

$ cd client
$ npm run build

结果，客户端文件夹中将创建一个名为 build 的新文件夹。该文件夹包含一个静态文件夹和一个index.html.

在下一步中，我们将使用路径模块，它提供处理文件和目录路径的实用程序。

现在，我们将在中包含以下几行server.js。

server.js

// Accessing the path module
const path = require("path");

// Step 1:
app.use(express.static(path.resolve(__dirname, "./client/build")));
// Step 2:
app.get("*", function (request, response) {
  response.sendFile(path.resolve(__dirname, "./client/build", "index.html"));
});

步骤 1 将客户端构建文件夹导入到服务器。

第 2 步将确保 React Router 定义的路由在应用程序部署后能够正常工作。它通过将请求重定向到 来处理所有请求index.html。

在这个阶段，我们的server.js应该是这样的：

server.js：

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
require("dotenv").config();

const cors = require("cors");

const app = express();
app.use(cors());

//import your models
require("./models/quote");

mongoose
  .connect(
    process.env.MONGODB_CONNECTION_STRING,
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }
  )
  .then(() => console.log("MongoDB has been connected"))
  .catch((err) => console.log(err));

//middleware
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

//import routes
require("./routes/quoteRoute.js")(app);

const PORT = process.env.PORT || 5000;

// Accessing the path module
const path = require("path");

// Step 1:
app.use(express.static(path.resolve(__dirname, "./client/build")));
// Step 2:
app.get("*", function (request, response) {
  response.sendFile(path.resolve(__dirname, "./client/build", "index.html"));
});

app.listen(PORT, () => {
  console.log(`server running on port ${PORT}`);
});

修改package.json

Heroku 将使用package.json 文件安装所有依赖项列出的模块。需要注意的是，当 NODE_ENV 环境变量设置为 时production，npm 将不会安装 中列出的模块 devDependencies。

现在，在您的package.json.

{
    ...
    "scripts": {
        ...
        "build": "cd client && npm run build",
        "install-client": "cd client && npm install",
        "heroku-postbuild": "npm run install-client && npm run build",
        "server": "nodemon server.js",
        "develop": "concurrently --kill-others-on-fail \"npm run server\" \"npm run start --prefix client\"",
        "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run start --prefix client\""
    },
    ...

}

Heroku 完成部署过程后，将立即运行“heroku-postbuild”。
注意：您可能需要"server": "nodemon server.js",根据 的位置sever.js和您指定的名称进行修改。在本例中，server.js与 处于同一级别package.json。

创建 Procfile

这将是 Heroku 运行的第一个文件。在项目根目录中创建一个文件并将其命名为Procfile。在其中复制以下代码：

web:npm start

部署到 Heroku

在本节中，我们将使用终端进行操作。首先，转到根文件夹并创建一个新的应用程序。

$ cd your-project
$ heroku create app-name
Creating ⬢ app-name... done
https://app-name.herokuapp.com/ | https://git.heroku.com/app-name.git

您的应用程序将部署到显示的 URL 中。您需要使用以下命令推送任何新的开发。

$ git add . 
$ git commit -am "commit message"
$ git push heroku main

设置环境变量

前往 Heroku 在线仪表板。您将看到已构建的所有应用程序的列表。然后，导航到页面顶部的“设置”选项卡。向下滚动找到“配置变量”部分。点击“显示配置变量”。您需要确保已添加以下变量：

1. 您的 Mongo 连接字符串。键值MONGODB_CONNECTION_STRING对（此处原文有误，无法翻译）可能会根据您定义此参数的方式而有所不同。值是您的连接字符串（不包括引号）。您可以.env直接从文件中复制它。
2. Node 环境。键为NODE_ENV，值是production。
3. PORT。键为PORT，值（在我的情况下）为5000。

其他有用的命令

在推送到 Heroku 之前，还可以通过运行以下命令在本地检查应用程序。

$ heroku local

另一个有用的命令可以让您深入了解应用程序的行为并调试任何问题：

$ heroku logs --tail

打开应用程序：

$ heroku open

现在您的应用程序已经托管并准备展示！

如果您想了解有关我的编码之旅的更多信息，或者只是想聊天，请务必在 Twitter 上关注我@HawaCodes 💙 或访问我的作品集。