最好的免费＃部署您的React应用程序：8个免费托管服务要考虑
#javascript #react #开源 #github

Idurar是基于Mern Stack（Node.js / Express.js / Mongodb / react.js）的开源ERP / CRM（发票 /库存 / ACCEATING / HR），带有ANT设计（ANTD）和REDUX
github存储库：https://github.com/idurar/idurar-erp-crm

Image description

介绍

因此，您已经构建了令人印象深刻的React应用程序，现在您准备将其从开发中摆脱困境并进行生产。但是，您如何完全部署React应用程序并免费托管它呢？在本综合指南中，我们将探索八种不同的托管服务，为托管React应用程序提供免费选项。无论您是初学者还是经验丰富的开发人员，本文都会为您提供必要的信息，以选择适合您的React项目的托管服务。

目录

  1. Vercel

  2. Netlify

  3. AWS Amplify

  4. Firebase

  5. GitHub Pages

  6. GitLab Pages

  7. Render

  8. Surge

动词

Vercel是一种专门为React，Angular，Vue和其他JavaScript库设计的革命性无服务器部署服务。 Vercel与Gitlab和Bitbucket的无缝集成，使您可以轻松地导入React Projects并仅单击几下部署它们。

要开始使用Vercel，请创建一个新帐户或使用现有凭据登录。登录后，您将受到Vercel仪表板的欢迎，您可以在其中管理项目和部署。

使用Vercel仪表板部署

要使用Vercel仪表板部署React应用程序，请按照以下步骤：

1.单击仪表板上的导入项目按钮。

  1. 选择您喜欢的Git存储库平台，例如GitHub，Gitlab或Bitbucket。

  2. 使用您选择的平台对Vercel进行身份验证并授予必要的权限。

  3. 选择包含您的React应用程序的存储库。

  4. 配置部署设置，例如构建命令和输出目录。

  5. 单击部署按钮开始部署过程。

Vercel将自动检测您的React应用程序是否使用Create React App（CRA）初始化了您的React应用程序，并选择适当的配置进行部署。如果您使用的是其他设置，则可能需要在部署过程中提供其他配置详细信息。

使用Vercel CLI部署

如果您喜欢使用命令行接口（CLI），Vercel还提供了功能强大的CLI工具，使您可以轻松部署React应用程序。这是您可以使用Vercel CLI部署React应用程序的方式：

  1. 通过在您的终端中运行以下命令来安装Vercel CLI： 
npm install -g vercel

  1. 导航到您的React应用程序的根目录。

  2. 运行以下命令以部署您的应用：

vercel

CLI将提示您登录或注册，如果您还没有。登录后，部署过程将开始，您将获得一个唯一的URL，将托管React应用程序。

Netlify

Netlify是另一种流行的托管服务，专门用于托管静态网站，使其成为部署React应用程序的绝佳选择。 Netlify凭借其慷慨的免费层和与GIT平台的无缝集成，提供了一个用户友好的界面，用于部署和管理您的React项目。

使用Netlify仪表板部署

要使用NetLify仪表板部署您的React应用程序，请按照以下步骤：

  1. 登录使用您的github帐户的NetLify或如果您没有一个帐户，则创建一个新帐户。

  2. 登录后，单击仪表板上的git按钮的新站点。

  3. 选择您喜欢的Git存储库平台，例如GitHub，Gitlab或Bitbucket。

  4. 使用您选择的平台进行验证并授予必要的权限。

  5. 选择包含您的React应用程序的存储库。

  6. 配置部署设置，例如构建命令和发布目录。

  7. 单击部署站点按钮开始部署过程。

NetLify将自动检测您的React应用程序，并使用指定的构建命令来构建它。构建过程完成后，您的React应用程序将通过Netlify提供的唯一URL部署和访问。

使用Netlify CLI部署

如果您喜欢使用命令行接口，则NetLify提供了一个CLI工具，可让您轻松部署React应用程序。这是您可以使用Netlify CLI部署React应用程序的方式：

  1. 通过在终端中运行以下命令来安装NetLify CLI： 
npm install -g netlify-cli

  1. 导航到您的React应用程序的根目录。

  2. 运行以下命令登录到NetLify：

netlify login

此命令将打开一个浏览器窗口，您可以在其中使用NetLify帐户进行身份验证。

  1. 登录后，运行以下命令以部署您的应用： 
netlify deploy

