8 个免费的 React 应用托管服务1 min read

因此，您构建了一个 React 应用程序，但您不确定如何或在哪里托管它。在本文中，我们将引导您了解 8 个免费的 React 托管服务，并向您展示我们如何部署 这个React应用程序 使用每一个，并告诉你我们在这个过程中学到了什么。

我们使用 Figma 构建了我们的应用程序 Anima 插件，它允许我们添加功能、响应行为和富媒体，然后 为整个 UI 导出开发就绪的 React 代码。我们花了一天的时间来设计和部署。

在哪里免费托管您的 React 应用程序

由于 React 等基于组件的框架的兴起，无服务器托管解决方案的数量不断增加。亚马逊AWS、微软Azure和谷歌云是目前的主导平台。然而，人们越来越多地转向专用前端托管服务，这些服务需要更少的精力，并且可以让您立即启动并运行，并且大多数包括 CI/CD。以下是我们测试的 8 个免费 React 应用托管服务：

1. 网络化

2. Vercel

3. AWS 放大

4. 火力基地

5. GitHub 页面

6. 亚搏体育appGitLab页面

7. 渲染

8. 浪涌

让我们更详细地了解这些免费的 React 应用程序托管服务，并演示我们如何使用每一项服务部署 React 应用程序。 

网络化

背景

Netlify 成立于 2014 年，从一开始就专注于托管静态网站。由于其慷慨的免费套餐，它吸引了很多开发人员。几年后，Netlify 成长为最受欢迎的 JAMstack 和静态网站主机之一。

如何使用

1. 理想情况下，您将使用 GitHub 注册或登录。这确保您可以访问您的配置文件上的存储库并快速部署它们。
2. 登录后，单击“添加新站点”并选择“导入现有项目”。
3. 然后单击 GitHub 作为您的提供商。
4. 选择“银行网站”或任何您的项目名称。
5. 微调部署设置（对于我们的网站，默认设置完美运行），然后单击“部署站点”。
6. 部署后，您可以在公共 URL 上查看它，并与世界分享。耶！

这是 部署在 Netlify 上的实时应用程序。

优点和缺点

Netlify 易于设置和部署，更不用说它是我们在这里测试的最快的服务之一。一个缺点是，如果您需要协作者和/或团队，则必须升级到付费计划。

Vercel

背景

Vercel（原名Zeit）成立于2015年，并迅速声名鹊起。他们是 Next.js 的维护者，Next.js 是一个流行的 React 网站构建框架。他们为非商业网站提供免费套餐，以及使用其边缘网络实现无服务器功能的方法。

如何使用

1. 登录或注册 GitHub。
2. 单击“添加新…”下拉列表并选择“项目”。                                                             
3. 选择“银行网站”或您最喜欢的 React 项目。
4. 我们使用部署设置的默认值，然后单击“部署”。
5. 一段时间后，我们部署了网站。

这是 现场URL。

优点和缺点

Vercel需要一些时间来缓存部署过程的安装部分，但在此之后，它是最快的服务之一。它显示了您推送的每个分支的预览部署，并且由于缓存，它可以快速完成。

AWS 放大

背景

AWS 是云产品的一个巨大集合，Amplify 被宣传为获取其中一些产品的简单方法。借助 AWS Amplify，您可以在 AWS 上快速构建、交付和托管全栈应用程序，并随着用例的发展灵活地利用 AWS 服务的广度。

如何使用

1. 注册或登录 AWS，然后搜索 AWS Amplify 并单击“开始”。
2. 选择 GitHub 并授权它（我只允许它用于“bank-website”存储库）。
3. 在“最近更新的存储库”部分中选择存储库。
   1. 在构建设置中，我们必须更改 基目录 让我们的应用程序成为 距离 像这样： 然后，构建设置应如下所示：
4. 在下一步中，单击“保存并部署”。
5. 一段时间后，网站将被部署并可供使用。

我们正在直播！ 这是 URL。

