如何将 React 应用程序部署到 Heroku？

React是一个非常流行和广泛使用的用于构建用户界面的库。因此，如果您正在考虑将 React 应用程序部署到云平台，有多种选择，例如AWS EC2或Heroku 。但是对于测试你的 React 应用程序，Heroku 将是最好的选择，因为它是免费的并且非常容易上手。

先决条件：

1. 安装了 Node.js和npm 。
   • 在 Windows 上安装 Node.js
   • 在 Linux 上安装 Node.js
2. 关于GitHub的知识。
3. 关于Heroku的基础知识。
4. 已经创建了一个 React 应用程序。

注意：确保下面显示的所有命令只能在您的项目文件夹中运行。

第 1 步：通过运行以下命令在系统中安装Heroku CLI。它会将Heroku CLI 的更新版本安装到您的系统中。

curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

要检查版本，您可以运行命令。

heroku -v 

第 2 步：现在，访问 https://www.heroku.com/ 并注册。完成注册后，转到仪表板并创建一个名为“ myherokuapp ”或您选择的名称的新应用程序。

第 3 步：运行以下命令，它会提示您输入任何密钥以继续，它将在您的浏览器中打开一个新选项卡，要求您登录到您的Heroku帐户。输入所需的凭据并登录该站点后，它将在您的终端中显示“登录”

heroku login

第 4 步：通过运行以下命令初始化 Git 存储库。确保您位于项目目录的顶层。

git init

第 5 步：现在，只需运行您将在Heroku 仪表板 -> myherokuapp 或您的应用名称 -> 部署部分中找到的命令，即可添加 Heroku 远程

要么

只需运行以下命令。部署方法应该选择为 GitHub。

heroku git:remote -a myherokuapp

第 6 步：现在最重要的部分，即 Heroku 为基于 Node.js 的Python应用程序提供buildpack ，但它不为 React 应用程序提供buildpack 。所以我们必须在 Heroku 应用的设置部分添加一个额外的buildpack 。

https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz

第 7 步：现在运行以下命令将您的项目推送到存储库。

git add.
git commit -m "First Commit"
git push heroku master

第 8 步：成功将您的 React 应用程序推送到 Heroku 存储库。现在终于看到您部署的应用程序，运行以下命令。

最后， Web 应用程序将部署在https://myherokuapp.herokuapp.com/

注意：它会将您部署的应用程序打开到您的浏览器。如果有任何问题，例如您的 React 应用程序没有显示，那么您可以运行以下命令来检查日志中出了什么问题。考虑一件事，在部署之前尝试从您的应用程序中删除所有警告，因为 heroku 将所有警告视为错误。

heroku logs --tail