如何免费部署Reaction应用程序

现在是您将应用程序从开发阶段转移到生产阶段的时候了。部署基于React、Vue或ANGLE等框架构建的应用程序的过程与部署使用HTML、CSS和JavaScript构建的站点的过程有很大不同。

在本教程中，我们将演示如何以八种不同的方式部署Reaction应用程序。这篇文章中描述的所有服务都是完全免费的，没有隐藏的信用卡要求。

Vercel(前身为Zeit)是一项革命性的无服务器部署服务，专为Reaction、ANGLING、VUE、Express等设计。您可以使用Vercel轻松地从GitLab或Bitbucket导入项目。自动SSL是它提供的众多酷功能之一。

成功登录后，将出现仪表板屏幕。您可以使用此控制面板或Vercel CLI从终端进行部署。我们将更详细地讨论这两种方法。

要使用Vercel仪表板进行部署，请集成GitHub、GitLab或Bitbucket，无论您的Reaction应用程序存储在哪里。在面板上单击“导入项目”。

您可以选择从Git存储库中导入项目，也可以选择使用模板，这是Vercel的另一个出色特性。

您可能已经集成了GitHub、GitLab或Bitbucket；出于本教程的目的，我们假定您使用的是GitHub。无论如何，您都可以选择从GitHub、GitLab或Bitbucket导入项目。

单击“从GitHub导入项目”。如果这是您第一次使用Vercel，您将看到这样的屏幕。

单击“立即为GitHub安装”。系统将提示您安装Vercel for GitHub。保存GitHub的设置，导航回导入Git页面，您将看到GitHub现在已连接。单击“从GitHub导入项目”。

系统将提示您选择要部署的项目。选择Reaction项目并单击“导入”。接下来，系统将提示您写入项目名称。将其保留为默认值，然后单击“继续”。当询问根目录时，相应地选择并单击“继续”。

这一步很重要。如果您已经使用Create-Reaction-app初始化了您的Reaction项目，Vercel将自动检测它并自行选择合适的配置。保留默认配置并单击“部署”。

如果您的Reaction应用程序不是使用Create-Reaction-app初始化的，系统会要求您提供配置。以上述配置为例，填写所有配置字段并单击“Deploy”。

现在，您的React应用程序将在几秒钟内部署完毕，并具有两到三个预览链接。

系统将提示您输入您在Vercel上注册的电子邮件。提交后，您将收到一封电子邮件来验证您的登录。

系统将提示您回答几个问题。首先，确认这就是您要部署的项目。

接下来，系统将询问您使用哪个帐户部署此应用程序。它将为您提供一个默认选项；只需按Enter键即可。

在此之后，系统将询问您是否将其链接到现有项目。回答N。

？您要部署到哪个作用域？你的Vercel账户？是否链接到现有项目？[是/否]n。

下一步是命名项目并指定路径。因为我们已经在项目目录中，所以它将与默认选项./相同。

？你的项目叫什么名字？项目名称？您的代码位于哪个目录中？./。

它将自动检测您的项目是否使用create-action-app进行了初始化，并相应地配置设置。否则，它会要求您设置它们。如果要求覆盖设置，请回答否。

自动检测到的项目设置(创建Reaction App)：-build命令：`npm run build`或`act-scripts build`-output Directory：Build-Development Command：Reaction-scripts start？要覆盖设置吗？[是/否]n。

FireBase是一个完整的平台，您可以使用它来开发和扩展您的应用程序。除了托管，它还提供无数其他服务，包括身份验证、云Firestore、云功能等等。

如果您尚未创建帐户，请在Firebase上创建一个帐户，然后创建一个新项目。

全局安装Firebase CLI。通过全局安装，可以更方便地在不同项目中使用。

系统会在终端中提示您一个URL，该URL将在浏览器中打开以进行验证。在授予必要的权限之后，您将看到一条成功登录的消息。

接下来，转到项目根目录并运行以下命令来初始化Firebase项目。

？您要为此文件夹设置哪些Firebase CLI功能？按空格键选择要素，然后按Enter确认您的选择。◯数据库：部署FireBase实时数据库规则◯FiRestore：部署规则并为FiRestore创建索引◯功能：配置和部署云功能❯◯托管：配置和部署FireBase托管站点◯存储：部署云存储安全规则。

当要求您选择与您的应用程序相关联的Firebase项目时，因为您在第一步中已经创建了一个项目，所以请选择Use an Existing Project。否则，您可以选择创建新项目。