优点和缺点

您必须编辑 基目录 在部署规范中——它不是开箱即用的。用户界面感觉有点笨拙，但这是个人喜好。 AWS Amplify 拥有巨大的潜力，因为许多其他 AWS Web 服务都触手可及。

火力基地

背景

Firebase 是一项 Google 服务，以实时存储平台而闻名。但它还提供静态网站和 Express.js 微服务或 API 的托管选项，并支持您团队正在处理的分支的预览 URL。与 Netlify、Vercel 等一样，它通过 CDN 网络提供已部署的内容。

如何使用

1. 安装 firebase-工具 与 npm 安装-g firebase-tools.
2. 使用以下命令登录 Firebase 火力基地登录。登录后，您应该会看到如下消息：
3. 进入项目目录并运行 firebase初始化，您应该看到类似这样的内容： 选择用于通过可选的 GitHub 操作部署来配置 Firebase 托管文件的选项。然后，您可以直接从 CLI 创建项目或使用 Firebase UI 来创建项目，然后再连接它。我们从命令行创建了项目，这就是我们回答所产生的问题的方式：                                                                    之后，将创建简单的 `firebase.json` 和 `.firebaserc` 文件。
4. 然后，运行 火力基地部署 实际部署文件 距离目录。如果目录丢失，请确保运行 npm 运行构建 首先生成文件。的 火力基地部署 命令应生成类似于以下示例的输出：

现在你可以 查看网站 在提供的URL上。耶！ 

优点和缺点

Firebase 相当简单，但是当您在项目中设置它时，需要回答的问题有点令人困惑。幸运的是，我们在上面的部分中为您解答了这些问题，但在继续之前，它们需要了解实际的 Firebase 功能。除此之外，Firebase 部署速度很快，并且可以生成 URL，您可以在其中预览已部署的文件。您还可以通过 CLI 的 GitHub 操作部署轻松实现自动化，这很简洁。

GitHub 页面

背景

GitHub Pages 已经存在相当长一段时间了，它是直接从 GitHub 发布文档或个人网站的简单方法。它非常适合静态内容，很多人用它来以最少的投资部署简单的网站。如果您的项目是公开的，它可以免费使用，并且是一种快速且廉价的托管网站的方式。

如何使用

请注意，您必须编辑 应用程序.jsx 我们打电话的地方 路由器 并添加 基本名称 使其匹配存储库名称。所以这就是如何 应用程序.jsx 应该看起来：                                                                                        我们必须改变 基本名称 因为 GitHub 页面会将网站部署到“https://GITHUB_USERNAME.gitlab.io/REPO_NAME”形式的 URL。如果没有设置基本名称，该网站将无法正常运行 反应路由器 DOM.

1. 代码修改后，我们需要安装 gh-页面 包装内含：
2. 并且，添加一个 预部署 和一个 部署 脚本到 包.json:
3. 然后，我们只需运行 npm 运行部署。将会触发 npm 运行构建 它将使用 gh-页面 发布内容 距离 到 GitHub 上的一个单独的分支，称为 gh-页面.
4. 最后检查是否 gh-页面 用于 GitHub 页面，如下所示：

这是 现场URL。

优点和缺点

如果您部署的项目与您的用户名不同，它将使用 GitHub 部署在我们免费域的子目录中。然后，您需要编写额外的代码来支持子目录内部的逻辑。

在我们的用例中，它不支持开箱即用的持续部署，但您可以进行设置。设置完成后，可以快速部署更改。

亚搏体育appGitLab页面

背景

与 GitHub 一样，GitLab 有自己的托管解决方案，他们称之为 GitLab Pages。我必须告诉他们，设置持续部署到 GitLab Pages 比 GitHub Pages 更容易。

如何使用

