Logo

菜单

发布于 2026-01-06 5 阅读
0

最佳免费 React 应用部署方案：8 个值得考虑的免费托管服务

最佳免费 React 应用部署方案：8 个值得考虑的免费托管服务

IDURAR 是一款基于 MERN 技术栈（Node.js / Express.js / MongoDB / React.js）的开源 ERP/CRM（发票/库存/会计/人力资源）系统，采用 Ant Design (AntD) 和 Redux。GitHub
代码库：https://github.com/idurar/idurar-erp-crm

图片描述

介绍

你已经构建了一个令人印象深刻的 React 应用，现在准备将其从开发阶段部署到生产环境。但是，究竟该如何部署 React 应用并免费托管呢？在本指南中，我们将探讨八种提供免费 React 应用托管选项的托管服务。无论你是新手还是经验丰富的开发者，本文都将为你提供选择适合 React 项目托管服务的必要信息。

目录

  1. 维塞尔

  2. Netlify

  3. AWS Amplify

  4. Firebase

  5. GitHub Pages

  6. GitLab Pages

  7. 使成为

  8. 涌

维塞尔

Vercel 是一款革命性的无服务器部署服务，专为 React、Angular、Vue 和其他 JavaScript 库而设计。凭借与 GitLab 和 Bitbucket 的无缝集成，Vercel 让您可以轻松导入 React 项目，只需点击几下即可完成部署。

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

使用 Vercel 控制面板进行部署

要使用 Vercel 控制面板部署您的 React 应用程序，请按照以下步骤操作：

1.点击仪表盘上的“导入项目”按钮。

  1. 选择您喜欢的 Git 代码仓库平台，例如 GitHub、GitLab 或 Bitbucket。

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

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

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

  5. 点击“部署”按钮开始部署过程。

Vercel 会自动检测您的 React 应用是否使用 Create React App (CRA) 初始化，并选择合适的部署配置。如果您使用的是其他设置，则可能需要在部署过程中提供额外的配置信息。

使用 Vercel CLI 进行部署

如果您更喜欢使用命令行界面 (CLI)，Vercel 也提供了一个强大的 CLI 工具，让您可以轻松部署 React 应用程序。以下是如何使用 Vercel CLI 部署 React 应用：

  1. 在终端中运行以下命令来安装 Vercel CLI：
npm install -g vercel
Enter fullscreen mode Exit fullscreen mode

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

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

vercel
Enter fullscreen mode Exit fullscreen mode

CLI 会提示您登录或注册（如果您尚未登录）。登录后，部署过程将开始，您将获得一个唯一的 URL，您的 React 应用程序将托管在该 URL 上。

Netlify

Netlify 是另一款热门的托管服务，专注于静态网站托管，因此是部署 React 应用的绝佳选择。凭借其慷慨的免费套餐和与 Git 平台的无缝集成，Netlify 提供了一个用户友好的界面，方便您部署和管理 React 项目。

使用 Netlify 控制面板进行部署

要使用 Netlify 控制面板部署您的 React 应用程序，请按照以下步骤操作：

  1. 使用您的 GitHub 帐户登录 Netlify，如果您还没有帐户，请创建一个新帐户。

  2. 登录后，点击仪表盘上的“从 Git 创建新站点”按钮。

  3. 选择您喜欢的 Git 代码仓库平台，例如 GitHub、GitLab 或 Bitbucket。

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

  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
Enter fullscreen mode Exit fullscreen mode

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

  2. 运行以下命令登录 Netlify：

netlify login
Enter fullscreen mode Exit fullscreen mode

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

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

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

AWS Amplify

AWS Amplify 是亚马逊云服务 (AWS) 提供的综合性云开发平台。它提供一系列服务和工具，用于构建、部署和托管 React 应用程序。虽然 AWS Amplify 提供免费套餐，但需要注意的是，某些功能和服务可能需要额外付费。