=项目设置首先，让我们将此项目目录与Firebase项目相关联。您可以通过运行Firebase use--add创建多个项目别名，但目前我们只设置一个默认项目。？请选择一个选项：(使用箭头键)&>使用现有项目创建新项目将Firebase添加到现有Google Cloud Platform项目不要设置默认项目。

如果您选择创建新项目，系统将要求您提供唯一的项目ID。

最后，将默认公共文件夹更改为创建-反应-应用程序项目的Build。如果您尚未使用create-action-app初始化项目，请选择适当的构建文件夹。

=托管安装您的公共目录是将包含要使用Firebase Deploy上载的托管资产的文件夹(相对于您的项目目录)。如果您的资产有构建过程，请使用您的构建的输出目录。您想使用什么作为您的公共目录？建造？是否配置为单页应用程序(是否将所有URL重写为/index.html)？是。

如果您已经构建了项目，系统将询问您是否覆盖。回答否。

Netlify是目前最流行的web部署服务之一。它可以轻松地从GitHub、GitLab和Bitbucket导入项目，并与JAMstack一起广泛使用。一个很酷的特性是它为每个项目创建了一个随机名称，并且名称非常醒目。

与Vercel一样，您可以选择通过Netlify Dashboard或Netlify CLI部署您的应用程序。

Netlify提供的最酷的功能之一是能够拖放您的站点文件夹，并像魔术一样部署您的应用程序。

对于您的Reaction应用程序，您必须在Netlify Dashboard上拖放Build文件夹。事先运行npm run build以部署最新的构建。

您还可以连接Githu、GitLab或Bitbucket，具体取决于项目的存储位置。

一旦您选择了项目，最后一步是配置，如果项目是使用create-action-app初始化的，Netlify将自动检测该配置。

如果您更喜欢通过终端部署应用程序，以下是使用Netlify CLI执行此操作的步骤。

以下步骤将指导您完成将在终端中遇到的提示。

首先，系统会要求您将此项目链接到站点，因为这是您第一次部署此应用程序。选择创建配置新站点。

那你就会被要求派队来。除非您已经在本地计算机上使用Netlify，否则您很可能只会看到一个带有您的名称的选项，即选择它。

下一个提示是站点名称。这是一个可选字段，如下所示。如果您已经有了一个名称，请键入该名称，然后按Enter键。如果您将此字段留空，Netlify将为此站点指定一个随机名称，您可以稍后更改该名称。

选择唯一的站点名称(例如netlify-Think-lelouchB-is-Great.netlify.app)或将其留空以随机命名。您可以稍后更新站点名称。？站点名称(可选)：

在此步骤之后，您的站点将被创建，系统将要求您提供发布目录。在此处键入build。

这样，您的站点就会被发布，并且会为您提供一个URL草稿。

正在部署到草稿url...prod已完成对19个文件的哈希处理✔cdn请求10个文件✔已完成上传10个资产✔草稿部署IS live！Logs:https://app.netlify.com/sites/serene-fermi-6d50a8/deploys/5f1194c3b903cadb238eabb4网站草稿url：https://5f1194c3b903cadb238eabb4--serene-fermi-6d50a8.netlify.appIf您的草稿url上看起来一切正常，使用--✔标志将其部署到您的主站点url。netlify✔✔--✔。

转到此草稿URL。如果一切正常，您可以将网站部署到主站点URL。

它将最后一次询问发布目录。键入build并按Enter键。您将获得两个URL。

这两个URL之间的不同之处在于，唯一的部署URL指向应用程序的特定版本。例如，如果您在应用程序中进行更改并再次部署，您将获得另一个特定于该更改的唯一部署URL。您的网站URL是主URL，它与您的应用程序的最新版本相对应。

如果您的应用程序使用路由器(如Reaction Router)，则可能会遇到404错误。

在Build文件夹中，创建一个名为_redirects的新文件，并向其中添加以下内容。

您需要重新部署您的应用程序。这个问题发布到Netlify社区可能会有所帮助。

GitHub页面是初学者部署网站最快、使用最广泛的方法之一。它比本指南中描述的许多其他工具更易于维护。通过GitHub操作，您可以触发自动部署、配置CI/CD等。

如果您尚未创建GitHub帐户，请创建一个GitHub帐户，然后为您的应用程序创建一个存储库。

在您的终端中，将本地目录初始化为Git存储库，提交所有更改，然后通过在项目根中运行以下命令将其推送到远程。

Git initgit添加.git Commit-m"；Initial Commit"；Git Remote Add Origin Origin.gitgit Push-u Source Master。

