简介
当一个开发者创建了一个应用程序,下一步就是与朋友或公众分享它,以便每个人都能访问它。将代码从开发环境转移到托管平台,并将其提供给最终用户,这个过程称为部署。
在像Heroku这样的云托管平台出现之前,托管的效率是相当低的。它主要是由托管供应商完成的,他们要求我们每次做改动时都要上传所有的静态资产(运行npm run build )。除了某种FTP接口(本地接口或托管服务器上的接口)外,没有其他方法来上传静态文件,这可能是相当大的压力和技术。
在本指南中,我们将看看如何通过Heroku Git使用CLI*(命令行界面*)将React应用部署到Heroku。此外,我们还将看看当我们对应用程序做一些改动时,如何重新部署代码。
什么是Heroku,为什么使用它?
Heroku是一个基于容器的云平台,使开发人员能够轻松地部署、管理和扩展现代应用程序。这使开发人员能够专注于他们的核心工作--创建优秀的应用程序,使用户感到高兴和参与。换句话说,Heroku通过使应用程序的部署、扩展和管理尽可能简单,提高了开发人员的生产力。
我们应该使用Heroku的原因有很多。
- 支持多种语言--从一开始,Heroku平台就支持超过8种语言,包括Node、Java和Python。
- 支持多种数据库和数据存储--Heroku使开发者能够根据个人应用的具体要求从各种数据库和数据存储中进行选择--Postgres SQL、MySQL、MongoDB等。
- 成本较低--从长远来看,创建和托管一个静态网站将为我们节省成本。
开始使用
在本指南中,我们将部署一个电影搜索应用,这是一个简单的React应用,可以搜索一个API的电影。在我们开始之前,如果你还没有账户,你应该注册Heroku,因为这就是我们要部署React应用的地方。我们可以去Heroku.com,通过点击右上角的注册按钮进行注册。注册管道几乎是标准的,所以你在Heroku上创建一个账户应该没有任何问题。

当你创建了一个Heroku账户,我们就可以开始实际部署我们的应用程序了。
**注意:以前有一个通过GitHub集成进行部署的选项,但由于安全漏洞,该功能已被取消。到目前为止,部署到Heroku的最好方法是通过Heroku Git,这发生在我们的CLI(命令行界面)。
使用Heroku Git进行部署
Heroku使用Git版本控制系统来管理应用程序的部署。值得注意的是,我们不需要成为Git专家就可以将我们的React应用部署到Heroku,我们需要知道的只是一些基础知识,这些知识将在本指南中介绍。
在我们开始之前
正如Heroku Git这个名字所暗示的,我们将使用Git,这意味着我们需要安装Git。这同样适用于Heroku CLI。如果你没有安装这两样东西,你可以按照下面的说明来指导你完成安装过程。
成功安装后,我们可以继续在Heroku上创建一个应用,稍后我们的React应用将被部署到该应用中。我们可以通过两种方式在Heroku上创建一个应用--通过终端(CLI命令)或在Heroku仪表板上手动创建。
**注意:**一个常见的误解是,Git和GitHub是同一种东西,但它们不是Git是一个版本控制系统,被许多应用程序和服务使用,包括但不限于GitHub。因此,你不需要把你的代码推送到GitHub,也不需要有GitHub账户来使用Heroku。
如何手动创建Heroku应用程序
首先让我们看看如何使用Heroku仪表板创建一个应用程序。第一步是点击创建新的应用程序按钮。

这将使我们重定向到一个页面,在那里我们需要填写关于我们想要创建的应用程序的信息。

**注意:**确保你记住你在Heroku上创建的应用程序的名称,因为我们将很快把我们的本地存储库连接到这个远程存储库。
一旦这个过程完成,我们就可以开始将我们的应用程序从本地环境部署到Heroku。但是,在我们看一下如何部署应用程序之前,让我们考虑一下创建Heroku应用程序的另一种方法--使用Heroku CLI。
如何通过CLI创建Heroku应用
另外,你也可以使用CLI在Heroku上创建一个应用。Heroku确保这一点尽可能简单明了。你唯一需要做的是在你选择的终端中运行以下命令(只要确保用你的应用程序的实际名称替换<app-name> )。
$ heroku create -a <app-name>
**注意:**如果你在应用的根目录下运行这个命令,空的Heroku Git仓库会被自动设置为我们本地仓库的远程仓库。
如何推送代码到Heroku
推送代码到Heroku之前的第一步是将自己定位在应用程序的根目录下(在终端)。然后使用heroku login 命令登录到Heroku仪表板。之后,你需要接受Heroku的条款和条件,最后,使用你的登录凭证登录到Heroku。

之后你将返回到终端,所以你可以继续部署到Heroku的过程。现在,你应该初始化资源库。
$ git init
然后将我们之前在Heroku上创建的应用程序注册为我们在上一步初始化的本地仓库的远程仓库。
$ heroku git:remote -a <app-name>
**注意:**确保用我们之前在Heroku上创建的应用程序的名称替换<app-name> (例如:movies-search-app )。
现在我们可以继续部署我们的应用程序了。但是,由于我们需要部署一个React应用程序,我们首先需要添加React buildpack。
$ heroku buildpacks:set mars/create-react-app
一旦完成,下一步就是实际推送我们的代码到我们在Heroku上创建的远程仓库。第一步是将我们的文件分阶段,提交它们,最后推送到远程仓库。
$ git commit -am "my commit"
$ git push heroku main
**注:**假设我们想把我们的分支从main 切换到development 。我们可以运行以下命令。git checkout -b development.
一旦我们成功推送到Heroku,我们就可以在浏览器中打开我们新部署的应用程序。
$ heroku open

如何更新我们的部署
你可能会有的下一个问题是,在我们对应用程序进行修改之后,如何重新部署它。这与任何基于Git的平台的工作方式类似--我们所要做的就是将文件分阶段,提交,然后将代码推送到Heroku。
$ git commit -am "added changes"
$ git push heroku main
Heroku会自动接收这一变化,并将其应用到实时应用程序中。
总结
Heroku可以成为部署React应用的一个相当有用的工具。在这篇文章中,我们看了如何使用Heroku Git将React应用部署到Heroku。此外,我们还介绍了使用Heroku Git时需要的一些基本的Git命令,最后,我们讨论了在对应用进行修改后如何重新部署。