如何免费部署Reaction应用程序

2020-08-18 12:41:49

现在是您将应用程序从开发阶段转移到生产阶段的时候了。部署基于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商店中的所有操作和状态。