"；脚本"；：{+"；预部署"；："；NPM运行内部版本"；，+"；部署"；：GH-Pages-d内部版本"；，"；开始"；："；反应脚本开始"；，"；："；反应脚本内部版本"；，"；测试"；：&#。REACTION-SCRIPTS测试"；，"；弹出"；："；REACTION-SCRIPTS Eject"；}。

脚本中仅添加了预部署和部署。PreDeploy将在部署之前自动运行，并确保部署了应用程序的最新版本。

此命令将在项目的GitHub存储库中创建一个名为gh-Pages的新分支。您可能需要在存储库的设置中的GitHub Pages选项下将一个源设置为gh-Pages分支。

Heroku是一个云应用平台，自2007年上线以来吸引了大量开发者。原因之一是它支持大多数编程语言，包括Go、Node.js、Clojure等。

像我们到目前为止讨论的大多数其他服务一样，首先在Heroku上创建一个免费帐户。

系统将提示您在浏览器中登录您的帐户。单击“登录”。

我们将使用Heroku Buildpack来创建-反应-应用程序，以实现快速部署。下面是您需要的所有代码；您可以一步完成复制/粘贴和部署。

Git initheroku create-b https://github.com/mars/create-react-app-buildpack.gitgit在Heroku上添加.git Commit-m&34；reaction-create-app&34；git推送Heroku master heroku打开。

这可能是通过终端部署的最快方式，因为yuy不必像其他CLI那样回答任何提示。

转到Heroku仪表板，单击“新建”，然后单击“创建新应用”。

系统将提示您为项目命名。键入您的应用程序名称，然后单击“创建应用程序”。

创建应用程序后，同步您的GitHub存储库。您将在您的应用程序仪表板上看到类似这样的内容。

一旦您成功地将GitHub连接到Heroku，您就可以搜索并部署项目存储库了。

您将有两个选择：手动部署或自动部署。出于本教程的目的，我们将使用手动部署。

单击“手动部署”下的“部署分支”，您的应用程序将在构建过程完成后部署。

Surge是部署前端项目的最快方式之一。与其他CLI相比，它需要的配置要少得多，而且第一次使用时可以直接从终端创建浪涌账户。

要部署项目的最新版本，请在项目根目录中运行以下命令。

在填写任何其他提示之前，最好确认一下您的激增帐户。

在终端中，您将被要求确认您的项目目录。按Enter键。

在激增以支持HTML5 Push State API之前，您可能希望将Build文件夹中的index.html重命名为200.html。

成立于2018年的Disrupt SF 2019年Startup Battlefield的获胜者Render是一个新兴的云平台。

虽然在Render上托管站点是免费的，但您需要为其他服务付费，如数据库、cron作业、Docker容器等。Heroku和Render都属于平台即服务。

如果这是您第一次使用Render，则需要连接您的GitHub或GitLab，无论您的存储库存储在哪里。

连接后，搜索并选择您的项目存储库。在此之后，您需要为您的Web服务指定一个唯一的名称。Render将自动检测您的应用程序是否使用create-action-app引导，并相应地填充配置。

如果您的项目使用诸如REACTION路由器之类的东西，则需要将所有路由请求重定向到index.html。转到您的服务的“重定向/重写”选项卡，添加规则，然后保存更改。

Roast是另一个可以用来部署单页应用程序(SPA)的虚拟主机平台。

它的配置和使用非常简单。烘焙文档清晰明了，简明扼要。

在终端中，您将被要求创建一个新站点。回答是“是”。然后，系统将询问您要部署的路径，该路径将是Build文件夹。

？未指定站点ID，是否创建新站点？要部署的路径是什么？建房

要返回index.html而不是404，请使用以下代码在build中创建_redirects文件。

一旦您添加了此文件，您将需要使用Roast Deploy重新部署您的应用程序。

现在我们已经讨论了部署Reaction的八种不同方法，您应该尝试尽可能多的方法来确定哪种方法最符合您的部署要求。毕竟，它们是免费使用的。

为了更好地完成下一步，请尝试将自定义域添加到已部署的应用程序中。对于有不同方式添加自定义域的项目来说，有一个独特的域是件好事--有些简单，有些相对复杂。

调试Reaction应用程序可能很困难，尤其是当用户遇到难以重现的问题时。如果您对监视和跟踪Redux状态、自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试LogRocket。LogRocket就像网络应用程序的硬盘录像机，可以记录下你的Reaction应用程序上发生的所有事情。您可以聚合和报告问题发生时应用程序所处的状态，而不是猜测问题发生的原因。LogRocket还可以监控应用程序的性能，报告客户端CPU负载、客户端内存使用等指标。

LogRocket Redux中间件包为您的用户会话增加了额外的可见性。LogRocket记录您Redux商店中的所有操作和状态。