使用 Amplify 控制台进行部署

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

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

  2. 点击 Amplify 控制台中的“开始使用”按钮。

  3. 连接您首选的 Git 代码库平台，例如 GitHub、GitLab 或 Bitbucket。

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

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

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

  7. 点击“部署”按钮开始部署过程。

AWS Amplify 将根据您指定的配置自动构建并部署您的 React 应用程序。部署完成后，您将获得一个唯一的 URL，您的 React 应用程序将托管在该 URL 上。

使用 Amplify CLI 进行部署

如果您更喜欢使用命令行界面，AWS Amplify 提供了一个强大的 CLI 工具，让您可以轻松部署 React 应用程序。以下是如何使用 Amplify CLI 部署 React 应用：

  1. 在终端中运行以下命令来安装 Amplify CLI：
npm install -g @aws-amplify/cli
Enter fullscreen mode Exit fullscreen mode

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

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

amplify init
Enter fullscreen mode Exit fullscreen mode

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

  1. 初始化完成后，运行以下命令部署您的应用程序：
amplify publish
Enter fullscreen mode Exit fullscreen mode

CLI 将根据指定的配置构建并部署您的 React 应用程序。部署完成后，您将获得一个唯一的 URL，您的 React 应用程序将托管在该 URL 上。

Firebase

Firebase 是 Google 提供的综合性开发平台。它提供丰富的服务和工具，用于构建、部署和托管 Web 应用程序，包括 React 应用程序。Firebase 提供免费套餐，允许您免费部署和托管 React 应用，并提供升级选项以获得更多功能和使用限制。

使用 Firebase 控制台进行部署

Firebase 控制台是一个基于 Web 的界面，可用于在 Firebase 上部署和管理 React 应用。要使用 Firebase 控制台部署 React 应用，请按照以下步骤操作：

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

  2. 点击“添加项目”按钮，创建一个新的 Firebase 项目。

  3. 为您的项目命名，并选择您喜欢的 Firebase 项目设置。

  4. 项目创建完成后，点击左侧边栏的“托管”选项卡。

  5. 点击“开始使用”按钮，为您的项目设置 Firebase Hosting。

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

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

firebase deploy --only hosting
Enter fullscreen mode Exit fullscreen mode

Firebase 将根据您指定的配置构建并部署您的 React 应用。部署完成后，您将获得一个唯一的 URL，您的 React 应用将托管在该 URL 上。

使用 Firebase CLI 进行部署

如果您更喜欢使用命令行界面，Firebase 提供了一个 CLI 工具，让您可以轻松部署 React 应用。以下是如何使用 Firebase CLI 部署 React 应用：

  1. 在终端中运行以下命令来安装 Firebase CLI：
npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

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

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

firebase init
Enter fullscreen mode Exit fullscreen mode

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

  1. 初始化完成后，运行以下命令部署您的应用程序：
firebase deploy --only hosting
Enter fullscreen mode Exit fullscreen mode

CLI 将根据指定的配置构建并部署您的 React 应用程序。部署完成后，您将获得一个唯一的 URL，您的 React 应用程序将托管在该 URL 上。

GitHub Pages

GitHub Pages 是 GitHub 提供的托管服务，可让您免费托管静态网站。对于部署 React 应用来说，这是一个绝佳的选择，尤其适合已经托管在 GitHub 上的项目。GitHub Pages 设置简单，为部署 React 应用提供了便捷高效的流程。

使用 GitHub Pages 设置进行部署

要使用 GitHub Pages 部署您的 React 应用程序，请按照以下步骤操作：

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

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

  3. 向下滚动到 GitHub Pages 部分。

  4. 在“源”下拉菜单中，选择包含 React 应用构建文件的分支。

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

GitHub Pages 会自动检测所选分支中的构建文件并部署您的 React 应用。部署完成后，您将获得一个唯一的 URL，您的 React 应用将托管在该 URL 上。