1. 注册或登录 GitLab
2. 如果您还没有存储库，请将其添加到 GitLab。你可以 分叉我在那里添加的那个 
   与 GitHub 页面类似，您必须编辑 应用程序.jsx 我们打电话的地方 路由器 并添加  基本名称 使其匹配存储库名称。所以这是最后的改变：                                                               我们必须改变 基本名称 因为 GitLab 页面会将网站部署到以下形式的 URL： https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME。如果没有设置基本名称，该网站将无法正常运行 反应路由器 DOM.
3. 编辑项目并将其推送到 GitLab 后，转到“设置”>“页面”，您将看到一个四步向导，用于将存储库部署到 GitLab 页面。 
4. 向导的第一步是输入构建映像。我们将使用 Node.js LTS。
5. 接下来，我们将输入预构建命令。这 国家管理委员会 这里就足够了。
6. 现在进行构建步骤。我们需要通过 — –dist-dir 公共 因为 GitLab Pages 希望将网站构建在 公开的 目录。抱歉，您无法摆脱任何其他目录。
7. 提交新生成的 .gitlab-ci.yml 告诉 GitLab 如何部署您的网站的文件。
8. 现在，转到存储库的 CI/CD -> Pipelines 部分并观察新添加的管道的执行情况。
9. 一段时间后，管道作业将完成，网站将部署在 GitLab Pages 上。

这是 结果。

优点和缺点

软件包安装速度很慢，您需要添加额外的代码才能使其正常工作，但向导非常直观，只需四个步骤即可部署。

渲染

背景

Render 是 2019 年推出的新产品。它试图颠覆人们部署服务（包括静态网站）的方式。到目前为止，他们做得很好，而且数量还在增长。

如何使用

1. 注册或登录 Render。
2. 通过按“新建”按钮并选择“静态站点”来创建新的静态网站。
3. 选择您要部署的存储库。
4. 保留 纱;纱线结构 构建设置中的构建命令。不幸的是，它不能与 npm ci； npm 运行构建 就像其他服务一样。将“发布目录”更改为 距离 并单击“创建静态站点”。
5. 一段时间后，Render 将部署代码。

这是 来自 Render 的实时 URL。

优点和缺点

它确实很快，但对于我们使用“npm ci”和“npm run build”命令的项目来说效果不佳。似乎只有“yarn”有效。

浪涌

背景

Surge 已经存在了一段时间了。最重要的是，他们的服务使用起来很简单，只需要一两个命令即可部署您的静态网站。它是免费的，但提供每月 30 美元的付费计划。该工具的坚忍精神使其熠熠生辉。不需要复杂的设置，只需安装“surge”并使用“surge”运行即可。

如何使用

1. 准备，运行 npm 运行构建 里面生成静态文件 距离 目录。的 激增 将使用它们进行部署。
2. 运行 npm install –全局激增
3. 然后，运行 激增.

有几点需要注意：
如果这是您第一次运行它，您必须创建一个 Surge 帐户。别担心，这很容易。只需输入您的电子邮件和所需的密码。

然后，系统会要求您输入“project”，这应该是项目的路径 距离 目录。您只需附加即可 距离 如果您在正在部署的存储库中运行 Surge，则转到您给出的路径。

然后，输入您网站的未来URL。尝试一些独特的东西，因为什么 激增 提供的对我不起作用。

URL 输入后， 激增 将部署来自的内容 距离 转移到指定的URL。这是我得到的：

优点和缺点

它快速而简单，不需要您采用单独的界面，但它无法为您的应用程序建议可用的 URL。

部署每个托管服务的时间

我们的 3 项免费 React 托管服务

1. 网络化
2. Vercel
3. 浪涌

要点

在测试了这些免费的 React 应用程序托管服务之后，我们认为 Netlify 是其中最好的。它提供快速部署以及您可能需要的许多功能。紧随其后的是 Vercel，它具有很多功能，并且在初始部署后相当快。然后，我们有 Surge，这是一个最小的部署工具，如果您决定升级，它的价格会相当便宜。

自动化您的前端构建并将您的应用程序交付速度提高 10 倍。 了解更多.