CLI将提示您选择部署选项，例如构建命令和发布目录。选择选择后，部署过程将开始，您将获得一个唯一的URL，将托管React应用程序。

AWS放大

AWS Amplify是亚马逊Web服务（AWS）提供的全面云开发平台。它提供了广泛的服务和工具，用于构建，部署和托管React应用程序。虽然AWS Amplify提供了免费的层，但重要的是要注意，某些功能和服务可能会产生额外的费用。

使用放大控制台部署

Amplify Console是一个基于Web的接口，可让您在AWS上部署和管理React应用程序。要使用Amplify控制台部署React应用程序，请按照以下步骤：

  1. 登录AWS管理控制台并导航到Amplify服务。

  2. 单击“放大控制台”中的“启动”按钮。

  3. 连接您首选的Git存储库平台，例如GitHub，Gitlab或Bitbucket。

  4. 使用您选择的平台进行身份验证AWS放大并授予必要的权限。

  5. 选择包含您的React应用程序的存储库。

  6. 配置部署设置，例如构建命令和输出目录。

  7. 单击部署按钮开始部署过程。

AWS Amplify将根据指定的配置自动构建和部署您的React应用程序。部署完成后，将为您提供一个唯一的URL，将托管React应用程序。

使用放大CLI部署

如果您喜欢使用命令行接口，则AWS Amplify提供了一个强大的CLI工具，可轻松部署React应用程序。这是您可以使用Amplifie CLI部署React应用程序的方式：

  1. 通过在终端中运行以下命令来安装放大CLI： 
npm install -g @aws-amplify/cli

  1. 导航到您的React应用程序的根目录。

  2. 运行以下命令以初始化AWS放大：

amplify init

CLI将指导您完成初始化过程，在此过程中，您将配置项目设置并连接GIT存储库。

  1. 一旦初始化完成，请运行以下命令来部署您的应用： 
amplify publish

CLI将根据指定的配置构建和部署您的React应用程序。部署完成后，将为您提供一个唯一的URL，将托管React应用程序。

火基

Firebase是一个由Google提供的综合开发平台。它提供了广泛的服务和工具，用于构建，部署和托管Web应用程序，包括React应用程序。 Firebase提供了一个免费的层，可让您免费部署和托管React应用程序，并可以选择升级其他功能和使用限制。

使用Firebase控制台部署

Firebase控制台是一个基于Web的接口，可让您在Firebase上部署和管理React应用程序。要使用Firebase控制台部署您的React应用程序，请执行以下步骤：

  1. 使用您的Google帐户登录Firebase控制台，或者如果没有一个帐户，则创建一个新帐户。

  2. 通过单击“添加项目”按钮创建一个新的火箱项目。

  3. 为您的项目提供名称，然后选择您首选的firebase项目设置。

  4. 创建了项目后，单击左侧栏中的“主机”选项卡。

  5. 单击“启动”按钮为您的项目设置Firebase托管。

  6. 按照提供的说明安装Firebase CLI并初始化您的项目。

  7. 初始化项目后，在终端中运行以下命令以部署应用程序：

firebase deploy --only hosting

Firebase将根据指定的配置构建和部署您的React应用程序。部署完成后，将为您提供一个唯一的URL，将托管React应用程序。

使用Firebase CLI部署

如果您喜欢使用命令行接口，则Firebase提供了一个CLI工具，使您可以轻松部署React应用程序。这是您可以使用Firebase CLI部署React应用程序的方式：

  1. 通过在终端中运行以下命令来安装firebase CLI： 
npm install -g firebase-tools

  1. 导航到您的React应用程序的根目录。

  2. 运行以下命令以初始化firebase：

firebase init

CLI将指导您完成初始化过程，在此过程中，您将配置您的项目设置并连接Firebase Project。

  1. 一旦初始化完成，请运行以下命令来部署您的应用： 
firebase deploy --only hosting

CLI将根据指定的配置构建和部署您的React应用程序。部署完成后，将为您提供一个唯一的URL，将托管React应用程序。

github页面

github页面是GitHub提供的托管服务，允许您免费托管静态网站。这是部署React应用程序的绝佳选择，尤其是如果您的项目已经在Github上托管时。 GitHub页面易于设置，并提供了一个简单明了的过程来部署您的React应用程序。

使用github页面设置部署

