免费部署 React 应用程序的 5 种方法

中国人

本文探讨了使用 Back4app 和 Netlify 等云平台免费部署 React 应用程序的五种方法。

React 已成为现代网络开发中构建动态用户界面的常用库。

然而，从开发到部署的过程往往会在一个关键点上绊倒–成本。

随着每天开发的 React 应用程序越来越多，对经济实惠的托管解决方案的需求也越来越大。

Contents

1 主要收获
2 React 托管选项概览
3 使用 Back4app 的人工智能代理部署您的 React 应用程序
4 使用 Netlify 的拖放功能部署 React 应用程序
5 使用 GitHub Pages部署静态 React 应用程序
6 使用 Vercel 的 CLI 部署 React 应用程序
7 使用 Firebase 托管部署 React 应用程序
8 结论

主要收获

学习部署 React 应用程序的多种方法，包括人工智能、拖放和 CLI
使用 Back4app 和 Vercel 等多种云的部署经验概述
根据您的要求比较部署选项

React 托管选项概览

名称	标题	部署概述
Back4app	简化网络应用程序部署	提供 BaaS 和 CaaS 服务，以及便于部署的人工智能代理。
Netlify	无忧的现代虚拟主机	通过全球服务器网络托管，从任何代码库构建。
GitHub Pages	从 GitHub 仓库直接托管	直接从 GitHub 托管静态网站，无需服务器端处理。
Vercel	构建、扩展和保护应用程序的绝佳体验	具有可扩展性和无服务器功能等特点，便于部署。
Firebase	安全快捷的虚拟主机服务	提供一系列工具，包括 Firestore 数据库和全球 CDN 托管。

使用 Back4app 的人工智能代理部署您的 React 应用程序

Back4app是一个云平台，可简化网络应用程序的构建、部署和管理过程。它是托管 React 应用程序的绝佳选择，让我们开始吧。

Back4app 允许用户免费部署 React，并提供各种服务，包括后端即服务（BaaS）、容器即服务（CaaS）和人工智能代理。

通过 Back4app 的 BaaS 服务，您可以轻松设置网络和移动应用程序的后台，消除了为 React 应用程序从头开始设置后台时通常需要构建和维护基础设施的复杂性。

BaaS 服务提供数据库管理和用户身份验证等功能。

CaaS 服务允许您使用 Docker 容器管理和部署网络应用程序。该服务通过自动执行重复性任务和管理服务器端基础设施，消除了开发与生产之间的差距。

Back4app AI 代理允许您对 Back4app 的所有服务使用提示，并简化了托管 React 应用程序的方式。

您可以管理代码库、创建和管理应用程序以及部署网络应用程序。

以下是如何使用 Back4app AI 代理部署 React 应用程序的详细说明

要使用AI 代理和Back4app 容器部署 React 应用程序，您需要准备一些东西：

Back4app 账户。访问Back4app 网站，点击注册按钮创建账户。
Back4App Containers GitHub 应用程序已安装在您的 GitHub 账户上。

安装 Back4app Containers GitHub 应用程序后，需要授予该应用程序访问要部署的版本库的权限。

此外，你的版本库还需要一个 Dockerfile。下面是一个可以添加到版本库的 Dockerfile 示例：

FROM node:17-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "npm", "run", "dev" ]

请注意，如果您的 React 项目是使用 Vite 创建的，您还需要修改 vite.config.ts 文件。您还需要修改vite.config.ts文件。

就像这样

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 8080,
  }
})

该代码块配置服务器以接受所有网络接口的连接，并设置开发服务器的运行端口。

在这种情况下，服务器可通过http://localhost:8080 访问。

添加Dockerfile和修改 Vite 配置文件后，确保将更改推送到 GitHub 仓库。

登录您的账户，点击“AI Agent “按钮访问 Back4app AI Agent。

这将带您进入 Back4app AI 代理页面。

接下来，提示人工智能 “从 GitHub 部署我的网络应用程序“。

代理会提供一份清单，供您开始部署流程，例如您要部署的应用程序的 GitHub 仓库。

使用提示符 “这是 GitHub仓库的 URL: <Your_GitHub_URL> “或类似提示。

回答代理可能提出的其他问题，如 “要部署的分支”，以启动部署流程。

如上图所示，AI 代理目前正在部署您的 React 应用程序。一段时间后，部署应该会成功，人工智能代理提供的 URL 也应该可以正常使用。

如果部署失败，人工智能代理将提供故障排除选项和可能的修复方法，以确保您的应用程序成功部署。

要确认部署是否完成，可以向人工智能代理询问应用程序的当前部署状态。

使用 Netlify 的拖放功能部署 React 应用程序

Netlify是一个云计算平台，为网络开发、部署和托管提供一整套工具。

对于那些希望构建和部署现代网络应用程序，而无需管理基础设施的开发人员和企业来说，它是一个很受欢迎的选择。

Netlify 可从任何源代码库（包括 GitHub、GitLab 和 Bitbucket）构建您的网络应用程序。它支持许多静态网站生成器和框架，如 React、Vue.js 和 Angular。

通过 Netlify，您可以将网络应用程序部署到全球服务器网络并免费托管。

Netlify 还提供各种付费计划，具有自定义域、私有部署和团队协作等附加功能。

以下是如何使用 Netlify 的拖放功能部署 React 应用程序的详细说明

要使用 Netlify 部署应用程序，请访问Netlify 网站并登录您现有的 Netlify 账户。如果您是 Netlify 的新用户，请点击“注册 “按钮创建账户。

导航至账户仪表板，单击“添加新网站 “下拉菜单。从下拉菜单中选择“手动部署 “选项。

手动部署 “选项将带您进入一个页面，您可以在此拖放 React 应用程序的构建文件。

运行下面的命令可以获取 React 项目的构建文件：

npm run build

上述命令会在项目中生成一个dist文件夹。将dist文件夹拖放到 Netlify 页面上。这将启动部署过程。

注意：如果使用create-react-app 创建了项目，该命令将生成一个构建文件夹。

部署成功后，Netlify 会将您重定向到应用程序的控制面板，在那里您可以找到已部署应用程序的 URL。

使用 GitHub Pages部署静态 React 应用程序

GitHub Pages是版本控制和代码协作平台GitHub 提供的静态网站托管服务。

它允许你直接从 GitHub 仓库托管网站，专为托管不需要服务器端处理的静态网站而设计。

以下是如何使用 GitHub Pages部署 React 应用程序的说明

要使用 GitHub Pages部署 React 应用程序，您的项目必须有一个 GitHub 仓库。

如果您的应用程序没有 GitHub 仓库，您需要创建一个，添加应用程序的代码，提交并推送到该仓库。

接下来，你需要在应用程序中安装gh-pages软件包。您将使用该软件包创建应用程序的生产构建，并将其推送到版本库的gh-pages分支。

要在项目中安装gh-pages软件包，请在终端运行以下命令：

npm install gh-pages --save-dev

安装软件包后，在package.json文件中添加主页属性以及重新部署和部署脚本，如下代码块所示。

{
	"homepage": "http://<github-username>.github.io/<your-repository-name>",
	// other fields
}
"scripts": {
	"redeploy": "npm run build",
	"deploy": "gh-pages -d build",
	//other scripts  
}

主页属性应是您的版本库链接。将代码块中的github-username和your-repository-name替换为 GitHub 用户名和版本库名称。

将更改推送到 GitHub 仓库，然后在终端上运行部署脚本。

就像这样