使用 GitHub Actions 工作流进行部署

如果您更喜欢自动化部署流程，可以使用 GitHub Actions 将 React 应用部署到 GitHub Pages。以下是如何设置 GitHub Actions 工作流来部署 React 应用：

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

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

名称：部署到 GitHub Pages

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
Enter fullscreen mode Exit fullscreen mode
  1. 提交并推送更改到您的代码仓库。

每当您向指定分支推送更改时，GitHub Actions 都会自动触发部署工作流。该工作流会构建您的 React 应用并将其部署到 GitHub Pages，从而通过唯一的 URL 使其可访问。

GitLab Pages

GitLab Pages 是 GitLab 提供的托管服务，可让您免费托管静态网站。如果您的 React 项目托管在 GitLab 上，GitLab Pages 可为您提供一种轻松便捷的方式来部署您的 React 应用程序。GitLab Pages 同时支持静态和动态网站，使其成为托管 React 应用程序的理想选择。

使用 GitLab CI/CD 流水线进行部署

要使用 GitLab Pages 部署您的 React 应用程序，请按照以下步骤操作：

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

  2. 点击代码库顶部的 CI/CD 选项卡。

  3. 向下滚动至“管道”部分。

  4. 点击“新建管道”按钮以触发新的管道。

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

GitLab 会根据您指定的配置自动构建并部署您的 React 应用。部署完成后，您将获得一个唯一的 URL，您的 React 应用将托管在该 URL 上。

使成为

Render 是一款托管服务，提供免费的静态网站托管套餐，因此是部署 React 应用的理想选择。Render 提供用户友好的界面，并与 Git 平台无缝集成，让您可以轻松部署和管理 React 项目。

使用渲染仪表板进行部署

要使用 Render 控制面板部署您的 React 应用程序，请按照以下步骤操作：

  1. 使用您的 GitHub 帐户登录 Render，如果您还没有帐户，请创建一个新帐户。

  2. 登录后，点击仪表盘上的“创建新项目”按钮。

  3. 选择您喜欢的 Git 代码仓库平台，例如 GitHub、GitLab 或 Bitbucket。

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

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

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

  7. 点击“创建 Web 服务”按钮开始部署过程。

Render 会自动检测您的 React 应用，并根据指定的配置进行构建。构建完成后，您的 React 应用将被部署，并通过 Render 提供的唯一 URL 进行访问。

涌

Surge 是一款简单易用的托管服务，让您轻松部署静态网站，包括 React 应用。Surge 提供免费套餐，让您可以免费部署和托管 React 应用，并提供升级选项以获得更多功能和使用限制。

使用 Surge CLI 进行部署

要使用 Surge CLI 部署 React 应用程序，请按照以下步骤操作：

  1. 在终端中运行以下命令来安装 Surge CLI：
npm install -g surge
Enter fullscreen mode Exit fullscreen mode

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

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

surge
Enter fullscreen mode Exit fullscreen mode

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

结论

本文介绍了八种提供免费 React 应用托管方案的托管服务。每种托管服务都有其独特的功能和优势，因此选择最符合您项目需求的服务至关重要。无论您选择 Vercel、Netlify、AWS Amplify、Firebase、GitHub Pages、GitLab Pages、Render 还是 Surge，您都可以放心，您的 React 应用将以可靠高效的方式部署和托管。

记住，部署 React 应用只是第一步。定期更新和维护已部署的应用至关重要，以确保其最佳性能和安全性。借助合适的托管服务和妥善的维护，您的 React 应用可以触达更广泛的用户群体，并在数字世界中产生持久的影响。所以，选择一款满足您需求的托管服务，让您的 React 应用大放异彩吧！

文章来源：https://dev.to/idurar/the-best-free-deploying-your-react-application-8-free-hosting-services-to-consider-df3
如何美观地整理您的 GitHub ...
为什么人工智能是由Python而不...