要使用github页面部署您的React应用程序，请按照以下步骤：

  1. 登录到GitHub并导航到包含您的React应用程序的存储库。

  2. 单击存储库顶部的“设置”选项卡。

  3. 向下滚动到GitHub页面部分。

  4. 在源下拉列表中，选择包含您的React应用程序构建文件的分支。

  5. 单击“保存”按钮以保存更改。

github页面将自动检测所选分支中的构建文件并部署您的React应用程序。部署完成后，将为您提供一个唯一的URL，将托管React应用程序。

使用github操作工作流程部署

如果您喜欢更自动的部署过程，则可以使用GitHub操作将React应用程序部署到GitHub页面。这是您可以设置GitHub操作工作流程以部署React应用程序的方法：

  1. 在您的存储库的.github/workflows目录中创建一个新文件，例如deploy.yml。

  2. 将以下代码添加到deploy.yml文件：

名称：部署到github页面

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14

      - name: Install dependencies
        run: npm ci

      - name: Build and deploy
        run: |
          npm run build
          npx gh-pages -d build
  1. 提交并将更改推向您的存储库。

github操作将在将更改推向指定分支时自动触发部署工作流程。工作流将构建您的React应用程序并将其部署到GitHub页面，从而可以通过唯一的URL访问。

Gitlab页面

gitlab页面是GitLab提供的托管服务，可让您免费托管静态网站。如果您的React项目托管在GitLab上，GitLab页面提供了一种简单而无缝的方式来部署您的React应用程序。 GitLab页面支持静态和动态网站，使其成为托管React应用程序的多功能选项。

使用gitlab ci/cd管道部署

要使用gitlab页面部署您的React应用程序，请按照以下步骤：

  1. 登录到gitlab并导航到包含您的React应用程序的存储库。

  2. 单击存储库顶部的CI/CD选项卡。

  3. 向下滚动到管道部分。

  4. 单击新的管道按钮以触发新管道。

  5. gitlab将自动检测存储库中的配置文件，例如.gitlab-ci.yml，并使用它来构建和部署您的React应用程序。

GitLab将根据指定的配置自动构建和部署您的React应用程序。部署完成后，将为您提供一个唯一的URL，将托管React应用程序。

使成为

渲染是一项托管服务，为托管静态网站提供免费级别，使其成为部署React应用程序的合适选择。渲染提供了一个用户友好的界面和与GIT平台的无缝集成，使您可以轻松部署和管理React Projects。

使用渲染仪表板部署

要使用渲染仪表板部署您的React应用程序，请按照以下步骤：

  1. 登录使用您的github帐户渲染或创建一个新帐户。

  2. 登录后，单击仪表板上的创建新按钮。

  3. 选择您喜欢的Git存储库平台，例如GitHub，Gitlab或Bitbucket。

  4. 使用您选择的平台进行身份验证并授予必要的权限。

  5. 选择包含您的React应用程序的存储库。

  6. 配置部署设置，例如构建命令和输出目录。

  7. 单击创建Web服务按钮以开始部署过程。

渲染将自动检测您的React应用程序，并根据指定的配置构建它。构建过程完成后，您的React应用程序将通过渲染提供的唯一URL部署和访问。

涌

Surge是一项简单明了的托管服务，可轻松地部署包括React应用程序在内的静态网站。 Suger提供免费的层，使您可以免费部署和托管React应用程序，并可以选择升级其他功能和使用限制。

使用电涌CLI部署

要使用电涌CLI部署您的React应用程序，请执行以下步骤：

  1. 通过在您的终端中运行以下命令来安装电涌CLI： 
npm install -g surge

  1. 导航到您的React应用程序的根目录。

  2. 运行以下命令以部署您的应用：

surge

CLI将提示您登录或创建一个新帐户，如果您还没有。登录后，部署过程将开始，并提示您提供一个唯一的URL，其中将托管React应用程序。

结论

在本文中，我们探索了八个不同的托管服务，这些服务为托管React应用程序提供了免费选项。每个托管服务都有自己的独特功能和优势，因此选择最适合您项目要求的服务很重要。无论您选择Vercel，Netlify，AWS Amplify，Firebase，GitHub页面，Gitlab页面，渲染或涌现，您都可以放心，您的React应用程序将以可靠，有效的方式部署和托管。

记住，部署您的React应用程序只是第一步。定期更新和维护您已部署的应用程序以确保最佳性能和安全性很重要。借助正确的托管服务和适当的维护，您的React应用程序可以吸引更多的受众，并对数字世界产生持久影响。因此，请继续选择适合您需求的托管服务，并让您的React应用Shine！